Question about extending about uhtml HOT 9 CLOSED

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

from uhtml.

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.

from uhtml.

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

from uhtml.

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?

from uhtml.

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

from uhtml.

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.

from uhtml.

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.

from uhtml.

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?

from uhtml.

Thank you!
Yes this looks great.

from uhtml.