28:null 29:["$","title",null,{"children":"Svelte framework | Visualization for Transparency Foundation (Fundació ViT) | Observable"}] 2e:T584,## First project Today, instead on be working with Observable notebooks, we will start with a basic Svelte app. Open Visual Studio Code and a terminal and type the following code: ~~~ npx degit fndvit/mvtec-svelte-app mvtec-svelte-app ~~~ This command clones a [Github project](https://github.com/fndvit/mvtec-svelte-app) on your computer. Once this process finishes (it only has to be done once), we can go to the corresponding folder, install the dependencies, and run the application with the following commands: ~~~ cd mvtec-svelte-template npm install npm run dev ~~~ As you see, the project is built and you can see the initial page on the browser (on localhost). The folder structure is as follows: ~~~ fndViT-svelte-template ├── readme.md ├── package.json ├── package-lock.json ├── rollup.config.js ├── .gitignore ├── node_modules ├─── public ├─── src ~~~ The code of the appliaction is placed in the `src` folder. The `main.js` is the creation of the App and we don't need to touch anything. The `App.svelte` file is the Svelte component that contains the main structure of the page (in that case, it's a mess of different elements). We also have a `components` folder, that contains different plot-related components (next week we will go deeper with that), and the `data` folder that contains several dataset files (just ignore them this week). 2f:T5e4,## Components Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML. The concept of component-based design envisions building websites out of ready-made elements (components), which are designed and programmed segments to be used as building blocks for your website. What is more, thanks to their modular nature, they can be easily reused on all subpages or even in different projects. In other words, components are like LEGO bricks, which you can assemble and arrange in various ways in order to achieve the desired goal. A component is like a ready-made element, which you can fill with any content or add graphic elements to it. What is more, components are not tied to specific subpages, which means that you can use them throughout your website. This [post](https://www.droptica.com/blog/component-based-design/) is a nice discussion on component-based web design. In the case of Svelte components, these are defined with three sections — script, styles, and markup —, which are optional. ```HTML ``` Since we want to first understand the Svelte features, let's remove the `App.svelte` file and just write an empty component code. *Tiny task*: Modify the App component to show a title in red with the text `Hello XXXX!`, where XXXX stands for the value of a variable called name (that initially is set to `world`). 30:T756,## Variables and reactivity At the heart of Svelte is a powerful system of [reactivity](https://svelte.dev/docs#component-format-script-2-assignments-are-reactive) for keeping the DOM in sync with your application state — for example, in response to an event. Then, if you assign a new value to a variable, the page will automatically refresh according to it. *Tiny task*: Declare a numerical variable and show it on the page. Then, create a button that, when the user clicks on it, increases by one the value of that variable. See if it's reactive. *Hint*: To define an event on an HTML element with Svelte, you have to use the `on:` directive and set it to some code (usually a function defined in the `script` part) that runs when the event is fired. For example: ~~~ javascript ~~~ In some cases, some elements depend on the value of other values. So, when we change the original values, we want that these elements also react. In those cases, we need to use the `$` operator and Svelte interprets to mean 're-run this code whenever any of the referenced values change'. For instance: ~~~ javascript $: twice = value*2; ~~~ *Tiny task*: Create the twice variable and show it. See the effect of using `$` and not. In case of Objects or Arrays, we usually mutate the object (or array), but we don't assign a new value. In that case, we can assign the object itself value: ~~~ javascript ... obj = obj; ~~~ You can also use the [`...` (spread)](https://www.w3schools.com/js/js_es6.asp#mark_spread) ES6 operator to make these assignments: ~~~ javascript obj = {...obj, prop: newValue}; ~~~ of similarly with arrays: ~~~ javascript arr = [...arr, newElement]; ~~~ *Tiny task*: Create an array, show it, and a button that adds a new random element at the end of the array. See if it is reactive. 31:T47d,## Nested components It would be impractical and a bad coding strategy to put your entire app in a single component. Instead, we can import components from other files and then use them as though we were including elements, increasing the structure and modularity of our code. Each component will be defined on a separate `.svelte` file, that will have the same structure (script, styles, and markup) as the `App.svelte` example that we have been working with. To use a (nested) component within a component, we will need to import it as follows: ~~~ javascript ~~~ Then, we may use the component `NewComponent` in the markup: ~~~ javascript

This is a paragraph.

~~~ *Tiny task*: Create a new component that shows some text in a paragraph. Usually, we would like to pass data from one component down to the nested one. To do that, we need to declare properties, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. *Tiny task*: Modify the previous component to let the parent component set a message to be written. 32:T699,## Logic blocks HTML doesn't have a way of expressing logic, like conditionals and loops, but Svelte does and this opens new opportunities in the component definition. For instance, we can use the [`if` block](https://svelte.dev/docs#template-syntax-if) to conditionally render the markup: ~~~ javascript {#if condition} ... {:else if condition} ... {:else} ... {/if} ~~~ According to the condition evaluation (if they are true or false), one markup or other will be rendered. This avoids using JavaScript to make these changes and simplifies the component code. *Tidy task*: Modify the `Circle` component to show a circle or a square depending on an exported variable. Another very useful logic block is [each](https://svelte.dev/docs#template-syntax-each) that allows make loops, based on an iterable object, such as an array. ~~~ javascript {#each arr as item}

{item.name}: {item.age} years old

{/each} ~~~ An each block can also specify an index, equivalent to the second argument in an `array.map(...)` callback or in `.attr(..., (d,i)=>...)` in D3: ~~~ javascript {#each arr as item, i}

{i + 1}. {item.name}: {item.age} years old

{/each} ~~~ If a key expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. ~~~ javascript {#each items as item, i (item.id)}

{i + 1}. {item.name}: {item.age} years old

{/each} ~~~ *Tidy task*: Create a component that based on the following array: ~~~ javascript let arr = [{x: 120, y:45, r:30},{x: 260, y:215, r:60},{x: 330, y:70, r:25}] ~~~ plots the corresponding circles.33:[] 2c:{"id":"382a3a6a18a333c7","slug":null,"title":"Svelte framework","thumbnail":"61cfe81fb24f696938070338a3094ea004e67fe5c61f3022e5b696ad3e11ac55","access_level":"public","create_time":"$D2023-02-14T17:21:27.296Z","update_time":"$D2023-02-14T17:21:27.296Z","view_time":null,"first_public_time":"$D2023-02-14T17:21:27.296Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024"},"version":105,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}],"members":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null,"role":"editor"},{"type":"team","id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)","avatar_url":"https://avatars-next.observableusercontent.com/754d2d5dd6f85a7606d03844ce81907501d4d8a384ffa6111f47cb5e91b16b8a","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"c12f09c9b891d3ce","slug":"2022-23-mvtec-data-visualization-programming-module","title":"2022-23 MVTEC Data Visualization Programming module","owner":{"id":"4bce174a609780f2","login":"fndvit","name":"Visualization for Transparency Foundation (Fundació ViT)"}},"type":"notebook","body":{"titling":"auto","title":"Svelte framework","cells":[{"id":0,"value":"# Svelte framework\n\n[Svelte](https://svelte.dev/) is a JavaScript framework (similar to many others, such as React and Vue), that shares a goal of making it easy to build slick interactive user interfaces.\n\nBut there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.\nYou can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"## Binding data\n\nIt's sometimes interesting to link values in the interface with variables. This is particularly interesting in the case of `input` elements. For instance we may define and input text and setting its value to a variable called `name`:\n\n~~~ javascript\n\n~~~\n\nIn a similar way can be done for [numerical inputs](https://learn.svelte.dev/tutorial/numeric-inputs):\n\n~~~ javascript\n\n\n~~~\n\nor [checkboxes](https://learn.svelte.dev/tutorial/checkbox-inputs):\n\n~~~ javascript\n\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"## Component lifecycle\n\nEvery component has a lifecycle that starts when it is created and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle. The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. The syntax of that function is:\n\n~~~ javascript\n\timport {onMount} from 'svelte';\n...\nonMount(async () => {\n\t\t//Code you to run when the component has been rendered\n});\n~~~\n\nA typical use of that function is to put the fetch for external API data.\n\nAnother very used method on the lifecycle is the `onDestroy`, which is called when your component is destroyed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"## SVG (Let's draw!)\n\nAs you know, [SVG](https://www.w3schools.com/graphics/svg_intro.asp) defines vector-based graphics in XML format and it can be included in the markup. For instance, we could create a `Circle.svelte` component with the following code: \n\n~~~ javascript\n \n~~~\n\n*Tidy task*: Modify this component in order to let the `App` component set the center coordinates and the radius of the circle. Link these to input range elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2d:"$2c:body"