hypra

SEC-001: inline event handler

Warning: the page still builds, but this is most likely a mistake.

An onclick runs code written in an attribute. A strict Content Security Policy blocks it, and it mixes code into the markup where nothing checks it. Put scripts in a file, or use a library like Alpine.js.

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  button(type: "button", onclick: "openCart()") "Cart"
}
warning[SEC-001]: inline event handler `onclick`
 --> page.hypra:3:35
  |
3 |   button(type: "button", onclick: "openCart()") "Cart"
  |                                   ^^^^^^^^^^^^
  = help: put scripts in head { script("/app.js") }
  = docs: https://hypralang.dev/rules/sec-001/

0 errors, 1 warning

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  head { script("/app.js", defer: true) }
  button(type: "button", id: "cart-button") "Cart"
  button(type: "button", "@click": "open = true") "Sizes"
}