Did we remove/ panning to remove "script" type from templ? I do not see any docs in the latest page

[adpande]

Hi,

Do we plan to remove the ability to write script components in templ? I do not see the docs anymore at: https://templ.guide/syntax-and-usage/script-templates

script Redirect(Location string) {
	window.location.href = Location
}

[joerdav]

The docs are still there: https://templ.guide/syntax-and-usage/script-templates/#script-templates

We are working on a better alternative, but currently we are not planning to remove it until we have a better alternative with a smooth migration path.

[adpande]

Great! Thanks for the quick response @joerdav . Did we decide on the approach yet? Just want to be aware as we heavily use this feature.

[joerdav]

We are yet to create all the documentation required, however we are leaning towards the use of regular js files, the developer experience will be much better in a js file than js-in-templ.

The first parts of the docs https://templ.guide/syntax-and-usage/script-templates outline ways this can be done using script tags, but equally you can use a separate js file.

[s00500]

Hey everyone... I am a bit lost trying to understand how this should work in the future.

I really like the simplicity of script templates. but I also need a type=module template to include several instances of wavesurfer.js

Now my issue is that I am not sure how to pass data to script tags in a generic way. I can use the two reccomended methods in the docs, but I STILL need to somehow inject the actual id that is used, as it will be dependend on the data loaded and there might be multiple instances on one page...

Can anyone explain me how this should work ?

[joerdav]

I'm struggling to visualize your situation, "but I STILL need to somehow inject the actual id that is used". Do you have a working example of what you are doing with script templates now that you would like to achieve without? Maybe then I can understand and help.

[s00500]

sure, simple, lets imagine this:

templ MyReusableComponentThatNeedsAScript(reusableComponentsID string, data any) {
  @templ.JSONScript("scriptdata-"+reusableComponentsID, data)
  <script>
  const comp = document.getElementById('') // ?!?!?!?! I can not use the { reusableComponentsID } here since no templating is supported in the script tag, correct ?
  
  const compData = // Same problem again
  </script>
  <div id={reusableComponentsID}>My Component</div>
}

Finally I love the convenience that this is managed automatically for you on script templates. Provides a nicer DX. They are also used by default on all onclick and similar handlers (even on hx-on from htmx).

The reason I cant use script templates here is that I need them to generate type="module"...

The only serious solution to this issue I have seen here is @a-h s proposal of allowing templating there.
#500 (comment)

Meanwhile I am forced to use a go template for the specific script tag...

I might also have missed something obvious, so happy to hear your answer...

[joerdav]

I do have a couple of solutions for you which may help. If you are happy to take on a new dep you could use https://github.com/gnat/surreal

This would allow you to remove the need of the ID completely.

templ MyReusableComponentThatNeedsAScript(data any) {
  <div data-comp={ templ.JSONString(data) }>My Component</div>
  <script>
  const comp = me("-")
  
  const compData = comp.attribute('data-comp')
  </script>
}

This can also be done with no deps

templ MyReusableComponentThatNeedsAScript(data any) {
  <div data-comp={ templ.JSONString(data) }>
      My Component
      <script>
            const comp = document.currentScript.closest('div')
  
            const compData = comp.dataset.comp
      </script>
  </div>
}

The reason I like this is because it looks much more like the resulting HTML, rather than there being any templ magic. I hope this is useful.

[s00500]

Hey @joerdav , Yes that is indeed helpful, definitely prettier than my current solution... So thanks!

But from a DX perspective I still feel like it would be more awesome to have some kind of templating inside of scripts...
When working with templ, often I love being able to interface with native go struct types of different libraries as much as possible. I can do that cause I know only the elements I use get included into the template. This feels safer to work with than most places in JSON APIs... almost no chance of unintentionally leaking parts of structs in responses.

With the templ.JSONString(data) I will now have to prepare my data any time manually to ensure I do not leak stuff....

Usually I would pass a map[string]any or such to select which things to use... but that still feels less ergonomic that what I would usually be doing in the templ html part...

Let me know what you think

[s00500]

Meanwhile: this also does not work nicely in a module :-/

https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript