Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jan 22, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/docs/03-syntax-and-usage/03-attributes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
22 changes: 11 additions & 11 deletions docs/docs/03-syntax-and-usage/12-script-templates.md
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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>
```
Expand Down Expand Up @@ -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).
(() => {
Expand Down Expand Up @@ -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 + '!');
}
Expand All @@ -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');
Expand Down Expand Up @@ -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>
```
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/03-syntax-and-usage/17-using-react-with-templ.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/03-syntax-and-usage/18-render-once.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 + '!');
}
Expand All @@ -35,7 +35,7 @@ templ page() {
```

```html title="Output"
<script type="text/javascript">
<script>
function hello(name) {
alert('Hello, ' + name + '!');
}
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/10-security/01-injection-attacks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/10-security/02-content-security-policy.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 1 addition & 1 deletion examples/integration-react/components.templ
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/integration-react/components_templ.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions generator/generator.go
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down Expand Up @@ -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
}
Expand Down
2 changes: 1 addition & 1 deletion generator/test-js-unsafe-usage/expected.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<button onClick="anythingILike('blah')">
Click me
</button>
<script type="text/javascript">
<script>
// Arbitrary JS code
</script>
4 changes: 2 additions & 2 deletions generator/test-js-usage/expected.html
Original file line number Diff line number Diff line change
@@ -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);
}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion generator/test-js-usage/template.templ
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion generator/test-js-usage/template_templ.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion generator/test-once/expected.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script type="text/javascript">
<script>
function hello(name) {
alert('Hello, ' + name + '!');
}
Expand Down
2 changes: 1 addition & 1 deletion generator/test-once/template.templ
Original file line number Diff line number Diff line change
Expand Up @@ -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 + '!');
}
Expand Down
2 changes: 1 addition & 1 deletion generator/test-once/template_templ.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions generator/test-only-scripts/expected.html
Original file line number Diff line number Diff line change
@@ -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 changes: 1 addition & 1 deletion generator/test-raw-elements/expected.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
border: 1px solid black;
}
</style>
<script type="text/javascript">
<script>
$("div").marquee();
function test() {
window.open("https://example.com")
Expand Down
2 changes: 1 addition & 1 deletion generator/test-raw-elements/template.templ
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down
2 changes: 1 addition & 1 deletion generator/test-raw-elements/template_templ.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions generator/test-script-inline/expected.html
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 3 deletions generator/test-script-usage-nonce/expected.html
Original file line number Diff line number Diff line change
@@ -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");
}
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions generator/test-script-usage/expected.html
Original file line number Diff line number Diff line change
@@ -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");
}
Expand All @@ -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>
Expand Down
Loading