Loading <script> once for use with custom component

Anvil Q&A
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