Abstract:

This document describes Triptych, a JavaScript polyfill designed to demonstrate and advocate for three proposed new attributes for the HTML standard. The project aims to natively integrate features popularized by libraries like htmx, Hotwired, and Unpoly, enhancing HTML's declarative capabilities for modern web interactions.

The three core proposals are:

1. Extending the <form> element to support PUT, PATCH, and DELETE HTTP methods.
2. Adding an action attribute to the <button> element, allowing it to make standalone HTTP requests without being wrapped in a form.
3. Enhancing the target attribute on links, forms, and buttons to specify a DOM element (via a CSS selector) that should be replaced with the HTTP response, enabling partial page updates.

The Triptych script is a single, dependency-free JavaScript file that operates in a standards-compatible manner, using existing or plausible attributes to avoid custom prefixes. It simulates the desired browser behavior, including full-page navigation fallbacks using the History API, but notes limitations such as the inability to replicate the browser's native refresh behavior for non-GET requests or display a loading indicator. The project includes specifications, source code, tests, and proposal documents to support its inclusion in the HTML standard.

Triptych: Enhancing HTML with Declarative HTTP Requests and Partial Page Replacement

• README.md: Project Overview: Triptych is a polyfill for three proposals to enhance HTML. The goal is to standardize declarative HTTP requests and partial page replacement, features common in libraries like htmx, Turbo, and Unpoly. The project aims for eventual inclusion in the HTML standard.
• README.md: Core Features & Examples:
  • Extended Form Methods: Allows forms to use method="PUT", "PATCH", or "DELETE".
  • Button Actions: Enables buttons to make HTTP requests directly (e.g., <button action="/users/354" method="DELETE">).
  • DOM Targeting: Allows links, forms, and buttons to replace a specific part of the page using a target attribute with a CSS selector (e.g., <a href="/home" target="main">).
• SPECIFICATIONS.md: Technical Details:
  • The target attribute will support a new _this keyword, which targets the element that initiated the request for self-replacement.
  • Existing target keywords (_blank, _self, etc.) and targeting <iframe> elements by name will retain their original behavior to ensure backward compatibility.
  • For full-page replacements (when no target is specified), the polyfill uses the History API to update the URL and browser history, allowing the back button to function as expected.
• triptych.js: Implementation:
  • The entire functionality is contained within a single, lightweight JavaScript file.
  • It uses the fetch API to perform asynchronous requests.
  • DOM element targeting is handled via document.querySelector.
  • When new HTML content is inserted, the script manually processes and re-executes any <script> tags within the new content to ensure functionality.
• README.md: Design Philosophy & Limitations:
  • The polyfill intentionally avoids custom-namespaced attributes (like hx-*) to demonstrate how these features could fit naturally into the HTML standard.
  • A key limitation is that it cannot perfectly simulate all native browser behaviors, such as making the refresh button resubmit a PUT request or showing the browser's native loading bar during a request.
• www/button-actions.html: Rationale and Use Cases:
  • The proposals simplify common UI patterns, such as a "Logout" button that sends a DELETE request or a "Cancel" button that navigates away without submitting form data.
  • This allows developers to create complex forms with multiple, distinct actions (Submit, Save Draft, Delete Draft) using semantic HTML buttons instead of workarounds like multiple forms or styled links.
• README.md: Installation & Usage:
  • Installation involves simply copying the triptych.js file into a project and including it with a <script> tag. The creator recommends versioning the filename to manage browser caching effectively.