From 1cd357c62d5ca28d40ec3a07754d1fa472cf76a1 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 10 Oct 2024 15:22:57 +0200 Subject: [PATCH] docs: generate pages for compiler/runtime warnings/errors Ideally each warning has accompanying details so that it doesn't look so empty on the final site, but that can happen separately --- .../docs/98-reference/30-compiler-errors.md | 952 ++++++++++++++++++ .../docs/98-reference/30-compiler-warnings.md | 517 ++++++++++ .../docs/98-reference/30-runtime-errors.md | 163 +++ .../docs/98-reference/30-runtime-warnings.md | 114 +++ .../svelte/scripts/process-messages/index.js | 48 +- 5 files changed, 1791 insertions(+), 3 deletions(-) create mode 100644 documentation/docs/98-reference/30-compiler-errors.md create mode 100644 documentation/docs/98-reference/30-compiler-warnings.md create mode 100644 documentation/docs/98-reference/30-runtime-errors.md create mode 100644 documentation/docs/98-reference/30-runtime-warnings.md diff --git a/documentation/docs/98-reference/30-compiler-errors.md b/documentation/docs/98-reference/30-compiler-errors.md new file mode 100644 index 0000000000..f8ec9cf906 --- /dev/null +++ b/documentation/docs/98-reference/30-compiler-errors.md @@ -0,0 +1,952 @@ +--- +title: 'Compiler Errors' +generated: 'generated by process-messages/index.js' +--- + +## options_invalid_value + +``` +Invalid compiler option: %details% +``` + +## options_removed + +``` +Invalid compiler option: %details% +``` + +## options_unrecognised + +``` +Unrecognised compiler option %keypath% +``` + +## bindable_invalid_location + +``` +`$bindable()` can only be used inside a `$props()` declaration +``` + +## constant_assignment + +``` +Cannot assign to %thing% +``` + +## constant_binding + +``` +Cannot bind to %thing% +``` + +## declaration_duplicate + +``` +`%name%` has already been declared +``` + +## declaration_duplicate_module_import + +``` +Cannot declare a variable with the same name as an import inside ` +- ++ +``` +A derived value may be used in other contexts: +```diff +{#each items as item} +- ++ {@const Component = item.condition ? Y : Z} ++ +{/each} +``` +For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used: +In some cases `` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5. +In Svelte 5 this is no longer true — if `X` changes, `` re-renders. +In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `` to re-render when `X` changed, you would either have to use `` or put the component inside a `{#key X}...{/key}` block. + + +## svelte_element_invalid_this + +``` +`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte +``` + +## svelte_self_deprecated + +``` +`` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead +``` diff --git a/documentation/docs/98-reference/30-runtime-errors.md b/documentation/docs/98-reference/30-runtime-errors.md new file mode 100644 index 0000000000..8c7b286a7b --- /dev/null +++ b/documentation/docs/98-reference/30-runtime-errors.md @@ -0,0 +1,163 @@ +--- +title: 'Runtime Errors' +generated: 'generated by process-messages/index.js' +--- + +## bind_invalid_checkbox_value + +``` +Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead +``` + +## bind_invalid_export + +``` +Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`) +``` + +## bind_not_bindable + +``` +A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()` +``` + +## component_api_changed + +``` +%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information +``` + +## component_api_invalid_new + +``` +Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information +``` + +## derived_references_self + +``` +A derived value cannot reference itself recursively +``` + +## each_key_duplicate + +``` +Keyed each block has duplicate key at indexes %a% and %b% +``` +``` +Keyed each block has duplicate key `%value%` at indexes %a% and %b% +``` + +## effect_in_teardown + +``` +`%rune%` cannot be used inside an effect cleanup function +``` + +## effect_in_unowned_derived + +``` +Effect cannot be created inside a `$derived` value that was not itself created inside an effect +``` + +## effect_orphan + +``` +`%rune%` can only be used inside an effect (e.g. during component initialisation) +``` + +## effect_update_depth_exceeded + +``` +Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops +``` + +## hydration_failed + +``` +Failed to hydrate the application +``` + +## invalid_snippet + +``` +Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}` +``` + +## lifecycle_legacy_only + +``` +`%name%(...)` cannot be used in runes mode +``` + +## props_invalid_value + +``` +Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value +``` + +## props_rest_readonly + +``` +Rest element properties of `$props()` such as `%property%` are readonly +``` + +## rune_outside_svelte + +``` +The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files +``` + +## state_descriptors_fixed + +``` +Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`. +``` + +## state_prototype_fixed + +``` +Cannot set prototype of `$state` object +``` + +## state_unsafe_local_read + +``` +Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state +``` + +## state_unsafe_mutation + +``` +Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state` +``` + +## lifecycle_function_unavailable + +``` +`%name%(...)` is not available on the server +``` + +## invalid_default_snippet + +``` +Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead +``` + +## lifecycle_outside_component + +``` +`%name%(...)` can only be used during component initialisation +``` + +## store_invalid_shape + +``` +`%name%` is not a store with a `subscribe` method +``` + +## svelte_element_invalid_this_value + +``` +The `this` prop on `` must be a string, if defined +``` diff --git a/documentation/docs/98-reference/30-runtime-warnings.md b/documentation/docs/98-reference/30-runtime-warnings.md new file mode 100644 index 0000000000..fca31336c9 --- /dev/null +++ b/documentation/docs/98-reference/30-runtime-warnings.md @@ -0,0 +1,114 @@ +--- +title: 'Runtime Warnings' +generated: 'generated by process-messages/index.js' +--- + +## binding_property_non_reactive + +``` +`%binding%` is binding to a non-reactive property +``` +``` +`%binding%` (%location%) is binding to a non-reactive property +``` + +## console_log_state + +``` +Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead +``` + +The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value. +When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing. + + +## event_handler_invalid + +``` +%handler% should be a function. Did you mean to %suggestion%? +``` + +## hydration_attribute_changed + +``` +The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value +``` + +## hydration_html_changed + +``` +The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value +``` +``` +The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value +``` + +## hydration_mismatch + +``` +Hydration failed because the initial UI does not match what was rendered on the server +``` +``` +Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location% +``` + +## invalid_raw_snippet_render + +``` +The `render` function passed to `createRawSnippet` should return HTML for a single element +``` + +## lifecycle_double_unmount + +``` +Tried to unmount a component that was not mounted +``` + +## ownership_invalid_binding + +``` +%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent% +``` + +## ownership_invalid_mutation + +``` +Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead +``` +``` +%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead +``` + +## state_proxy_equality_mismatch + +``` +Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results +``` + +To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy. + value === proxy; // always false + +``` +```svelte +