This release like the last is focusing on small quality of life improvements and adjustments that will help us move towards 2.0. So while not the most exciting release to everyone it provides some really important features and fixes to some developers.
And unlike many previous releases the vast majority of the work and features came from PRs from the community. So really all I can say is Looks Good to Me!
Better JSX Validation
While still incomplete across templates we've added JSDOM to the compiler to better detect invalid HTML at build time by comparing what we expect the template to be with what a browser would output. This now includes things that are nested we didn't detect before like putting <a> inside other <a> tags which will lead to the browser "correcting" it in less than intuitive ways.
Improved Exports
While each environment in solid-js/web has its own methods to be used in the compiler. We are now exporting the client methods from the server to prevent weird import errors. Now these methods will throw if used in this environment but shouldn't break your build.
Additionally we have seen some issues in bundlers that incorrectly feed our ESM exports back through the browser field. While this is a known issue they all pointed issues at each other and with no intention of fixing it. We have removed the browser field in this release, meaning some legacy packages may have issues resolving browser if they don't support export conditions.
This is regretful but this blocked deployments on several platforms and since this was the only fix at our disposal after two years of attempting to push this issue to the bundlers to no avail, we've moved forward with it.
Custom Element improvements
We have a few improvements to our custom element support in this release. First off we now detect elements with the is attribute as custom elements which means all the special behavior is afforded to them.
We've also improved our event handler delegating retargetting to better handle shadow DOM events. There were cases where we skipped over part of the tree.
Finally we've added the bool: attribute namespace to handle explicitly setting certain attributes according to boolean attribute rules. While this isn't necessary for built-in booleans currently we handle most attributes as properties and we lacked a specific override. But now we have it:
<my-element bool:enable={isEnabled()}></my-element>Support for handleEvent Syntax in Non-Delegated Events
A little known thing is that events actually also support objects instead of functions (See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
We(thanks @titoBouzout) realized we can use this mechanism as a way to set advanced rules like passive or capture on this object as way to handle all current and future event attributes that browsers might add. This way we don't need specific mechanisms like oncapture: (which is now deprecated).
Instead using on: you can set the event properties you wish.
<>
<div on:click={{
handleEvent(e) {
console.log("clicked", e)
},
once:true
}/>
<div on:wheel={{
handleEvent(e) {
e.preventDefault() // only works on not passive events
e.stopPropagation()
console.log("wheel stopped?")
},
passive: false
}} />
</>Other Updates
We've fixed an issue with lazy images. Apparently, cloneNode doesn't handle them properly so we've updated our heuristic to treat templates with lazy images to be handled with importNode.
We've improved our Hydration Mismatch Error to output the template of that it can't find the matching ID for. This should make it easier to track down where the hydration errors are occurring. There have been several hydration improvements over the later 1.8 releases so upgrading will likely improve the situation for those who have been facing issues.
Finally, we've improved some of the types in the JSX and Signal Setter in this release.
Big thanks to those who contributed to this release: @wkelly17, @olivercoad, @titoBouzout, @trusktr, @Huliiiiii. And thanks to all of you who gave feedback on the Metadata/Head Tag RFC. While it didn't make it in this time around you've definitely given us stuff to consider for its future design.
Best,
@ryansolid
