refactor: don't generate a type attribute for <script> elements, update associated docs (#1053)

therealparmesh · web-flow · commit 2514d8907519 · 2025-01-22T19:17:47.000Z
diff --git a/docs/docs/03-syntax-and-usage/03-attributes.md b/docs/docs/03-syntax-and-usage/03-attributes.md
@@ -225,7 +225,7 @@ templ Button(text string) {
 ```
 
 ```html title="Output"
-<script type="text/javascript">
+<script>
  function __templ_withParameters_1056(a, b, c){console.log(a, b, c);}function __templ_withoutParameters_6bbf(){alert("hello");}
 </script>
 <button onclick="__templ_withParameters_1056("test","Say hello",123)" onmouseover="__templ_withoutParameters_6bbf()" type="button">
diff --git a/docs/docs/03-syntax-and-usage/12-script-templates.md b/docs/docs/03-syntax-and-usage/12-script-templates.md
@@ -6,7 +6,7 @@ Use standard `<script>` tags, and standard HTML attributes to run JavaScript on
 
 ```templ
 templ body() {
-  <script type="text/javascript">
+  <script>
     function handleClick(event) {
       alert(event + ' clicked');
     }
@@ -49,7 +49,7 @@ HTML element `on*` attributes pass an event object to the function. To pass the
 :::
 
 ```templ title="input.templ"
-<script type="text/javascript">
+<script>
 	function clickHandler(event, message) {
 		alert(message);
 		event.preventDefault();
@@ -61,7 +61,7 @@ HTML element `on*` attributes pass an event object to the function. To pass the
 The output would be:
 
 ```html title="output.html"
-<script type="text/javascript">
+<script>
 	function clickHandler(event, message) {
 		alert(message);
 		event.preventDefault();
@@ -87,7 +87,7 @@ templ InitializeClientSideScripts(data CustomType) {
 This will output a `<script>` tag that calls the `functionToCall` function with the `Name` and `Age` properties of the `data` object.
 
 ```html title="output.html"
-<script type="text/javascript">
+<script>
   functionToCall("John", 42);
 </script>
 ```
@@ -169,15 +169,15 @@ var helloHandle = templ.NewOnceHandle()
 templ hello(label, name string) {
   // This script is only rendered once per HTTP request.
   @helloHandle.Once() {
-    <script type="text/javascript">
+    <script>
       function hello(name) {
         alert('Hello, ' + name + '!');
       }
     </script>
   }
   <div>
     <input type="button" value={ label } data-name={ name }/>
-    <script type="text/javascript">
+    <script>
       // To prevent the variables from leaking into the global scope,
       // this script is wrapped in an IIFE (Immediately Invoked Function Expression).
       (() => {
@@ -213,7 +213,7 @@ var surrealHandle = templ.NewOnceHandle()
 
 templ hello(label, name string) {
   @helloHandle.Once() {
-    <script type="text/javascript">
+    <script>
       function hello(name) {
         alert('Hello, ' + name + '!');
       }
@@ -224,7 +224,7 @@ templ hello(label, name string) {
   }
   <div>
     <input type="button" value={ label } data-name={ name }/>
-    <script type="text/javascript">
+    <script>
       // me("-") returns the previous sibling element.
       me("-").addEventListener('click', function() {
         let name = this.getAttribute('data-name');
@@ -492,9 +492,9 @@ After building and running the executable, running `curl http://localhost:8080/`
 ```html title="Output"
 <html>
 	<body>
-		<script type="text/javascript">function __templ_printToConsole_5a85(content){console.log(content)}</script>
-		<script type="text/javascript">__templ_printToConsole_5a85("2023-11-11 01:01:40.983381358 +0000 UTC")</script>
-		<script type="text/javascript">__templ_printToConsole_5a85("Again: 2023-11-11 01:01:40.983381358 +0000 UTC")</script>
+		<script>function __templ_printToConsole_5a85(content){console.log(content)}</script>
+		<script>__templ_printToConsole_5a85("2023-11-11 01:01:40.983381358 +0000 UTC")</script>
+		<script>__templ_printToConsole_5a85("Again: 2023-11-11 01:01:40.983381358 +0000 UTC")</script>
 	</body>
 </html>
 ```
diff --git a/docs/docs/03-syntax-and-usage/17-using-react-with-templ.md b/docs/docs/03-syntax-and-usage/17-using-react-with-templ.md
@@ -188,7 +188,7 @@ import "fmt"
 
 templ Hello(name string) {
 	<div data-name={ name }>
-		<script type="text/javascript">
+		<script>
 			bundle.renderHello(document.currentScript.closest('div'));
 		</script>
 	</div>
@@ -243,19 +243,19 @@ The HTML that's rendered is:
     <script src="static/index.js"></script>
 
     <div data-name="Alice">
-      <script type="text/javascript">
+      <script>
         // Place the React component into the parent div.
         bundle.renderHello(document.currentScript.closest('div'));
       </script>
     </div>
     <div data-name="Bob">
-      <script type="text/javascript">
+      <script>
         // Place the React component into the parent div.
 	bundle.renderHello(document.currentScript.closest('div'));
       </script>
     </div>
     <div data-name="Charlie">
-      <script type="text/javascript">
+      <script>
         // Place the React component into the parent div.
 	bundle.renderHello(document.currentScript.closest('div'));
       </script>
diff --git a/docs/docs/03-syntax-and-usage/18-render-once.md b/docs/docs/03-syntax-and-usage/18-render-once.md
@@ -19,7 +19,7 @@ var helloHandle = templ.NewOnceHandle()
 
 templ hello(label, name string) {
   @helloHandle.Once() {
-    <script type="text/javascript">
+    <script>
       function hello(name) {
         alert('Hello, ' + name + '!');
       }
@@ -35,7 +35,7 @@ templ page() {
 ```
 
 ```html title="Output"
-<script type="text/javascript">
+<script>
   function hello(name) {
     alert('Hello, ' + name + '!');
   }
diff --git a/docs/docs/10-security/01-injection-attacks.md b/docs/docs/10-security/01-injection-attacks.md
@@ -6,7 +6,7 @@ templ is designed to prevent user-provided data from being used to inject vulner
 
 ```html
 templ Example() {
-  <script type="text/javascript">
+  <script>
     function showAlert() {
       alert("hello");
     }
diff --git a/docs/docs/10-security/02-content-security-policy.md b/docs/docs/10-security/02-content-security-policy.md
@@ -75,12 +75,12 @@ func main() {
 ```
 
 ```html title="Output"
-<script type="text/javascript" nonce="randomly generated nonce">
+<script nonce="randomly generated nonce">
   function __templ_onLoad_5a85() {
     alert("Hello, world!")
   }
 </script>
-<script type="text/javascript" nonce="randomly generated nonce">
+<script nonce="randomly generated nonce">
   __templ_onLoad_5a85()
 </script>
 ```
diff --git a/examples/integration-react/components.templ b/examples/integration-react/components.templ
@@ -2,7 +2,7 @@ package main
 
 templ Hello(name string) {
 	<div data-name={ name }>
-		<script type="text/javascript">
+		<script>
 			// Place the React component into the parent div.
 			bundle.renderHello(document.currentScript.closest('div'));
 		</script>
diff --git a/examples/integration-react/components_templ.go b/examples/integration-react/components_templ.go
diff --git a/generator/generator.go b/generator/generator.go
@@ -973,7 +973,7 @@ func (g *generator) writeElement(indentLevel int, n parser.Element) (err error)
 		if err = g.writeElementCSS(indentLevel, attrs); err != nil {
 			return err
 		}
-		// <script type="text/javascript"></script>
+		// <script></script>
 		if err = g.writeElementScript(indentLevel, attrs); err != nil {
 			return err
 		}
@@ -1356,7 +1356,7 @@ func (g *generator) writeRawElement(indentLevel int, n parser.RawElement) (err e
 			return err
 		}
 	} else {
-		// <script type="text/javascript"></script>
+		// <script></script>
 		if err = g.writeElementScript(indentLevel, n.Attributes); err != nil {
 			return err
 		}
diff --git a/generator/test-js-unsafe-usage/expected.html b/generator/test-js-unsafe-usage/expected.html
@@ -1,6 +1,6 @@
 <button onClick="anythingILike('blah')">
  Click me
 </button>
-<script type="text/javascript">
+<script>
  // Arbitrary JS code
 </script>
diff --git a/generator/test-js-usage/expected.html b/generator/test-js-usage/expected.html
@@ -1,7 +1,7 @@
 <button onclick="alert(&#34;Hello, World!&#34;)">
  Click me
 </button>
-<script type="text/javascript">
+<script>
  function customAlert(msg, date) {
 				alert(msg + " " + date);
 			}
@@ -12,7 +12,7 @@
 <button onclick="customAlert(&#34;Hello, custom alert 2: &#34;,&#34;2020-01-01T00:00:00Z&#34;)">
  Click me
 </button>
-<script type="text/javascript">
+<script>
  customAlert("Runs on page load","2020-01-01T00:00:00Z")
 </script>
 <script>
diff --git a/generator/test-js-usage/template.templ b/generator/test-js-usage/template.templ
@@ -7,7 +7,7 @@ var onceHandle = templ.NewOnceHandle()
 templ TestComponent() {
 	<button onClick={ templ.JSFuncCall("alert", "Hello, World!") }>Click me</button>
 	@onceHandle.Once() {
-		<script type="text/javascript">
+		<script>
 			function customAlert(msg, date) {
 				alert(msg + " " + date);
 			}
diff --git a/generator/test-js-usage/template_templ.go b/generator/test-js-usage/template_templ.go
diff --git a/generator/test-once/expected.html b/generator/test-once/expected.html
@@ -1,4 +1,4 @@
-<script type="text/javascript">
+<script>
 			function hello(name) {
 				alert('Hello, ' + name + '!');
 			}
diff --git a/generator/test-once/template.templ b/generator/test-once/template.templ
@@ -4,7 +4,7 @@ var helloHandle = templ.NewOnceHandle()
 
 templ hello(label, name string) {
 	@helloHandle.Once() {
-		<script type="text/javascript">
+		<script>
 			function hello(name) {
 				alert('Hello, ' + name + '!');
 			}
diff --git a/generator/test-once/template_templ.go b/generator/test-once/template_templ.go
diff --git a/generator/test-only-scripts/expected.html b/generator/test-only-scripts/expected.html
@@ -1,7 +1,7 @@
-<script type="text/javascript">
+<script>
   function __templ_withParameters_1056(a, b, c){console.log(a, b, c);
 }
 </script>
-<script type="text/javascript">
+<script>
   __templ_withParameters_1056("hello","world",42069)
 </script>
diff --git a/generator/test-raw-elements/expected.html b/generator/test-raw-elements/expected.html
@@ -7,7 +7,7 @@
           border: 1px solid black;
         }
     </style>
-		<script type="text/javascript">
+		<script>
         $("div").marquee();
         function test() {
               window.open("https://example.com")
diff --git a/generator/test-raw-elements/template.templ b/generator/test-raw-elements/template.templ
@@ -10,7 +10,7 @@ templ Example() {
           border: 1px solid black;
         }
       </style>
-			<script type="text/javascript">
+			<script>
         $("div").marquee();
         function test() {
               window.open("https://example.com")
diff --git a/generator/test-raw-elements/template_templ.go b/generator/test-raw-elements/template_templ.go
diff --git a/generator/test-script-inline/expected.html b/generator/test-script-inline/expected.html
@@ -1,20 +1,20 @@
-<script type="text/javascript">
+<script>
 	function __templ_withoutParameters_6bbf(){alert("hello");
 }
 </script>
-<script type="text/javascript">
+<script>
   __templ_withoutParameters_6bbf()
 </script>
-<script type="text/javascript">
+<script>
   function __templ_withParameters_1056(a, b, c){console.log(a, b, c);
 }
 </script>
-<script type="text/javascript">
+<script>
   __templ_withParameters_1056("injected","test",123)
 </script>
-<script type="text/javascript">
+<script>
   __templ_withoutParameters_6bbf()
 </script>
-<script type="text/javascript">
+<script>
   __templ_withParameters_1056("injected","test",123)
 </script>
diff --git a/generator/test-script-usage-nonce/expected.html b/generator/test-script-usage-nonce/expected.html
@@ -1,4 +1,4 @@
-<script type="text/javascript" nonce="nonce1">
+<script nonce="nonce1">
 	function __templ_withParameters_1056(a, b, c){console.log(a, b, c);
 }function __templ_withoutParameters_6bbf(){alert("hello");
 }
@@ -7,12 +7,12 @@
 <button onClick="__templ_withParameters_1056(&#34;test&#34;,&#34;B&#34;,123)" onMouseover="__templ_withoutParameters_6bbf()" type="button">B</button>
 <button onMouseover="console.log(&#39;mouseover&#39;)" type="button">Button C</button>
 <button hx-on::click="alert('clicked inline')" type="button">Button D</button>
-<script type="text/javascript" nonce="nonce1">
+<script nonce="nonce1">
   function __templ_onClick_657d(){alert("clicked");
 }
 </script>
 <button hx-on::click="__templ_onClick_657d()" type="button">Button E</button>
-<script type="text/javascript" nonce="nonce1">
+<script nonce="nonce1">
   function __templ_conditionalScript_de41(){alert("conditional");
 }
 </script>
diff --git a/generator/test-script-usage/expected.html b/generator/test-script-usage/expected.html
@@ -1,4 +1,4 @@
-<script type="text/javascript">
+<script>
 	function __templ_withParameters_1056(a, b, c){console.log(a, b, c);
 }function __templ_withoutParameters_6bbf(){alert("hello");
 }
@@ -7,22 +7,22 @@
 <button onClick="__templ_withParameters_1056(&#34;test&#34;,&#34;B&#34;,123)" onMouseover="__templ_withoutParameters_6bbf()" type="button">B</button>
 <button onMouseover="console.log(&#39;mouseover&#39;)" type="button">Button C</button>
 <button hx-on::click="alert('clicked inline')" type="button">Button D</button>
-<script type="text/javascript">
+<script>
   function __templ_onClick_657d(){alert("clicked");
 }
 </script>
 <button hx-on::click="__templ_onClick_657d()" type="button">Button E</button>
-<script type="text/javascript">
+<script>
   function __templ_whenButtonIsClicked_253e(event){console.log(event.target)
 }
 </script>
 <button onclick="__templ_whenButtonIsClicked_253e(event)">Button F</button>
-<script type="text/javascript">
+<script>
   function __templ_conditionalScript_de41(){alert("conditional");
 }
 </script>
 <input type="button" value="Click me" onclick="__templ_conditionalScript_de41()" />
-<script type="text/javascript">
+<script>
   function __templ_alertTest_eadf(){alert('testing');
 }
 </script>
diff --git a/js_test.go b/js_test.go
diff --git a/scripttemplate.go b/scripttemplate.go
diff --git a/scripttemplate_test.go b/scripttemplate_test.go

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ templ is designed to prevent user-provided data from being used to inject vulner`
`6`	`6`
`7`	`7`	```html
`8`	`8`	`templ Example() {`
`9`		`- <script type="text/javascript">`
	`9`	`+ <script>`
`10`	`10`	`function showAlert() {`
`11`	`11`	`alert("hello");`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -973,7 +973,7 @@ func (g *generator) writeElement(indentLevel int, n parser.Element) (err error)`
`973`	`973`	`if err = g.writeElementCSS(indentLevel, attrs); err != nil {`
`974`	`974`	`return err`
`975`	`975`	`}`
`976`		`- // <script type="text/javascript"></script>`
	`976`	`+ // <script></script>`
`977`	`977`	`if err = g.writeElementScript(indentLevel, attrs); err != nil {`
`978`	`978`	`return err`
`979`	`979`	`}`
`@@ -1356,7 +1356,7 @@ func (g *generator) writeRawElement(indentLevel int, n parser.RawElement) (err e`
`1356`	`1356`	`return err`
`1357`	`1357`	`}`
`1358`	`1358`	`} else {`
`1359`		`- // <script type="text/javascript"></script>`
	`1359`	`+ // <script></script>`
`1360`	`1360`	`if err = g.writeElementScript(indentLevel, n.Attributes); err != nil {`
`1361`	`1361`	`return err`
`1362`	`1362`	`}`