Support for modules in script

[martinjirku]

Modern browsers have started to support module functionality natively.

The syntax looks like this:

<script type="module">
import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm';
</script>

Currently, the templ supports text/javascript: <script type="text/javascript">.

Can we extend templ, to be able to support such syntax?

(I am willing to help with the implementation if needed.)

[a-h]

I'm not really sure what the change is. You can already put a <script> tag into a templ component and it will be rendered as-is without any changes at all as per https://templ.guide/syntax-and-usage/script-templates#script-tags

Can you write an example of the templ code you'd like to write, and the output HTML you'd like to see?

[martinjirku]

The simplified example could be this:

package component

script ScriptForButtonWithTooltip(className string) {
   import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm';
 
   const button = document.querySelector(`${className} button`);
   const tooltip = document.querySelector(`.${className} .tooltip`);
 
    computePosition(button, tooltip).then(({x, y}) => {
      Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px` });
   });
}

templ ButtonWithTooltip(id string) {
   <div class={id}>
       <button>Hover over me!</button>
       <div class="tooltip">show me</div>
   </div>
   @ScriptForButtonWithTooltip(id)
}

// ... somewhere in the code
templ Page() {
  @ButtonWithTooltip("id1")
  @ButtonWithTooltip("id2")
  @ButtonWithTooltip("id3")
  @ButtonWithTooltip("id4")
}

Currently, when using the script keyword, the templ creates 2 script tags:

• function definition RenderScriptItems(ctx context.Context, w io.Writer, scripts ...ComponentScript) (err error)
• function invocation ComponentScript.Render(ctx context.Context, w io.Writer) error
  These two are rendered as "type=text/javascript", not "type=module".

I am unsure if this kind of support is achievable or worth supporting, however, it would cover my use-case.

[a-h]

One way might to be add a new keyword called "module", so the only change would be:

module ScriptForButtonWithTooltip(className string) {
   import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm';
 
   const button = document.querySelector(`${className} button`);
   const tooltip = document.querySelector(`.${className} .tooltip`);
 
    computePosition(button, tooltip).then(({x, y}) => {
      Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px` });
   });
}

This would be exactly the same behaviour as the script template, except that we add a new field to the ComponentScript struct for the "Type" and populate it with module for module script components, and text/javascript for script components.

[martinjirku]

It's not clear, how the module system would work. The difference between script and module is, that script has global scope. But the module has the scope of the module. Instead of creating the global function, we could base it on a module system. Compiled script in a templ, is more like the js function definition, which is invoked, later. With modules, it is not the same, since, the module could export different stuff and import it somewhere else in the html. It's a more powerful concept, compared to globally scoped javascript html tags.

E.g.:

module ScriptForButtonWithTooltip(className string) {
   import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm';
 
   const button = document.querySelector(`.${className} button`);
   const tooltip = document.querySelector(`.${className} .tooltip`);
 
    computePosition(button, tooltip).then(({x, y}) => {
      Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px` });
   });
}

templ Something() {
  <div class="testclass">
    <button class="test">testing</button>
    <span class="tooltip">Tooltip here</span>
  <div>
 @ScriptForButtonWithTooltip("testclass")
}

What would be outputted here? One of the options is here:

  <div class="testclass">
    <button class="test">testing</button>
    <span class="tooltip">Tooltip here</span>
  <div>
  <script type="module" id="some-generated-id">
     export  className = "testclass"
  </script>
 <script type="module">
    import { className } from "some-generated-id"
    import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm';
 
    const button = document.querySelector(`.${className} button`);
    const tooltip = document.querySelector(`.${className} .tooltip`);
 
    computePosition(button, tooltip).then(({x, y}) => {
      Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px` });
    });
</script>

I am not sure, this is the best way. What other improvement, could we make here?

[CoreyCole]

I'd like to import different js/wasm files based on the template parameters. Without templ, my html looks like this:

<body><script type="module">
    import init from '/bevy/game-97832db24b9e2bb6.js';
    init('/bevy/game-97832db24b9e2bb6_bg.wasm');
</script></body></html>

The use case I am trying to achieve is to pass these file names into the component so I can import any game based on the filename in the request route:

script BevyScript(js string, wasm string) {
  import init from '{js}';
  init('{wasm}');
}

templ BevyPage(js string, wasm string) {
  <!DOCTYPE html>
  <html><head>
  <link rel="preload" 
    href={ wasm } 
    as="fetch"
    type="application/wasm"
    crossorigin="" />
  <link rel="modulepreload"
    href={ js } />
  </head>
  <style type="text/css">
  html, body {
      margin: 0;
      height: 100%;
  }
  </style>
  @BevyScript(js, wasm)
  <body>
  </body>
  </html>
}

FWIW this is my workaround:

func BevyLoadScript(js string, wasm string) templ.Component {
	jsString := fmt.Sprintf(
		"<script type=\"module\">import init from '%s';init('%s');</script>",
		js,
		wasm,
	)
	return lib.HTMLToComponent(jsString)
}

func HTMLToComponent(htmlString string) templ.Component {
	return templ.ComponentFunc(func(_ context.Context, w io.Writer) error {
		// Convert the raw HTML string to template.HTML to prevent it from being escaped.
		safeHTML := template.HTML(htmlString)
		_, err := io.WriteString(w, string(safeHTML))
		return err
	})
}

templ BevyPage(js string, wasm string, loadscript templ.Component) {
  <!DOCTYPE html>
  <html><head>
  <link rel="preload" 
   href={ wasm } 
   as="fetch"
   type="application/wasm"
   crossorigin="" />
  <link rel="modulepreload"
   href={ js } />
  </head>
  <style type="text/css">
  html, body {
     margin: 0;
     height: 100%;
  }
  </style>
  <body>
  </body>
  @loadscript
  </html>
 }

[a-h]

@martinjirku - this is relevant - #500 (comment)

I'be tried out using a JS parser to inject Go variables into JS. I think it could make the script component basically redundant if it works out, and would allow the use of script tags with the module or JSON attributes.

It wasn't very difficult to get a POC together because of the recent work I'd done on using the go ast parser in templ. I have a few things to do on the LSP testing, then I'm going to do CSS first, then JS.