Post

Been playing with simple web components recently for some codewithhugo.com pages Found it a bit painful to do templating (`.innerHTML` or `.appendChild` friendly options) Open sourced 2 utils that I couldn't find a lightweight existing package for (`lit-html` seems heavy handed in this case)

codewithhugo.comCode with HugoNode.js and JavaScript Guides - Build your web platform with modern best-practices & tools

Hugo

@codewithhugo.com

1 Dec 2024

`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...

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

Hugo

@codewithhugo.com

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

1/12/24, 3:14 pm0 reposts0 likes

Joe Pea

@joe.trusktr.io

1 Dec 2024

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.

Joe Pea

@joe.trusktr.io

1 Dec 2024

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.

Joe Pea

@joe.trusktr.io

1 Dec 2024

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

Hugo

@codewithhugo.com

1 Dec 2024

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 :"