Post

github.comGitHub - HugoDF/render-tmpl: Use `<template>` as a rendering engine, < 100 lines of code.Use `<template>` as a rendering engine, < 100 lines of code. - HugoDF/render-tmpl

`html-esc`: A template literal tag which escapes interpolated values github.com/HugoDF/html-... `render-tmpl`: A `<template>` based HTML templating library ("directives" to make it easy to inject values and attributes into your template) github.com/HugoDF/rende...

Both are ESM native, "no build" and "copy-paste into my project" friendly Examples with actual web components coming at some point. Note: I haven't tackled interactive forms, they don't have reactivity, they don't deal with event handlers

Small feedback: As a user of HTML, I want to write attributes as attributes, instead of putting them all inside a data-s-attr attribute in a new syntax.

For example instead of <img data-s-attr="src=url,alt=greeting" /> I'd want to write something like <img src=$url alt=$greeting /> or something.

Or for example <img :src=url :alt=greeting />

Yeah so I didn't want to borrow the v-bind/x-bind shorthand because I explicitly am not doing a reactive binding Re why it's `data-s-attr="attrName=contextValue"` 1. The querySelectorAll is simpler (select for data-s-attr), I'm not even sure how I would use querySelect for "attrs starting with :"

1/12/24, 8:24 pm0 reposts1 like

2. I don't use eval so comma + equals sign was/felt easier to implement than say s-attr="{ key: value }"

But those are basically excuses 🤣

Hmm, good point about a selector. I didn't see exactly how it works inside, but was just noticing the dev experience on the outside. What if it walks the tree to find the attributes to handle, instead of query selecting?