GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — uhtml v4 - Release notes by WebReflection · Pull Request #86 · WebReflection/uhtml

Conversation

@WebReflection

@WebReflection WebReflection commented Nov 12, 2023 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Owner

This MR is a partial rewrite of v3 with a "back to origins" purpose and a lot of performance and RAM consumption improvements over the previous stable v3 version.

Please note that while most needed or demanding v3 features will be, eventually, ported over v4, this should be almost a drop-in replacement for v3, with the following most notable breaking changes.

Breaking Changes

  • this is now a 100% ECMAScript Module, with its own CJS counterpart but only for developers purpose. The builds to leak globally uhtml are gone for good, as it's been always awkward anyway to do so in the first place. Times are different now, and so is the default module nature: a module and nothing else
  • current exports are uhtml (~2.5K) for default, non-keyed yet blazing fast and most common use cases, uhtml/keyed (~2.6K) for both implicit (default) and explicit keyed operations and uhtml/node (~2.2K) for one-off only use cases
  • all attributes that are part of the element prototype are handled directly whenever their value changes:
    • any onclick or native on* handler is just directly set like any other special attribute such as value for inputs or textareas, and so on
    • both class and style are handled as special attributes (among aria, data and ref) so that class=${value} now directly set className of the element while style=${value} now directly set the element.style.cssText but only when the current value is different from the previous one
  • both html.for(...) and html.node utilities have been moved:
    • the uhtml/keyed export provides an htmlFor and an svgFor direct callback to create related tags. The full export there is {Hole, render, html, svg, htmlFor, svgFor, attr} and these are all typed
    • the uhtml/node export provides a one-off only implementation of the logic, without ever caching details around nodes and without logic around updates ... this export is literally for one-off operations and nothing else, but as escape hatch, creating one-off content can always be done with the uhtml/keyed export and either htmlFor({}) or svgFor({}) utility, still keeping performance high and memory consumption low
  • the default, non keyed, export, only accepts Hole instances either to render or as interpolation, among other usual values such as string, boolean, number, or arrays within interpolations
  • once an array is used as interpolation, it is always expected for that interpolation to be an array. This actually better reflects real-world scenarios and it makes it possible to actually improve both holed arrays and not-holed arrays performance
  • array can contain only nodes or holes ... hybrid array are not supported so use html or svg tags even to create just static text content
  • beside holed array cases, there are no comments pinned or visible on the produced layout anymore: the layout is as clear as possible and only when lists are meant to grow or shrink a comment might appear as "pin" to be able to perform DOM diffing operations
  • callbacks as holes have been removed for good as it's unclear what would be the intent there and it's always possible to invoke callbacks with the current node via ref feature

Memory Improvements

  • the amount of runtime closures (callbacks) creation has been drastically reduced to "almost 0". While templates are parsed, all operations are pre-inferred for attributes, where the static name part is very static, and both array operations and text cases (style, script, textarea and others where no nodes are allowed inside) don't need any closure creation per each copy or clone of the very same template. Only generic nodes or fragments operations use a bind for the very always same callback, helping engines further to optimize for its operations. All other updates use always the exact same callback reference just passing a bit more details than before and the resulting value would update the retained one when that's different from the previous one
  • comments as placeholders/pins on the template tree are swapped once only if the comment is not an Array operation, avoiding the need to even create text nodes over comment nodes so that nodes count is always ideal
  • the "wired" fake DocumentFragment to represent multiple nodes at the same reference is now a real PresistentFragment class so that there is actually zero duplication of virtual fragments. The PersistentFragment is technically portable and reusable in any project but right now it just satisfies this module's requirements
  • the non-keyed (default) stack dance has been simplified quite a lot so that retained references and values count has been lowered too

About TypeScript

This module now generates automatically all definitions in the most accurate way and it describes types also internally, hoping to welcome more TS contributors when it comes to bugs or improvements.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

yuretz, dbauszus-glx, dominictobias, guido4000, and rsmirnov90 reacted with hooray emoji aecea, acstll, bcomnes, pamubay, oskarrough, dbauszus-glx, doorgan, marlun, Miaourt, cluah, and rsmirnov90 reacted with heart emoji
All reactions
  • 🎉 5 reactions
  • ❤️ 11 reactions
@WebReflection
WebReflection force-pushed the v4 branch 5 times, most recently from 83f57fd to 2795879 Compare November 12, 2023 13:42
@WebReflection
uhtml v4
8c16efc
@WebReflection
WebReflection force-pushed the v4 branch from 2795879 to 8c16efc Compare November 12, 2023 13:43
@WebReflection
4.0.0
8d589bf
@WebReflection
WebReflection merged commit ae4c60e into main Nov 12, 2023
@WebReflection WebReflection mentioned this pull request Nov 12, 2023
Update uhtml to v4 krausest/js-framework-benchmark#1497
Merged
@WebReflection

WebReflection commented Nov 12, 2023

Copy link
Copy Markdown
Owner Author

Current results in a nutshell: https://twitter.com/WebReflection/status/1723793350002725247

uhtml-v4-keyed

uhtml-v4-non-keyed

aecea, siemato, and bcomnes reacted with rocket emoji
All reactions
  • 🚀 3 reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@greghuc greghuc mentioned this pull request Nov 13, 2023
v4 error: Cannot set property className of #<SVGElement> which has only a getter #87
Closed
@bcomnes

bcomnes commented Nov 13, 2023

Copy link
Copy Markdown

Awesome! Do you have plans to mirror these changes to uhtml-ssr as well as the uland part of the family?

joshgillies and guido4000 reacted with eyes emoji
All reactions
  • 👀 2 reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@WebReflection

WebReflection commented Nov 14, 2023

Copy link
Copy Markdown
Owner Author

I have plans it's just that time has no plans for me ... I will eventually update the uhtml world around latest.

bcomnes and guido4000 reacted with heart emoji
All reactions
  • ❤️ 2 reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@bcomnes

bcomnes commented Nov 14, 2023

Copy link
Copy Markdown

Cool. Let me know if you are interested in any areas of contributions to make it happen.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@nitipit

nitipit commented Nov 14, 2023 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown

That's great !! Thanks !! uhtml is a wonderful library.
I also use uhtml in my library gadjet , love it !!

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@nuxodin

nuxodin commented Jan 30, 2024

Copy link
Copy Markdown

Thank you!
What happened to "uhtml/async"?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@WebReflection

WebReflection commented Jan 30, 2024

Copy link
Copy Markdown
Owner Author

@nuxodin great question ... I feel like that's better off any stale-while-revalidate pattern but I won't forget about it in v4, not in the immediate pipe though, but needed to have uhtml/hydro fully usable.

nuxodin reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@nuxodin

nuxodin commented Jan 31, 2024

Copy link
Copy Markdown

thanks for clarifying 👍

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

4 participants

@WebReflection @bcomnes @nitipit @nuxodin
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.