DEV Community

Tosiiko
Tosiiko

Posted on

MDL 0.1.8: htmx examples, safer npm binaries, and portable static builds

#html #htmx #security #webdev

MDL 0.1.8 is a release focused on two things:

  1. Making hypermedia workflows easier to see and copy.
  2. Making the npm CLI package easier to inspect and trust.

MDL is a small authoring language for building clean HTML without writing raw
HTML by hand. You write .mdl files, regular CSS, and optional JavaScript; the
CLI checks, builds, and serves the project.

.mdl  -> structure and content
.css  -> layout and design
HTML  -> compiler output
Enter fullscreen mode Exit fullscreen mode

New: Complete htmx Example App

This release adds a complete htmx example under:

examples/htmx
Enter fullscreen mode Exit fullscreen mode

The app demonstrates MDL behavior attributes compiled through the htmx
adapter. Instead of writing raw hx-* attributes in MDL source, you describe
the intent:

form@api(get /api/search)@result(searchResults)@swap(inner)@trigger(input)@loading(searchBusy):
  field:
    label@for(searchQuery):
      Search cookbook entries
    .input@id(searchQuery)@name(q)@type(search)@placeholder(Type card, form, swap, or history)
  status@id(searchBusy)@class(indicator):
    Searching.
Enter fullscreen mode Exit fullscreen mode

With the htmx adapter enabled, MDL emits the corresponding hx-* output:

<form
  class="mdl-form"
  hx-get="/api/search"
  hx-target="#searchResults"
  hx-swap="innerHTML"
  hx-trigger="input"
  hx-indicator="#searchBusy">
</form>
Enter fullscreen mode Exit fullscreen mode

The example app includes:

  • live search
  • todo list swaps
  • cart updates
  • profile form validation
  • out-of-band toast updates
  • request indicators
  • disabled submit buttons
  • parameter filtering
  • request timeouts
  • sync behavior
  • prompted requests
  • preserved islands
  • boosted safe forms

Run the API server:

node examples/htmx/server.mjs
Enter fullscreen mode Exit fullscreen mode

In another terminal:

target/debug/mdl serve examples/htmx
Enter fullscreen mode Exit fullscreen mode

Then open:

http://127.0.0.1:4010
Enter fullscreen mode Exit fullscreen mode

The example uses htmx 2.0.10 from a pinned CDN URL in mdl.json, and you can
vendor that script locally if you want an offline demo.

Behavior Adapters

MDL now has a clearer adapter story:

{
  "behavior": {
    "adapter": "htmx",
    "version": "2"
  }
}
Enter fullscreen mode Exit fullscreen mode

Supported behavior adapters are:

  • static: normal HTML behavior where possible.
  • mdl: data-mdl-api-* attributes for future MDL runtimes.
  • htmx: validated hx-* output for htmx v2.

The important bit is that MDL source stays framework-neutral. You write
attributes such as:

@api(post /api/profile)
@result(profileResult)
@swap(replace)
@trigger(submit)
@loading(profileBusy)
@select-oob(toast)
@request(timeout=5000)
@sync(profileForm:queue-last)
@validate(true)
Enter fullscreen mode Exit fullscreen mode

The adapter decides how that intent becomes HTML.

Safer npm Package

The npm package is also hardened in this release.

@tosiiko/mdl ships a small Node launcher and prebuilt Rust binaries for
supported platforms. That is convenient, but native binaries deserve a clear
audit trail.

0.1.8 adds:

  • SECURITY.md in the npm package
  • BINARY-PROVENANCE.md in the npm package
  • SHASUMS256.txt in the staged public package
  • runtime checksum verification before executing the selected binary
  • explicit shell: false process spawning in the launcher
  • provenance-enabled GitHub publishing with npm publish --provenance

The package still has:

  • no runtime npm dependencies
  • no npm lifecycle or install scripts
  • no install-time binary downloads
  • no runtime binary downloads

The launcher selects a binary from vendor/<platform>/, verifies its SHA-256
checksum when SHASUMS256.txt is present, and only then starts the CLI.

Portable Static Builds

This release also includes routing.links in mdl.json.

Use root links when deploying from a site root:

{
  "routing": {
    "links": "root"
  }
}
Enter fullscreen mode Exit fullscreen mode

Use relative links when publishing dist/ under a subfolder or opening the
generated files directly:

{
  "routing": {
    "links": "relative"
  }
}
Enter fullscreen mode Exit fullscreen mode

Relative mode rewrites local page and asset links so the output is easier to
move between static hosts.

Try MDL

Install locally in a project:

mkdir my-mdl-site
cd my-mdl-site
npm install @tosiiko/mdl
npm exec -- mdl init
source bin/activate
mdl serve
Enter fullscreen mode Exit fullscreen mode

Or install globally:

npm install -g @tosiiko/mdl
mdl new my-mdl-site
cd my-mdl-site
mdl serve
Enter fullscreen mode Exit fullscreen mode

Useful commands:

mdl check
mdl format --check
mdl build
mdl serve
Enter fullscreen mode Exit fullscreen mode

Links

MDL is still early, but 0.1.8 makes the project much easier to evaluate: you
can inspect the generated HTML, run a real htmx example, check the package
contents, and build static output that fits more hosting setups.

Top comments (0)