Loading <script> once for use with custom component

Anvil Q&A
1

I created a custom component whose HTML relies upon a being loaded when used (see).

Having multiple instances of this component produces a stack overflow. I tried instead loading that script in Native Libraries but the custom component doesn’t seem to be working in the same way. What is the best way to load a script once for use with a custom component?

Thanks,
Jim

2

Does the script you are loading depend on anything?

I’ve found that a script that depends on jquery requires a little bit more thought since script tags in native libraries are loaded prior to jquery from anvil.

3

Good to know, Stu! I’ll check into that.

Thanks,

Jim

4

Stu,

I don’t find any dependencies. MathJax 3 loads as one file. Is Native Libraries the correct place to put <script> tags that are to be accessible by custom components that render HTML?

Thanks,
Jim

5

this is a MathsJax specific thing… when you load the mathsjax script it reads the page and renders any TeX it finds. Then it’s done.
That’s why it’s not working in Native Libraries. It’s done before the component had even loaded…

documentation: https://docs.mathjax.org/en/latest/advanced/typeset.html

But there is a function that can be called to re-render the page - MathJax.typeset()

Here’s some code that allows you to dynamically change the component without using the script tags inside the component…

class TeX(TeXTemplate):
  def __init__(self, **properties):
    self.init_components(**properties)

  @property
  def tex(self):
    print(f"Getting tex: {self._tex}")
    return self._tex

  @tex.setter
  def tex(self, value):
    print(f"Setting tex: {value}")
    self._tex = value
    self.html = '<p>' + value + '</p>'
    js.call_js("MathJax.typeset")

  def form_show(self, **event_args):
    """This method is called when the HTML panel is shown on the screen"""
    js.call_js("MathJax.typeset")

And actually since MathJax.typeset is a function that re renders the page you could change self.html to be self.label.text… and add a label component to the custom component instead of changing self.html

1 Like
6

Thanks so much, Stu!

Regards,

Jim