H0llyW00dzZ/templ
H0llyW00dzZ/templ
1
0
Fork 0
mirror of https://github.com/a-h/templ.git synced 2025-02-06 10:03:16 +00:00
Code Releases Wiki Activity

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

Browse Source
This commit is contained in:
Parmesh Krishen 2025-01-22 13:17:47 -06:00 committed by GitHub
parent 6ea47fff11
commit 2514d89075
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 61 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/03-syntax-and-usage/03-attributes.md
View File

@ -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">

22
docs/docs/03-syntax-and-usage/12-script-templates.md
View File

@ -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,7 +169,7 @@ 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 + '!');
}
@ -177,7 +177,7 @@ templ hello(label, name string) {
}
<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>
```

8
docs/docs/03-syntax-and-usage/17-using-react-with-templ.md
View File

@ -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>

4
docs/docs/03-syntax-and-usage/18-render-once.md
View File

@ -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 + '!');
}

2
docs/docs/10-security/01-injection-attacks.md
View File

@ -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");
}

4
docs/docs/10-security/02-content-security-policy.md
View File

@ -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>
```

2
examples/integration-react/components.templ
View File

@ -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>

2
examples/integration-react/components_templ.go
View File

@ -41,7 +41,7 @@ func Hello(name string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><script type=\"text/javascript\">\n\t\t\t// Place the React component into the parent div.\n\t\t\tbundle.renderHello(document.currentScript.closest('div'));\n\t\t</script></div>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><script>\n\t\t\t// Place the React component into the parent div.\n\t\t\tbundle.renderHello(document.currentScript.closest('div'));\n\t\t</script></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

4
generator/generator.go
View File

@ -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
}

2
generator/test-js-unsafe-usage/expected.html
View File

@ -1,6 +1,6 @@
<button onClick="anythingILike('blah')">
Click me
</button>
<script type="text/javascript">
<script>
// Arbitrary JS code
</script>

4
generator/test-js-usage/expected.html
View File

@ -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>

2
generator/test-js-usage/template.templ
View File

@ -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);
}

2
generator/test-js-usage/template_templ.go
View File

@ -61,7 +61,7 @@ func TestComponent() templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<script type=\"text/javascript\">\n\t\t\tfunction customAlert(msg, date) {\n\t\t\t\talert(msg + \" \" + date);\n\t\t\t}\n\t\t</script>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<script>\n\t\t\tfunction customAlert(msg, date) {\n\t\t\t\talert(msg + \" \" + date);\n\t\t\t}\n\t\t</script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

2
generator/test-once/expected.html
View File

@ -1,4 +1,4 @@
<script type="text/javascript">
<script>
function hello(name) {
alert('Hello, ' + name + '!');
}

2
generator/test-once/template.templ
View File

@ -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 + '!');
}

2
generator/test-once/template_templ.go
View File

@ -42,7 +42,7 @@ func hello(label, name string) templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script type=\"text/javascript\">\n\t\t\tfunction hello(name) {\n\t\t\t\talert('Hello, ' + name + '!');\n\t\t\t}\n\t\t</script>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script>\n\t\t\tfunction hello(name) {\n\t\t\t\talert('Hello, ' + name + '!');\n\t\t\t}\n\t\t</script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

4
generator/test-only-scripts/expected.html
View File

@ -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>

2
generator/test-raw-elements/expected.html
View File

@ -7,7 +7,7 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
<script>
$("div").marquee();
function test() {
window.open("https://example.com")

2
generator/test-raw-elements/template.templ
View File

@ -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")

2
generator/test-raw-elements/template_templ.go
View File

@ -28,7 +28,7 @@ func Example() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<html><head></head><body><style><!-- Some stuff --></style><style>\n .customClass {\n border: 1px solid black;\n }\n </style><script type=\"text/javascript\">\n $(\"div\").marquee();\n function test() {\n window.open(\"https://example.com\")\n }\n </script><h1>Hello</h1>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<html><head></head><body><style><!-- Some stuff --></style><style>\n .customClass {\n border: 1px solid black;\n }\n </style><script>\n $(\"div\").marquee();\n function test() {\n window.open(\"https://example.com\")\n }\n </script><h1>Hello</h1>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

12
generator/test-script-inline/expected.html
View File

@ -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>

6
generator/test-script-usage-nonce/expected.html
View File

@ -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>

10
generator/test-script-usage/expected.html
View File

@ -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>

10
js_test.go
View File

@ -68,7 +68,7 @@ func TestJSFuncCall(t *testing.T) {
Call: "doSomething()",
CallInline: "doSomething()",
},
expectedComponentOutput: `<script type="text/javascript">doSomething()</script>`,
expectedComponentOutput: `<script>doSomething()</script>`,
},
{
name: "single argument is supported",
@ -80,7 +80,7 @@ func TestJSFuncCall(t *testing.T) {
Call: "alert(&#34;hello&#34;)",
CallInline: `alert("hello")`,
},
expectedComponentOutput: `<script type="text/javascript">alert("hello")</script>`,
expectedComponentOutput: `<script>alert("hello")</script>`,
},
{
name: "multiple arguments are supported",
@ -92,7 +92,7 @@ func TestJSFuncCall(t *testing.T) {
Call: "console.log(&#34;hello&#34;,&#34;world&#34;)",
CallInline: `console.log("hello","world")`,
},
expectedComponentOutput: `<script type="text/javascript">console.log("hello","world")</script>`,
expectedComponentOutput: `<script>console.log("hello","world")</script>`,
},
{
name: "attribute injection fails",
@ -104,7 +104,7 @@ func TestJSFuncCall(t *testing.T) {
Call: "__templ_invalid_js_function_name()",
CallInline: "__templ_invalid_js_function_name()",
},
expectedComponentOutput: `<script type="text/javascript">__templ_invalid_js_function_name()</script>`,
expectedComponentOutput: `<script>__templ_invalid_js_function_name()</script>`,
},
{
name: "closing the script and injecting HTML fails",
@ -116,7 +116,7 @@ func TestJSFuncCall(t *testing.T) {
Call: "__templ_invalid_js_function_name()",
CallInline: "__templ_invalid_js_function_name()",
},
expectedComponentOutput: `<script type="text/javascript">__templ_invalid_js_function_name()</script>`,
expectedComponentOutput: `<script>__templ_invalid_js_function_name()</script>`,
},
}
for _, tt := range tests {

2
scripttemplate.go
View File

@ -49,7 +49,7 @@ func writeScriptHeader(ctx context.Context, w io.Writer) (err error) {
if nonce := GetNonce(ctx); nonce != "" {
nonceAttr = " nonce=\"" + EscapeString(nonce) + "\""
}
_, err = fmt.Fprintf(w, `<script type="text/javascript"%s>`, nonceAttr)
_, err = fmt.Fprintf(w, `<script%s>`, nonceAttr)
return err
}

6
scripttemplate_test.go
View File

@ -28,7 +28,7 @@ func TestRenderScriptItems(t *testing.T) {
name: "if none are ignored, everything is rendered",
toIgnore: nil,
toRender: []templ.ComponentScript{s1, s2},
expected: `<script type="text/javascript">` + s1.Function + s2.Function + `</script>`,
expected: `<script>` + s1.Function + s2.Function + `</script>`,
},
{
name: "if something outside the expected is ignored, if has no effect",
@ -39,13 +39,13 @@ func TestRenderScriptItems(t *testing.T) {
},
},
toRender: []templ.ComponentScript{s1, s2},
expected: `<script type="text/javascript">` + s1.Function + s2.Function + `</script>`,
expected: `<script>` + s1.Function + s2.Function + `</script>`,
},
{
name: "if one is ignored, it's not rendered",
toIgnore: []templ.ComponentScript{s1},
toRender: []templ.ComponentScript{s1, s2},
expected: `<script type="text/javascript">` + s2.Function + `</script>`,
expected: `<script>` + s2.Function + `</script>`,
},
{
name: "if all are ignored, not even style tags are rendered",