Comments (10)
This is listed as one of the breaking changes in Svelte 5. What's your use case for creating invalid HTML?
from svelte.
The error here isn't actually a compiler error - it's a runtime error - but, in cases where we can see both <form>
s in one component, maybe we could add an actual compiler error for this, like we do for other types of invalid element nesting.
from svelte.
This is listed as one of the breaking changes in Svelte 5. What's your use case for creating invalid HTML?
No use case, just porting Svelte 4 code, this made us realize we were actually shipping invalid HTML, so it's kind of good this errors then. It was a bit hard to spot since one form lived deeply inside a component. If this is as expected you may close this, could you link where this is listed as a breaking change?
I just think it's a bit hard to know what you're doing wrong since it only throws when binding
inside a nested form but not without. Could be confusing idk.
from svelte.
from svelte.
Huh I tell a lie, this isn't listed yet in the breaking changes.
Therefore giving it the documentation label.
from svelte.
The error here isn't actually a compiler error - it's a runtime error - but, in cases where we can see both
<form>
s in one component, maybe we could add an actual compiler error for this, like we do for other types of invalid element nesting.
I agree with this...if it's statically analizable throwing a compiler error with a nice message is preferrable.
I can work on this but i would love some kind of approval if that's something we actually want to do.
from svelte.
Yes, we already have a validation for this in place, seems like it's missing the form/form case. Though as others have said this only works when things are within the same component. In the mid term it would be cool to investigate if there's something we can do at runtime in dev mode
from svelte.
Yes, we already have a validation for this in place, seems like it's missing the form/form case. Though as others have said this only works when things are within the same component. In the mid term it would be cool to investigate if there's something we can do at runtime in dev mode
will check on that :)
from svelte.
Yes, we already have a validation for this in place, seems like it's missing the form/form case. Though as others have said this only works when things are within the same component. In the mid term it would be cool to investigate if there's something we can do at runtime in dev mode
So i've started investingating this a bit:
- the general problem is that by creating the html using
<template />
any invalid HTML will be attempted to be corrected, in this case is eliminating the outer form causing the code of the component to be off by one
import * as $ from "svelte/internal/client";
var root = $.template(`<form><form><input></form></form>`); // this ends like this <form><input></form>
export default function App($$anchor) {
let value = $.source('');
var form = root();
var form_1 = $.child(form); // the child of the form is the actual input
var input = $.child(form_1); // the input doesn't have a child so this is null
$.remove_input_attr_defaults(input);
// this fails because is setting a listener on null is not possible.
$.bind_value(input, () => $.get(value), ($$value) => $.set(value, $$value));
$.append($$anchor, form);
}
- the whole bug will be obviously fixed by the validator but cases like this might happen anyway for other wrong HTML which we are not yet aware of. The situation can get also much worst if you don't add listeners on the input but on the inner form because in that case you are actually adding everything to the input. The good news is that technically this is "fixable" statically because is you stick the form in a component it get's it's own template root and just ships the double form to the browser (not ideal but at least doesn't fail cryptically).
- one possible idea for this could be to always validate the output of a function to retrieve an element checking against the tagName
import * as $ from "svelte/internal/client";
var on_input = () => {};
var root = $.template(`<form><form><input></form></form>`);
export default function App($$anchor) {
var form = root();
$.validate_element(form, "form");
var form_1 = $.child(form);
$.validate_element(form_1, "form");
var input = $.child(form_1);
$.validate_element(input, "input");
input.__input = [on_input];
$.append($$anchor, form);
}
$.delegate(["input"]);
this in theory is guaranteed to error for at least 1 element (either is null or the wrong expected element) but to be fair i don't know how well it would scale and the performance hit.
In the meantime i'm gonna open the PR to fix the validator we can iterate there or in another PR.
from svelte.
Reopening this since we still haven't fixed <form><Form></Form></form>
, which makes hydration errors very likely. Opened #11969 to investigate further
from svelte.
Related Issues (20)
- Svelte 5: Imported component applied global style HOT 2
- Svelte 5: Invalid namespace of elements within SVG HOT 5
- `render` function from `svelte/server` not properly typed
- preventDefault not working HOT 1
- Svelte 5: Can not reassign $derived variable HOT 8
- false positive a11y warning for label with control inside component HOT 6
- Uneasy bouncing in `transition:slide` HOT 12
- bug: getting $Ci not a constructor for imports of svg , png in static builds HOT 2
- SSR code regression between 152 and 153
- Svelte5: Snippet block name conflict with component name causes error HOT 1
- [Svelte5] Svelte mount duplicate issue HOT 7
- Svelte 5: events created with the "on" function will bubble separately from one another
- Dynamic import not working with (group) advanced routing HOT 3
- svelte/events `on` does not allow specifying event type
- Using $bindable with offsetWidth produces error after svelte 144
- Cannot set `volume` without binding
- Svelte 5: Misleading errors on non-existent sub-runes outside of Svelte files
- Svelte 5 reactivity breaks using objects, when parent is not using runes mode HOT 3
- Svelte 5: transition may go in wrong direction and stuck HOT 1
- Svelte 5 REPL: styles aren't clean upped on the app re-mounting
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.