Hacker News Reader

Comment by calebh | Hacker News Reader

Does anyone have a good way of representing HTML in the form of types? I'm primarily thinking about how it's tricky to pair valid attributes with the correct elements. For example, it should be okay to use the "alt" attribute with the img tag, but not with the p tag. It seems like there should be a type-safe way to do this.

View on HN

This library represents HTML in types. The <p> tag turns into a typed_html::elements::p [1], inside of which the attributes are held by a typed_html::elements::Attrs_p [2].

[1] https://docs.rs/typed-html/0.1.0/typed_html/elements/struct.... [2] https://docs.rs/typed-html/0.1.0/typed_html/elements/struct....

    let doc: DOMTree<String> = html!{
        <body>
          <img alt="xxx" />
          <p alt="xxx"></p>
        </body>
    };

If you try to give <p> an alt attribute, the program fails to compile.

    error[E0609]: no field `alt` on type `typed_html::elements::Attrs_p`
      --> src/main.rs:12:16
       |
    12 |             <p alt="xxx"></p>
       |                ^^^ unknown field
       |
       = note: available fields are: `accesskey`, `autocapitalize`, `class`, `contenteditable`, `contextmenu` ... and 9 others

This solution bundles all of the attributes into the same type, which comes with the downside that it's impossible to represent a single attribute without also receiving all the other attributes.

I think that the best solution in Haskell would be to group the types in a typeclass. However then the typeclass is not directly associated with the p or img value constructors. I wonder if there is some way to use dependent types to improve this situation.

This is something that's very easy to check in a web browser with DOM - Suppose you have this HTML:

    <p>hello</p><img src=#>

If you try to access the `.alt` property of the <p> tag you get `undefined`, and if you try to access the `.alt` property of the <img> tag it returns the empty string in this case because the property exists on that tag, but hasn't been set to anything.

TypeScript's type system can do it:

http://www.typescriptlang.org/play/#src=%0D%0A%0D%0Atype%20A...

If you're referring to Rust's ability to infer types from macro tokens, not sure how far you'll get. But Typescript itself can absolutely track permitted attributes for different HTML tags, and it compiles JSX using these types: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/mast...

I don’t see any reason this wouldnt be possible, you’d just have an attribute whitelist for each tag; the biggest headache would be that you can’t really implement it incrementally since it’d be a whitelist: at best some tags turned on, others off, for attr validation

And I imagine its quite a bit more work than just the tags

If you use JSX with typescript you effectively get type-checked html attributes.

Reply on news.ycombinator.com