diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md index d4abf2105b93ae3..fc13b31b382a175 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md @@ -183,7 +183,7 @@ When any filter button is clicked, we just update the filter variable with the n In the previous example we realized that our `FilterButton` component wasn't working because our application state was flowing down from parent to child through the `filter` prop, but it wasn't going back up. So we added an `onclick` prop to let the child component communicate the new `filter` value to its parent. -It works OK, but Svelte provides us with an easier and more straightforward way to achieve two-way data binding. Data ordinarily flows down from parent to child using props. If we want it to also flow the other way, from child to parent, we can use [the `bind:` directive](https://svelte.dev/docs#bind_element_property). +It works OK, but Svelte provides us with an easier and more straightforward way to achieve two-way data binding. Data ordinarily flows down from parent to child using props. If we want it to also flow the other way, from child to parent, we can use [the `bind:` directive](https://svelte.dev/docs/element-directives#bind-property). Using `bind`, we will tell Svelte that any changes made to the `filter` prop in the `FilterButton` component should propagate back up to the parent component, `Todos`. That is, we will bind the `filter` variable's value in the parent to its value in the child. @@ -370,7 +370,7 @@ Now we need to update our `Todo` component's markup to call the above functions To handle the editing mode, we are using the `editing` variable, which is a boolean. When it's `true`, it should display the `` field for editing the to-do name, and the _Cancel_ and _Save_ buttons. When it's not in editing mode, it will display the checkbox, the to-do name, and the buttons to edit and delete the to-do. -To achieve this we will use an [`if` block](https://svelte.dev/docs#if). The `if` block conditionally renders some markup. Take into account that it won't just show or hide the markup based on the condition — it will dynamically add and remove the elements from the DOM, depending on the condition. +To achieve this we will use an [`if` block](https://svelte.dev/docs/logic-blocks#if). The `if` block conditionally renders some markup. Take into account that it won't just show or hide the markup based on the condition — it will dynamically add and remove the elements from the DOM, depending on the condition. When `editing` is `true`, for example, Svelte will show the update form; when it's `false`, it will remove it from the DOM and add in the checkbox. Thanks to Svelte reactivity, assigning the value of the editing variable will be enough to display the correct HTML elements. @@ -520,7 +520,7 @@ We also use `todo.id` to create unique ids for the new input controls and labels As you can see, it's easy to implement the "props-down, events-up" pattern in Svelte. Nevertheless, for simple components `bind` can be a good choice; Svelte will let you choose. -> **Note:** Svelte provides more advanced mechanisms to share information among components: the [Context API](https://svelte.dev/docs#setContext) and [Stores](https://svelte.dev/docs#svelte_store). The Context API provides a mechanism for components and their descendants to "talk" to each other without passing around data and functions as props, or dispatching lots of events. Stores allows you to share reactive data among components that are not hierarchically related. We will look at Stores later on in the series. +> **Note:** Svelte provides more advanced mechanisms to share information among components: the [Context API](https://svelte.dev/docs/svelte#setcontext) and [Stores](https://svelte.dev/docs/svelte-store). The Context API provides a mechanism for components and their descendants to "talk" to each other without passing around data and functions as props, or dispatching lots of events. Stores allows you to share reactive data among components that are not hierarchically related. We will look at Stores later on in the series. ## The code so far diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md index 5225bb91d6eb927..1629f2e4942e7c6 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md @@ -225,7 +225,7 @@ const checkAllTodos = (completed) => { In this case we are using the [`map()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method, which returns a new array with the results of executing the provided function for each item. The function returns a copy of each to-do using [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and overwrites the property of the completed value accordingly. This solution has the added benefit of returning a new array with new objects, completely avoiding mutating the original `todos` array. -> **Note:** Svelte allows us to specify different options that affect how the compiler works. The `` option tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed and generate simpler and more performant code. For more information on ``, check the [Svelte options documentation](https://svelte.dev/docs#svelte_options). +> **Note:** Svelte allows us to specify different options that affect how the compiler works. The `` option tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed and generate simpler and more performant code. For more information on ``, check the [Svelte options documentation](https://svelte.dev/docs/special-elements#svelte-options). All of these solutions involve an assignment in which the updated variable is on the left side of the equation. Any of this techniques will allow Svelte to notice that our `todos` array has been modified. @@ -470,7 +470,7 @@ The one you'll use most frequently is `onMount()`, which lets us run a callback 6. Go to your app again, and you'll now see the `` field is focused on page load. -> **Note:** You can have a look at the other [lifecycle functions in the Svelte docs](https://svelte.dev/docs#svelte), and you can see them in action in the [interactive tutorial](https://learn.svelte.dev/tutorial/onmount). +> **Note:** You can have a look at the other [lifecycle functions in the Svelte docs](https://svelte.dev/docs/svelte), and you can see them in action in the [interactive tutorial](https://learn.svelte.dev/tutorial/onmount). ## Waiting for the DOM to be updated with the `tick()` function @@ -544,7 +544,7 @@ The above solution works, but it is rather inelegant. Svelte provides a better w ## Adding functionality to HTML elements with the `use:action` directive -Next up, we want the name `` to automatically select all text on focus. Moreover, we want to develop this in such a way that it could be easily reused on any HTML `` and applied in a declarative way. We will use this requirement as an excuse to show a very powerful feature that Svelte provides us to add functionality to regular HTML elements: [actions](https://svelte.dev/docs#use_action). +Next up, we want the name `` to automatically select all text on focus. Moreover, we want to develop this in such a way that it could be easily reused on any HTML `` and applied in a declarative way. We will use this requirement as an excuse to show a very powerful feature that Svelte provides us to add functionality to regular HTML elements: [actions](https://svelte.dev/docs/svelte-action). To select the text of a DOM input node, we have to call [`select()`](/en-US/docs/Web/API/HTMLInputElement/select). To get this function called whenever the node gets focused, we need an event listener along these lines: @@ -577,7 +577,7 @@ In our immediate use case, we will define a function called `selectOnFocus()` th } ``` -2. Now we need to tell the `` to use that function with the [`use:action`](https://svelte.dev/docs#use_action) directive: +2. Now we need to tell the `` to use that function with the [`use:action`](https://svelte.dev/docs/element-directives#use-action) directive: ```svelte @@ -719,7 +719,7 @@ That's not what we want — we want the _Edit_ button to receive focus only when 6. Go back and try your app again. At this point, every time the _Edit_ button is added to the DOM, the `focusEditButton` action is executed, but it will only give focus to the button if the `editButtonPressed` flag is `true`. -> **Note:** We have barely scratched the surface of actions here. Actions can also have reactive parameters, and Svelte lets us detect when any of those parameters change. So we can add functionality that integrates nicely with the Svelte reactive system. For a more detailed introduction to actions, consider checking out the [Svelte Interactive tutorial](https://learn.svelte.dev/tutorial/actions) or the [Svelte documentation](https://svelte.dev/docs#template-syntax-element-directives-use-action). +> **Note:** We have barely scratched the surface of actions here. Actions can also have reactive parameters, and Svelte lets us detect when any of those parameters change. So we can add functionality that integrates nicely with the Svelte reactive system. For a more detailed introduction to actions, consider checking out the [Svelte Interactive tutorial](https://learn.svelte.dev/tutorial/actions) or the [Svelte `use:action` documentation](https://svelte.dev/docs/element-directives#use-action). ## Component binding: exposing component methods and variables using the `bind:this={component}` directive @@ -773,7 +773,7 @@ So far we saw how to send information to a component via props, and how a compon So we need the `TodosStatus` component to expose a method that its parent can call to give focus to it. It's a very common scenario that a component needs to expose some behavior or information to the consumer; let's see how to achieve it with Svelte. -We've already seen that Svelte uses `export let varname = …` to [declare props](https://svelte.dev/docs#1_export_creates_a_component_prop). But if instead of using `let` you export a `const`, `class`, or `function`, it is read-only outside the component. Function expressions are valid props, however. In the following example, the first three declarations are props, and the rest are exported values: +We've already seen that Svelte uses `export let varname = …` to [declare props](https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop). But if instead of using `let` you export a `const`, `class`, or `function`, it is read-only outside the component. Function expressions are valid props, however. In the following example, the first three declarations are props, and the rest are exported values: ```svelte