Daniel Roy Greenfeld: TIL: Using hx-swap-oob with FastHTML

The provided code demonstrates the use of HTMX, a JavaScript library, in conjunction with FastAPI and FastHTML. The code creates a simple contact list application with a form to add new contacts. The application uses HTMX to dynamically update the contact list without requiring a full page reload. The mk_row function generates a new table row with the provided name and email, and includes an HTMX attribute to inject the row at the end of the #contacts-tbody DOM element. The index function returns the main application page, which includes the contact list and the form to add new contacts. The contacts function handles the form submission, printing a message to the console and returning the new table row. The form submission is handled by HTMX, which sends a POST request to the /contacts endpoint and updates the contact list without reloading the page. The hx_swap_oob attribute is used to specify where the new row should be injected, and the hx_on__after_request attribute is used to reset the form and focus on the name field after submission. The application uses FastAPI to serve the application, and FastHTML to generate the HTML elements. The code is designed to be viewed in a browser to verify the behavior of the application.