webcomponents / custom-elements-everywhere

Custom Element + Framework Interoperability Tests.
https://custom-elements-everywhere.com
Other
1.16k stars 102 forks source link

Update dependency babel-preset-solid to v1.8.18 #2279

Open renovate[bot] opened 8 months ago

renovate[bot] commented 8 months ago

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
babel-preset-solid (source) 1.6.7 -> 1.8.18 age adoption passing confidence

Release Notes

solidjs/solid (babel-preset-solid) ### [`v1.8.16`](https://togithub.com/solidjs/solid/compare/v1.8.15...v1.8.16) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.15...v1.8.16) ### [`v1.8.15`](https://togithub.com/solidjs/solid/compare/v1.8.12...v1.8.15) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.12...v1.8.15) ### [`v1.8.12`](https://togithub.com/solidjs/solid/compare/v1.8.11...v1.8.12) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.9...v1.8.12) ### [`v1.8.9`](https://togithub.com/solidjs/solid/compare/v1.8.8...v1.8.9) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.8...v1.8.9) ### [`v1.8.8`](https://togithub.com/solidjs/solid/compare/v1.8.7...v1.8.8) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.6...v1.8.8) ### [`v1.8.6`](https://togithub.com/solidjs/solid/compare/v1.8.5...v1.8.6) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.4...v1.8.6) ### [`v1.8.4`](https://togithub.com/solidjs/solid/compare/v1.8.2...v1.8.4) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.2...v1.8.4) ### [`v1.8.2`](https://togithub.com/solidjs/solid/compare/v1.8.1...v1.8.2) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.8.0...v1.8.2) ### [`v1.8.0`](https://togithub.com/solidjs/solid/blob/HEAD/CHANGELOG.md#180---2023-10-09) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.7.12...v1.8.0) I admit this is not the most exciting release from a feature standpoint. We are in that holding pattern between the end of 1.x and the start of 2.0. We recently made our new reactive experiments public and continue to build those out in public with [@​solidjs/signals](https://togithub.com/solidjs/signals). This version is more about addressing some of the fundamentals that will help us in other projects like SolidStart while we do the transition. A big part of this is applying what we have learned when doing performance benchmarks for the work that has been funded by [Google Chrome Aurora](https://www.solidjs.com/blog/chrome-supports-solidjs). Async and Resources need work and are too all in. It is great to have a solution but now that we have a better understanding we need to start breaking things apart into their fundamental pieces. ##### De-duping Streaming Serialization This is the marquee feature of this release and is largely the work of [@​lxsmnsyc](https://togithub.com/lxsmnsyc). Solid has been able to serialize promises and do streaming for a couple of years now, but it was very special-cased. Now it is a generic mechanism. This matters because it means that we have decoupled the promise serialization from Resources, and in so decoupled the whole when the stream is done from them. This opens up things like nested promises. More so we have a mechanism now that deeply de-dupes data serialized across flushes. This is important for features like Islands where you might pass the same props to multiple Islands across different Suspense boundaries and don't want to send the data more than once. And even examples where that data can be accessed at varying depths (recursive comments in say a Hackernews site). ##### Hydration Improvements Fragments for Hydration have been a bit of a pain and we keep seeming to have different issues reported around element duplication. Most commonly this has been around where there are `lazy` component siblings or where the fragment is top-level. After looking into and fixing an [issue for Astro](https://togithub.com/withastro/astro/pull/8365) I decided to look at some of the oldest bugs in Solid and found it was a similar bug. In many cases, the DOM can change throughout Hydration while doing things like streaming but we need to pause and resume hydration because code isn't available yet. While we don't create elements during hydration, getting an accurate snapshot of the DOM for the current state for future list reconciliation is a process we've had a few tries at but in 1.8 we update this in a way that makes sure it doesn't get out of date. Also in 1.8, we have added some performance improvements to hydration in the form of not redundantly setting attributes or props as the page hydrates similar to how we don't update text. This is all migration towards a future where we don't need to do as much hydration, but it is important to note that values will be kept as they were on the server rather than how they may compute at runtime during hydration. ##### Smaller Templates In 1.7 we removed unnecessary closing tags from template strings. It was a bit painful because we were a bit overzealous at first. While I believe in the end we got to a good place, ultimately all but the simplest reductions have been hidden behind a compiler flag(`omitNestedClosingTags`). Thanks to work from [@​intrnl](https://togithub.com/intrnl) we are implementing another template size reduction technique of removing unnecessary quotes. Quotes are actually not required by HTML in some cases and it can add up. ##### Other ##### Fix NGINX Server Side Includes Comments led with `#` are treated as special directives for a few different servers so we've needed to change our open hydration markers to `$`. As usual, your version of Solid and the Babel Plugin should be the same to ensure this matches up. ##### Better Guards on Global Scripts Solid uses an inline HydrationScript as a way to do processing before the framework and code have loaded. To handle things like event capture and streaming. However, we didn't do a good job of guarding the right thing when multiple were added to the same page, a situation that can happen in Micro-frontends or 3rd party Islands solutions. Now the script guards against duplicate inclusion. ### [`v1.7.12`](https://togithub.com/solidjs/solid/compare/v1.7.11...v1.7.12) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.7.7...v1.7.12) ### [`v1.7.7`](https://togithub.com/solidjs/solid/compare/v1.7.6...v1.7.7) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.7.4...v1.7.7) ### [`v1.7.4`](https://togithub.com/solidjs/solid/compare/v1.7.3...v1.7.4) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.7.3...v1.7.4) ### [`v1.7.3`](https://togithub.com/solidjs/solid/compare/v1.7.2...v1.7.3) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.7.2...v1.7.3) ### [`v1.7.2`](https://togithub.com/solidjs/solid/compare/v1.7.1...v1.7.2) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.7.1...v1.7.2) ### [`v1.7.1`](https://togithub.com/solidjs/solid/compare/v1.7.0...v1.7.1) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.7.0...v1.7.1) ### [`v1.7.0`](https://togithub.com/solidjs/solid/blob/HEAD/CHANGELOG.md#170---2023-03-30) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.6.16...v1.7.0) Solid has experienced incredible growth in usage the last 6 months. Companies are using it to power production applications and SolidStart Beta has been a big part of that. As a natural part of this growth and increased use at scale we are continuing to learn what works well and what the rough edges in Solid are today. This v1.7 release marks the beginning of the migration roadmap to v2.0. We are beginning to re-evaluate core APIs and will begin introducing new ones while reasonably deprecating older ones in a manner that eases breaking changes. Our intention is to ease the broader ecosystem into preparing for improvements that a major 2.0 will unlock for the whole community. ##### Improved TypeScript ##### Null-Asserted Control Flow One of the pains of using Solid with TypeScript has been that JSX control flows can't really type narrow. This is true, but starting with the migration to explicit `keyed` in v1.5 we now complete this story by introducing callback forms for `` and `` that work when non-keyed. The main difference is the callback form instead of passing in the value as it does when `keyed`, passes in a function that is type narrowed. ```js // keyed w/ callback - reruns full callback on change {nonNullUser =>
{nonNullUser.name}
}
// non-keyed w/o callback... - only updates the one expression, needs ! assertion
{user()!.name}
// NEW! // non-keyed w/ callback - only updates the one expression {nonNullUser =>
{nonNullUser().name}
}
``` Keep in mind because we are non-null asserting the input signal so it won't expect null in closures that execute when the condition is no longer satisfied. For this reason the accessor from the callback is special and will throw when attempted to be accessed when the condition is no longer true. This may be unexpected but it is our best attempt to keep TypeScript strict and not present inconsistency in reactivity. Luckily this only applies to things like timers which you should be cleaning up anyway and not things like event handlers. We recommend using the original conditions source in those closures if you must. ##### Better Event Types for Input Elements This has irked people for a while but we come by it honestly, `target` is gives you a type of `Element` rather than the specific element that is the target. That means no access to `.value` or `.checked`. The reason is there is no way to know at compile time what the target of an event will be. The `currentTarget` will be the element you attach the event to but the target can be anything. There is a way to work around this though, in that if we know the `currentTarget` is of type that generates the event and that the `currentTarget` is the the type of this element we can assume it is the `target` as well. Not perfect logic but it is what React does and we do too. Now `onInput`, `onChange`, `onBlur`, `onFocus`, `onFocusIn`, and `onFocusOut` all support more detailed `target` when applied to `HTMLInputElement`, `HTMLTextAreaElement`, and `HTMLSelectElement`. ##### Stricter JSX Elements Strict JSX elements have been tricky because we have to acknowledge at a certain point that TypeScript is to serve our purposes rather than to represent all possible values that could work. For us the ambiguity lies in functions. Solid's JSX needs to accept functions to handle dynamic insertion. However, in authoring it leads to awkward situations. The first you hit the first time use Solid. You create that counter and don't call `count` as a function and it works. ```js function Counter() { const [count, setCount] = createSignal(1); return ; } ``` This example works in some places and not others which might lead to the wrong conclusions. The second place you might hit this is when you get a little further on your journey and decide you need a component to re-render and decide that you can just wrap the whole thing in a function: ```js function MyComp(props) { return () => { // look working early returns if (props.count > 5) { return
Maximum Tries
; } return
Attempt {props.count}
; }; } ``` Again this seems fine, except the fact that every time `count` changes you are recreating all the DOM Elements even when it resolves to the same conditional. Eventually you might even not think twice about passing functions into children of arbitrary components: ```js {() =>
{resource()}
}
``` But what does this do? When is the function called? As it turns out removing functions from `JSX.Element` type makes all of these scenarios error. Components only expect the values dictated by their types. ```js function MyLayout(props: { children: JSX.Element }): JSX.Element; function MyFor(props: { each: T[], children: (item: T) => U }): JSX.Element; // valid Hello

Hello

{name()} {name() &&

Hello

}
{(() => { return })()} {untrack(() => { return

{name()}

})}
{(user) =>
{user.name}
}
// invalid {name} {() =>

Hello

}
{() => "Hello"} {() => name() &&

Hello

}
{(user) =>
{user.name}
}
Not a Function
``` The tradeoff here is that authoring components you can no longer just return a Signal or Memo without casting. If using JSX you can always return a Fragment. If not you will need to cast to `unknown as JSX.Element`. ##### Better Errors and Cleanup ##### `catchError` replaces `onError` Error Handling is complicated enough without having to try to guess how they propagate. `onError` admittedly is a lower level primitive but fundamentally had this flaw. It worked by registering an error handler on the parent scope, but left it ambiguous how to handle siblings. Is it a queue? Are they independent? As a result we are introducing `catchError` in this release which introduces its own scope to catch any errors below it. The first argument in the primitive is similar to the try and the second argument is the catch. ```js catchError( () => { // do stuff throw new Error("I've Errored"); }, err => console.log(err) ); ``` `onError` will still be present until it can be removed in a future major version. ##### Standardized Errors Error Handling has had many weird edge cases introduced by applications throwing unusual values. In v1.7 we wrap all thrown values that aren't of type `Error` in a `new Error` and attach the original thrown value as `.cause`. ##### More Performant Dev Tools Now that [Solid Dev Tools](https://togithub.com/thetarnav/solid-devtools) have been stabilizing, we have a much better idea what support we need for them. In so we were able to remove the very costly serialization we were doing for generating unique identifiers. Conventions around naming and exports were streamlined and standardized as well. ##### Others - Smaller compiled output, remove auxilary closing tags - Support for `prop:` and `attr:` in Spreads - Don't apply special props (like `readonly`) to custom elements - Introduced improved serializer, [seroval](https://togithub.com/lxsmnsyc/seroval) - Fixed quirks in Solid's treeshaking in Rollup - Minify inline class and style attributes - Update `solid-ssr` to type `"module"` ### [`v1.6.16`](https://togithub.com/solidjs/solid/compare/v1.6.13...v1.6.16) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.6.13...v1.6.16) ### [`v1.6.13`](https://togithub.com/solidjs/solid/compare/v1.6.12...v1.6.13) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.6.12...v1.6.13) ### [`v1.6.12`](https://togithub.com/solidjs/solid/compare/v1.6.11...v1.6.12) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.6.10...v1.6.12) ### [`v1.6.10`](https://togithub.com/solidjs/solid/compare/v1.6.9...v1.6.10) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.6.9...v1.6.10) ### [`v1.6.9`](https://togithub.com/solidjs/solid/compare/v1.6.8...v1.6.9) [Compare Source](https://togithub.com/solidjs/solid/compare/v1.6.7...v1.6.9)

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.



This PR has been generated by Mend Renovate. View repository job log here.