|
2 | 2 |
|
3 | 3 | A 🤘 rockin' t-string HTML templating system for Python 3.14. |
4 | 4 |
|
| 5 | +[](https://pypi.org/project/html-tstring/) |
| 6 | +[](https://github.com/t-strings/tdom/actions/workflows/pytest.yml) |
| 7 | +[](https://github.com/t-strings/html-tstring/releases) |
| 8 | +[](https://github.com/t-strings/html-tstring/blob/main/LICENSE) |
| 9 | + |
5 | 10 | ## Installation |
6 | 11 |
|
7 | 12 | Just run: |
@@ -251,31 +256,43 @@ The result is the same either way. |
251 | 256 |
|
252 | 257 | #### Component Functions |
253 | 258 |
|
254 | | -Create reusable template functions that work like custom HTML elements: |
| 259 | +You can create reusable component functions that generate templates with dynamic content and attributes. Use these like custom HTML elements in your templates. |
| 260 | + |
| 261 | +The basic form of all component functions is: |
255 | 262 |
|
256 | 263 | ```python |
257 | | -def Alert(message: str, type: str = "info", **props) -> Template: |
258 | | - alert_class = f"alert alert-{type}" |
259 | | - attrs = {"class": alert_class, **props} |
260 | | - return t'<div {attrs}>{message}</div>' |
| 264 | +from typing import Any |
261 | 265 |
|
262 | | -# Use your component |
263 | | -warning = html(t'<{Alert} message="Be careful!" type="warning" id="main-alert" />') |
| 266 | +def MyComponent(*children: Node, **attrs: Any) -> Template: |
| 267 | + # Build your template using the provided props |
| 268 | + return t"<div {attrs}>{children}</div>" |
264 | 269 | ``` |
265 | 270 |
|
266 | | -#### Fragment Rendering |
| 271 | +To _invoke_ your component within an HTML template, use the special `<{ComponentName} ... />` syntax: |
| 272 | + |
| 273 | +```python |
| 274 | +result = html(t"<{MyComponent} id='comp1'>Hello, Component!</{MyComponent}>") |
| 275 | +# <div id="comp1">Hello, Component!</div> |
| 276 | +``` |
267 | 277 |
|
268 | | -Templates can return multiple root elements: |
| 278 | +Because attributes are passed as keyword arguments, you can explicitly provide type hints for better editor support: |
269 | 279 |
|
270 | 280 | ```python |
271 | | -def TableColumns() -> Template: |
272 | | - return t"<td>Column 1</td><td>Column 2</td>" |
| 281 | +from typing import Any |
| 282 | + |
| 283 | +def Link(*, href: str, text: str, **props: Any) -> Template: |
| 284 | + return t'<a href="{href}" {props}>{text}</a>' |
273 | 285 |
|
274 | | -table = html(t"<table><tr><{TableColumns} /></tr></table>") |
| 286 | +result = html(t'<{Link} href="https://example.com" text="Example" target="_blank" />') |
| 287 | +# <a href="https://example.com" target="_blank">Example</a> |
275 | 288 | ``` |
276 | 289 |
|
277 | | -The `html()` function returns a tree of nodes that can be converted to strings, manipulated programmatically, or composed with other templates for maximum flexibility. |
| 290 | +In addition to returning a `Template` directly, component functions may also return any `Node` type found in [`html_tstring.nodes`](./html_tstring/nodes.py). This allows you to build more complex components that manipulate the HTML structure programmatically. |
278 | 291 |
|
279 | 292 | #### Context |
280 | 293 |
|
281 | 294 | TODO: implement context feature |
| 295 | + |
| 296 | +#### Working with `Node` Objects |
| 297 | + |
| 298 | +TODO: say more about working with them directly |
0 commit comments