From 13a22b26cab41500e0682b05f0cf2ffc74dc9815 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 24 Dec 2024 09:21:12 -0500 Subject: [PATCH] Sync `svelte` docs (#1065) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../svelte/03-template-syntax/16-class.md | 24 ----- .../svelte/03-template-syntax/18-class.md | 91 +++++++++++++++++++ .../98-reference/.generated/client-errors.md | 8 +- .../.generated/client-warnings.md | 2 +- .../.generated/compile-warnings.md | 2 +- .../docs/svelte/98-reference/20-svelte.md | 12 +-- .../98-reference/30-compiler-warnings.md | 2 +- .../svelte/98-reference/30-runtime-errors.md | 8 +- .../98-reference/30-runtime-warnings.md | 2 +- 9 files changed, 113 insertions(+), 38 deletions(-) delete mode 100644 apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md create mode 100644 apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md deleted file mode 100644 index cb23ea958..000000000 --- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/16-class.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts -title: class: ---- - -The `class:` directive is a convenient way to conditionally set classes on elements, as an alternative to using conditional expressions inside `class` attributes: - -```svelte - -
...
-
...
-``` - -As with other directives, we can use a shorthand when the name of the class coincides with the value: - -```svelte -
...
-``` - -Multiple `class:` directives can be added to a single element: - -```svelte -
...
-``` diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md new file mode 100644 index 000000000..acf65a03c --- /dev/null +++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/18-class.md @@ -0,0 +1,91 @@ +--- +NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts +title: class +--- + +There are two ways to set classes on elements: the `class` attribute, and the `class:` directive. + +## Attributes + +Primitive values are treated like any other attribute: + +```svelte +
...
+``` + +> [!NOTE] +> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class="false"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted. + +### Objects and arrays + +Since Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx). + +If the value is an object, the truthy keys are added: + +```svelte + + + +
...
+``` + +If the value is an array, the truthy values are combined: + +```svelte + +
...
+``` + +Note that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind. + +Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example: + +```svelte + + + + +``` + +The user of this component has the same flexibility to use a mixture of objects, arrays and strings: + +```svelte + + + + +``` + +## The `class:` directive + +Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally. + +```svelte + +
...
+
...
+``` + +As with other directives, we can use a shorthand when the name of the class coincides with the value: + +```svelte +
...
+``` + +> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable. diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md index 90c9c1f9d..2c2e0707e 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md @@ -21,15 +21,19 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t ### component_api_changed ``` -%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information +%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5 ``` +See the [migration guide](/docs/svelte/v5-migration-guide#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.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information +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 the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information. + ### derived_references_self ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md index 06ca578b7..5218ec4cb 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md @@ -52,7 +52,7 @@ Your `console.%method%` contained `$state` proxies. Consider using `$inspect(... 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.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value. +The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value. ### event_handler_invalid diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md index 3d515305f..57396bd7f 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md @@ -62,7 +62,7 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus ### a11y_click_events_have_key_events ``` -Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `