Svelte 5

[benjaminknox]

What?

Svelte5 upgrade branch, branched from #890

Issues:

• React component types with children don't work anymore, child type is Snippet
  • Error: Types of property 'children' are incompatible. Type 'string' is not assignable to type 'Snippet<[]>'
  • PR needing to fix ☝🏻 [types]: Omit children from svelte types in react bindings benjaminknox/leo#3
  • As well as a few other type errors
• Test WebComponents Wrappers
• Look into tailwind transformation src/tokens/transformation/tailwind/extractComponentStyles.js
• Address critical block mentioned below in the socket-security comment
• Fix tailwind tokens (svelte5 compiler changes a number of selectors)
• Check for complex union types Fix complex types in react benjaminknox/leo#6

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		High CVE: npm flatted vulnerable to unbounded recursion DoS in parse() revive phase CVE: GHSA-25h7-pfq9-p65f flatted vulnerable to unbounded recursion DoS in parse() revive phase (HIGH) Affected versions: < 3.4.0 Patched version: 3.4.0 From: package-lock.json → npm/@storybook/svelte-vite@8.6.14 → npm/@storybook/svelte@8.6.14 → npm/flatted@3.3.3 ℹ Read more on: This package | This alert | What is a CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Remove or replace dependencies that include known high severity CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/flatted@3.3.3. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		High CVE: npm minimatch ReDoS: nested *() extglobs generate catastrophically backtracking regular expressions CVE: GHSA-23c5-xmqv-rm74 minimatch ReDoS: nested *() extglobs generate catastrophically backtracking regular expressions (HIGH) Affected versions: >= 10.0.0 < 10.2.3; >= 9.0.0 < 9.0.7; >= 8.0.0 < 8.0.6; >= 7.0.0 < 7.4.8; >= 6.0.0 < 6.2.2; >= 5.0.0 < 5.1.8; >= 4.0.0 < 4.2.5; < 3.1.4 Patched version: 3.1.4 From: package-lock.json → npm/@storybook/svelte-vite@8.6.14 → npm/@storybook/svelte@8.6.14 → npm/ts-jest@29.4.6 → npm/minimatch@3.1.2 ℹ Read more on: This package | This alert | What is a CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Remove or replace dependencies that include known high severity CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/minimatch@3.1.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		High CVE: npm minimatch has a ReDoS via repeated wildcards with non-matching literal in pattern CVE: GHSA-3ppc-4f35-3m26 minimatch has a ReDoS via repeated wildcards with non-matching literal in pattern (HIGH) Affected versions: >= 10.0.0 < 10.2.1; >= 9.0.0 < 9.0.6; >= 8.0.0 < 8.0.5; >= 7.0.0 < 7.4.7; >= 6.0.0 < 6.2.1; >= 5.0.0 < 5.1.7; >= 4.0.0 < 4.2.4; < 3.1.3 Patched version: 3.1.3 From: package-lock.json → npm/@storybook/svelte-vite@8.6.14 → npm/@storybook/svelte@8.6.14 → npm/ts-jest@29.4.6 → npm/minimatch@3.1.2 ℹ Read more on: This package | This alert | What is a CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Remove or replace dependencies that include known high severity CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/minimatch@3.1.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		High CVE: npm minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adjacent GLOBSTAR segments CVE: GHSA-7r86-cg39-jmmj minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adjacent GLOBSTAR segments (HIGH) Affected versions: >= 10.0.0 < 10.2.3; >= 9.0.0 < 9.0.7; >= 8.0.0 < 8.0.6; >= 7.0.0 < 7.4.8; >= 6.0.0 < 6.2.2; >= 5.0.0 < 5.1.8; >= 4.0.0 < 4.2.5; < 3.1.3 Patched version: 3.1.3 From: package-lock.json → npm/@storybook/svelte-vite@8.6.14 → npm/@storybook/svelte@8.6.14 → npm/ts-jest@29.4.6 → npm/minimatch@3.1.2 ℹ Read more on: This package | This alert | What is a CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Remove or replace dependencies that include known high severity CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/minimatch@3.1.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Medium CVE: npm ajv has ReDoS when using `$data` option CVE: GHSA-2g4f-4pwh-qvx6 ajv has ReDoS when using $data option (MODERATE) Affected versions: >= 7.0.0-alpha.0 < 8.18.0; < 6.14.0 Patched version: 8.18.0 From: package-lock.json → npm/style-loader@3.3.4 → npm/ajv@8.17.1 ℹ Read more on: This package | This alert | What is a medium CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Remove or replace dependencies that include known medium severity CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/ajv@8.17.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Low CVE: npm webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + cache persistence CVE: GHSA-38r7-794h-5758 webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + cache persistence (LOW) Affected versions: >= 5.49.0 < 5.104.0 Patched version: 5.104.0 From: package-lock.json → npm/style-loader@3.3.4 → npm/webpack@5.99.8 ℹ Read more on: This package | This alert | What is a mild CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Remove or replace dependencies that include known low severity CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/webpack@5.99.8. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Low CVE: npm webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to build-time SSRF behavior CVE: GHSA-8fgc-7cc6-rx7x webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to build-time SSRF behavior (LOW) Affected versions: >= 5.49.0 < 5.104.1 Patched version: 5.104.1 From: package-lock.json → npm/style-loader@3.3.4 → npm/webpack@5.99.8 ℹ Read more on: This package | This alert | What is a mild CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Remove or replace dependencies that include known low severity CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/webpack@5.99.8. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[AlanBreck]

Looking really good! I have several "why" questions below, none of which are meant to imply "we shouldn't be doing this".

[AlanBreck]

Why is this necessary?

[benjaminknox]

Mainly for the react bindings IIRC, the type was too complex and the compiler couldn't figure it out, details are here: benjaminknox#4

[benjaminknox]

🤔 This may also be an issue with some other components, so I'm spending a bit of time importing each to the example react app.

[AlanBreck]

Hmm... ok. It would be ideal not to have to do this since we theoretically would like to expose all of the available button attributes via props spreading, and wouldn't want TS to complain about legitimately used attributes.

[benjaminknox]

Sounds good, just for reference the types are here: svelte/elements

In svelte 5 it looks like there's more comprehensive types than 4 and combining them here is too much for the compiler, but we may be able to find another way to get the type we want?

I'll be working on this with this draft pr: benjaminknox#6

[benjaminknox]

Yeah, I think that's a good solution!

[AlanBreck]

Well... looks like we may be coming back full circle to your initial solution of providing a defined list of allowed attributes. 😅 Despite working in the examples, it still triggers the same error in brave-core.

I did a quick audit of some of my projects, and here are some of the attributes that I'd ideally like to support for Button:

Global

• id
• style
• aria-*
• data-*

Anchor:

• href
• target
• rel

Button:

• type
• for
• form

[fallaciousreasoning]

Yeah, I played around a bit more and just keep bumping into more and more problems 😢

[fallaciousreasoning]

Some more properties that'd be helpful:

1. name
2. title
3. autofocus
4. type (for button)

[fallaciousreasoning]

I'm also hitting issues with navigation item in brave-core, so maybe it need the same treatment

[AlanBreck]

Why is this file necessary?

[benjaminknox]

Added for code reuse and because of a svelte 5 type change in the HTMLAttributes type exported by svelte/elements.

This type gets used in:

src/components/buttonMenu/buttonMenu.svelte
src/components/dropdown/dropdown.svelte
src/components/menu/menu.svelte

Svelte 5 added a children prop to HTMLAttributes<T> typed as a Snippet, but these components need children as raw DOM content, so using it caused a type conflict after I upgraded.