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() -> str:
    """Main entry point."""
    name = "viewdom"
    result = render(html("<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 render(html("<div>Hello {name}</div>"))


def main() -> str:
    """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 render(html("<div>Hello {name}</div>"))


def main() -> str:
    """Main entry point."""
    result = Hello(name="viewdom")
    return result

Default Value#

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

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


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