How to pass a component setting as a value to an attribute?

Development

AI-generated summary

Passing a component setting as a value to an attribute in Discourse

goramus is trying to add an external script library to the head_tag.html template using a theme setting value as an attribute. However, the syntax used results in a SyntaxError.

MarkDoerr suggests referring to the Theme Developer Quick Reference Guide and the Beginner’s Guide to Developing Discourse Themes for guidance on using theme settings and the plugin API. Additionally, MarkDoerr recommends reviewing the Content Security Policy (CSP) documentation to ensure the script is allowed to run.

1

Hi, I’m simply trying to add an external script library via a <script src="..."></script> tag in the head_tag.html template like this, clearly not the correct syntax.

<script type="text/discourse-plugin" version="1.6.0">

  <script src="https://example.com/library.js"
        charset="UTF-8"
        data-lib-xyz=`${ settings.data_lib_xyz }`
        />

</script>

And I get an error, as soon as I enable it:

SyntaxError: /discourse/theme-8/initializers/theme-field-54-common-html-script-1: Support for the experimental syntax ‘jsx’ isn’t currently enabled (14:3):

What would be the Discourse way of using a theme setting value for a SCRIPT tag’s attribute value?

2

Hi Osman,

This might be the best place to start: Theme Developer Quick Reference Guide.

There’s also a great deal of info on the pluginAPI here: Developing Discourse Themes & Theme Components, including code demos.

You’ll also want to look at our CSP documentation if you’re adding scripts, so that they’ll be allowed to run: Mitigate XSS Attacks with Content Security Policy.

I hope that helps, but as always, feel free to send through additional questions.

Mark