Variables

Inserting a variable into a template mimics what you would expect from a Python f-string.

Insert Value Into Template

In this case, the template is in a function, and name comes from that scope:

def main():
    """Main entry point."""
    name = "tdom"
    result = html(t"<div>Hello {name}</div>")
    return result

Value From Import

In this third case, name symbol is imported from another module:

def Hello():
    """A simple hello component."""
    return html(t"<div>Hello {name}</div>")


def main():
    """Main entry point."""
    result = Hello()
    return result

Passed-In Prop

Of course, the function could get the symbol as an argument. This style is known as “props”:

def Hello(name):
    """A simple hello component."""
    return html(t"<div>Hello {name}</div>")


def main():
    """Main entry point."""
    result = Hello(name="tdom")
    return result

Default Value

The function (i.e. the “component”) could make passing the argument optional by providing a default:

def Hello(name="World"):
    """A simple hello component."""
    return html(t"<div>Hello {name}</div>")


def main():
    """Main entry point."""
    result = Hello()
    return result

Unsafe Values

Sometimes you get content from an untrusted source, and you need to escape it. That’s usually a job for MarkupSafe. But tdom targets MicroPython and wants to minimize dependencies, so it provides a small unsafe utility. Just use it to wrap your values:

def main():
    """Main entry point."""
    span = "<span>Hello World</span>"
    result = html(t"<div>{unsafe(span)}</div>")
    return result