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)
- Error on mounting to detached element with `css: injected` HOT 2
- Animation is not applied inside nested global css selector HOT 5
- svelte 5 : structural clone failed HOT 2
- `list` is not reactive, but `list.length` is HOT 11
- Svelte 5: Portal'd content and multiple elements in same conditional HOT 3
- `SvelteDate.now()` as a live updating source HOT 6
- `<svelte:component>` wrong error message on component creation HOT 2
- Children duplication of list items rendered within components after v `5.0.0-next.179`
- Svelte 5: cannot change nested objects if not binded HOT 29
- [Svelte 5] `state_unsafe_mutation` when using class getters that perform side effects HOT 3
- Svelte 5: using inlang Paraglide JS message in <svelte:head> meta description tag causes error in SSR
- Rest parameters in a snippet should be a compile error HOT 2
- svelte 5 : Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
- Nested animate acts weirdly HOT 4
- Svelte 5: replaceState("/", {}) error
- parameter properties not working in svelte components when using svelte.config. 'ts' instead of 'js' HOT 2
- Svelte 5 property override wont assign type. HOT 2
- Svelte 5: desync in variable imported into components HOT 5
- Eslint: value.find is not a function HOT 3
- Svelte 5 REPL renders wrong active tab/file when `App.svelte` is not the first tab
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.