diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md new file mode 100644 index 0000000000..40b9b33d58 --- /dev/null +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md @@ -0,0 +1,950 @@ +--- +title: 'Compiler errors' +generated: 'generated by process-messages/index.js' +--- + +### `animation_duplicate` + +``` +An element can only have one 'animate' directive +``` + +### `animation_invalid_placement` + +``` +An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block +``` + +### `animation_missing_key` + +``` +An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block? +``` + +### `attribute_contenteditable_dynamic` + +``` +'contenteditable' attribute cannot be dynamic if element uses two-way binding +``` + +### `attribute_contenteditable_missing` + +``` +'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings +``` + +### `attribute_duplicate` + +``` +Attributes need to be unique +``` + +### `attribute_empty_shorthand` + +``` +Attribute shorthand cannot be empty +``` + +### `attribute_invalid_event_handler` + +``` +Event attribute must be a JavaScript expression, not a string +``` + +### `attribute_invalid_multiple` + +``` +'multiple' attribute must be static if select uses two-way binding +``` + +### `attribute_invalid_name` + +``` +'%name%' is not a valid attribute name +``` + +### `attribute_invalid_sequence_expression` + +``` +Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses +``` + +### `attribute_invalid_type` + +``` +'type' attribute must be a static text value if input uses two-way binding +``` + +### `attribute_unquoted_sequence` + +``` +Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression +``` + +### `bind_invalid_expression` + +``` +Can only bind to an Identifier or MemberExpression +``` + +### `bind_invalid_name` + +``` +`bind:%name%` is not a valid binding +``` + +``` +`bind:%name%` is not a valid binding. %explanation% +``` + +### `bind_invalid_target` + +``` +`bind:%name%` can only be used with %elements% +``` + +### `bind_invalid_value` + +``` +Can only bind to state or props +``` + +### `bindable_invalid_location` + +``` +`$bindable()` can only be used inside a `$props()` declaration +``` + +### `block_duplicate_clause` + +``` +%name% cannot appear more than once within a block +``` + +### `block_invalid_continuation_placement` + +``` +{:...} block is invalid at this position (did you forget to close the preceeding element or block?) +``` + +### `block_invalid_elseif` + +``` +'elseif' should be 'else if' +``` + +### `block_invalid_placement` + +``` +{#%name% ...} block cannot be %location% +``` + +### `block_unclosed` + +``` +Block was left open +``` + +### `block_unexpected_character` + +``` +Expected a `%character%` character immediately following the opening bracket +``` + +### `block_unexpected_close` + +``` +Unexpected block closing tag +``` + +### `component_invalid_directive` + +``` +This type of directive is not valid on components +``` + +### `const_tag_cycle` + +``` +Cyclical dependency detected: %cycle% +``` + +### `const_tag_invalid_expression` + +``` +{@const ...} must consist of a single variable declaration +``` + +### `const_tag_invalid_placement` + +``` +`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `` or `` +``` + +### `constant_assignment` + +``` +Cannot assign to %thing% +``` + +### `constant_binding` + +``` +Cannot bind to %thing% +``` + +### `css_empty_declaration` + +``` +Declaration cannot be empty +``` + +### `css_expected_identifier` + +``` +Expected a valid CSS identifier +``` + +### `css_global_block_invalid_combinator` + +``` +A `:global` selector cannot follow a `%name%` combinator +``` + +### `css_global_block_invalid_declaration` + +``` +A top-level `:global {...}` block can only contain rules, not declarations +``` + +### `css_global_block_invalid_list` + +``` +A `:global` selector cannot be part of a selector list with more than one item +``` + +### `css_global_block_invalid_modifier` + +``` +A `:global` selector cannot modify an existing selector +``` + +### `css_global_block_invalid_modifier_start` + +``` +A `:global` selector can only be modified if it is a descendant of other selectors +``` + +### `css_global_invalid_placement` + +``` +`:global(...)` can be at the start or end of a selector sequence, but not in the middle +``` + +### `css_global_invalid_selector` + +``` +`:global(...)` must contain exactly one selector +``` + +### `css_global_invalid_selector_list` + +``` +`:global(...)` must not contain type or universal selectors when used in a compound selector +``` + +### `css_nesting_selector_invalid_placement` + +``` +Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)` +``` + +### `css_selector_invalid` + +``` +Invalid selector +``` + +### `css_type_selector_invalid_placement` + +``` +`:global(...)` must not be followed by a type selector +``` + +### `debug_tag_invalid_arguments` + +``` +{@debug ...} arguments must be identifiers, not arbitrary expressions +``` + +### `declaration_duplicate` + +``` +`%name%` has already been declared +``` + +### `declaration_duplicate_module_import` + +``` +Cannot declare a variable with the same name as an import inside ` +- ++ +``` + +### `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 +``` + +### `unknown_code` + +``` +`%code%` is not a recognised code +``` + +``` +`%code%` is not a recognised code (did you mean `%suggestion%`?) +``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md new file mode 100644 index 0000000000..f5df54ea17 --- /dev/null +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md @@ -0,0 +1,164 @@ +--- +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_default_snippet` + +``` +Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead +``` + +### `invalid_snippet` + +``` +Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}` +``` + +### `lifecycle_function_unavailable` + +``` +`%name%(...)` is not available on the server +``` + +### `lifecycle_legacy_only` + +``` +`%name%(...)` cannot be used in runes mode +``` + +### `lifecycle_outside_component` + +``` +`%name%(...)` can only be used during component initialisation +``` + +### `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` +``` + +### `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/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md new file mode 100644 index 0000000000..b1823db956 --- /dev/null +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md @@ -0,0 +1,120 @@ +--- +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 +``` + +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. + +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. + +### `dynamic_void_element_content` + +``` +`` is a void element — it cannot have content +``` + +### `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 +``` + +`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`: + +```svelte + +``` + +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. + +### `state_snapshot_uncloneable` + +``` +Value cannot be cloned with `$state.snapshot` — the original value was returned +``` + +``` +The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals: +%properties% +``` diff --git a/apps/svelte.dev/src/hooks.server.js b/apps/svelte.dev/src/hooks.server.js index 6b194ed65e..0f78962d93 100644 --- a/apps/svelte.dev/src/hooks.server.js +++ b/apps/svelte.dev/src/hooks.server.js @@ -6,7 +6,8 @@ const mappings = new Map([ ['/docs/special-tags', '/docs/svelte/basic-markup'], // TODO: find a new home for some of these? ['/docs/element-directives', '/docs/svelte/basic-markup'], ['/docs/component-directives', '/docs/svelte/component-fundamentals'], - ['/docs/custom-elements-api', '/docs/svelte/custom-elements'] + ['/docs/custom-elements-api', '/docs/svelte/custom-elements'], + ['/docs/accessibility-warnings', '/docs/svelte/compiler-warnings'] ]); /** @type {import('@sveltejs/kit').Handle} */ diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index 6f00a685e0..fe860f0ed5 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -35,7 +35,7 @@ ['run-time-svelte', 'svelte'], ['run-time', 'svelte'], ['compile-time', 'svelte-compiler'], - ['accessibility-warnings', 'TODO'] + ['accessibility-warnings', 'compiler-warnings'] ]; function get_url_to_redirect_to() { diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index 694d258d19..3a05bcbd50 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -552,7 +552,11 @@ function hash_graph(hash: Hash, file: string, seen = new Set()) { function parse_options(source: string, language: string) { METADATA_REGEX.lastIndex = 0; - const options: SnippetOptions = { file: null, link: false, copy: language !== 'dts' }; + const options: SnippetOptions = { + file: null, + link: false, + copy: language !== '' && language !== 'dts' + }; source = source.replace(METADATA_REGEX, (_, key, value) => { switch (key) {