Question about extending

[danielbeeke]

Hi Andrea,

I have a use case where I want to add css classes to the DOM and let them easily be replaced by the developer. I am creating a form renderer and I want the developer to be able to choose the css classes. So I am using uHtml as the template engine. Maybe code explains it a bit better:

What I have currently working:

class MyForm {
  constructor () {
    this.cssClasses = {
      wrapper: ['wrapper', 'container', 'greenish']
    }
  }

  template () {
    return html`<div class=${this.cssClasses.wrapper.join(' ')}>...</div>`
  }
}

I would like to create the following:

  template () {
    return html`<div classy="wrapper: wrapper container greenish">...</div>`
  }

Classy.addReplacement('wrapper', ['my-own-wrapper-class'])

It places the default classes in the same line of code where it is used. So I am wondering if you plan to build extensibility in the library. Or maybe I could wrap html, do some regex and hand it over to the real html.

What do you think? I would be more than happy to provide a proof of concept or merge request.

[WebReflection]

it's not clear what you are trying to do because there's no render(...) and Classy.addReplacement I have no idea what it is or what it does, however, lighterhtml is the one you can extend more or less as you like, the same way heresy does.

uhtml goal is to have no edge cases to cover and be as small as possible, and yet I am sure you don't need to extend anything in here, just better orchestrate render updates as I change classes every day with uce or uhtml and I have pretty much zero issues with it, so maybe understanding better what is it that you want to do might help you finding a solution.

Closing this as not a bug, but feel free to answer me in here

[danielbeeke]

thanks!

The render part is not the interesting part. I know it should be added. In my own project I have a render function that is in a CustomElement and the templates are in seperate classes. That is probably why I forgot to add it to the examples.

I would like to add a tag 'classy' to the tags that uHtml understands, and process that value before it is rendered.

So the following somewhere in a template`:

<div classy:form-item="form-item greenish">

Would trigger a hook / function. Within that function I would check if the developer has supplied alternative classes for classy:form-item. If so I would return those classes else I would just use the given default classes.

So the changing of classes is more a framework (my system) thing, it is for the developer using my system. If the program runs it would change them always.= or never depending on if the developer supplied alternatives for a certain key.

[WebReflection]

why wouldn't this work?

class MyForm {
  constructor () {
    this.cssClasses = {
      wrapper: ['wrapper', 'container', 'greenish']
    }
  }

  template () {
    return html`<div classy=${'wrapper: ' + this.cssClasses.wrapper.join(' ')}>...</div>`
  }
}

[WebReflection]

I mean, attributes in uhtml are just attributes, you can compose these as you like, and render again once there are changes ... you can render whole sites without issues too, as render is there to be blazing fast so you add classes, you render, and those classes will be reflected, that's it?

[danielbeeke]

It would work. But the system I am building has a lot of small micro templates. So I would like to have the default classes at the place in the code were it will be used.

With that example I will have a huge object with default classes.

https://github.com/danielbeeke/rdf-form/blob/jsonld-form-definition-only/src/FormElements/FormElementBase.ts#L20

[WebReflection]

I am still not sure I understand what you are doing ... a basic working example would surely help ... in any case, you can always query the DOM and add/remove classes as you like, and uhtml wouldn't care much, but I am not sure this solves your case, although "many templates" is what uhtml exists for, performance will be good regardless, if that's your concern.

[danielbeeke]

If you use the following Classy function instead of html you can use:

import {html, render} from 'uhtml'

Classy.add('myidentifier', ['my', 'own'])

const theDiv = document.createElement('div')
document.body.appendChild(theDiv)

render(theDiv, Classy`<div classy:myidentifier="default classes">`)
// Result: <div class="my own">

Classy function:

import { html } from 'uhtml'

const classReplacements = new Map()

export const Classy = function (templates, ...values) {
  const newTemplates = []
  for (let [index, template] of templates.entries()) {
    const regex = new RegExp(/classy:([a-zA-Z-]*)="([a-zA-Z- ]*)"/g)
    newTemplates[index] = template.replace(regex, function (fullString, identifier, defaultClasses) {
      return 'class="' + (classReplacements.get(identifier) ? classReplacements.get(identifier).join(' ') : defaultClasses) + '"'
    })
  }

  /** @ts-ignore */
  return html(newTemplates, ...values)
}

Classy.add = function (identifier: string, classes: Array<string>) {
  classReplacements.set(identifier, classes)
}

The thing that I want is my default classes for a piece of template in the same line of code as the rest of the template.

[WebReflection]

there is one fundamental thing you are doing wrong in there ... templates is unique, always the same, but you are passing a new array each time, resulting in a new element every single time ... and that's a no-go.

const known = new WeakMap;

export const Classy = function (templates, ...values) {
  if (known.has(templates))
    /** @ts-ignore */
    return html(known.get(templates), ...values)

  const newTemplates = []
  known.set(templates, newTemplates)
  for (let [index, template] of templates.entries()) {
    const regex = new RegExp(/classy:([a-zA-Z-]*)="([a-zA-Z- ]*)"/g)
    newTemplates[index] = template.replace(regex, function (fullString, identifier, defaultClasses) {
      return 'class="' + (classReplacements.get(identifier) ? classReplacements.get(identifier).join(' ') : defaultClasses) + '"'
    })
  }

  /** @ts-ignore */
  return html(newTemplates, ...values)
}

so, let's start from this bit ... and then again, after my changes you'd be hooked into uhtml exactly the same way you'd expect from extending it ... so ... what is missing now?

[danielbeeke]

Thank you! Yes this looks great.