Bump solid-js from 1.6.16 to 1.7.1 in /frontend

[dependabot]

Bumps solid-js from 1.6.16 to 1.7.1.

Release notes

Sourced from solid-js's releases.

v1.7.0 - U Can't Type This

Solid has experienced incredible growth in usage the past 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 <Show> and <Match> 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.

// keyed w/ callback - reruns full callback on change
<Show when={user()} keyed>
  {nonNullUser => <div>{nonNullUser.name}</div>}
</Show>
// non-keyed w/o callback... - only updates the one expression, needs ! assertion
<Show when={user()}>
<div>{user()!.name}</div>
</Show>
// NEW!
// non-keyed w/ callback - only updates the one expression
<Show when={user()}>
{nonNullUser => <div>{nonNullUser().name}</div>}
</Show>

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.

You first hit this the first time use Solid. You create that counter and don't call count as a function and it works.

</tr></table> 

... (truncated)

Changelog

Sourced from solid-js's changelog.

Changelog

1.7.0 - 2023-03-30

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 <Show> and <Match> 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.

// keyed w/ callback - reruns full callback on change
<Show when={user()} keyed>
  {nonNullUser => <div>{nonNullUser.name}</div>}
</Show>
// non-keyed w/o callback... - only updates the one expression, needs ! assertion
<Show when={user()}>
<div>{user()!.name}</div>
</Show>
// NEW!
// non-keyed w/ callback - only updates the one expression
<Show when={user()}>
{nonNullUser => <div>{nonNullUser().name}</div>}
</Show>

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.

... (truncated)

Commits

• 696dede v1.7.1
• d4087fe fix 1663: template element closing errors
• ba02481 fix ref timing in portals
• 448f7c8 Merge pull request #1664 from xunilrj/fix/dev-exported-twice
• 705820c make it harder for the optimizer to incorrectly export DEV twice
• 94a14f9 v1.7.0
• 1830820 exit preleases
• 57f4d51 Merge pull request #1638 from solidjs/next
• af34922 update off beta deps
• 840933b fix #1653 portal bypasses Suspense
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)