```svelte

<script> $: getFirstValue = () => { // here be calculations // that does not fit on one line return result } $: getSecondValue = () => { // here be calculations // that does not fit on one line return result } // will rerun everytime getFirstValue or getSecondValue is updated because of reactivity $: value = getFirstValue() || getSecondValue() </script> <div id="app"> {value} </div>

```

```svelte

<script> $: giveMeSomething = () => { //... some code return something } </script> <div id="app"> {giveMeSomething()} </div>

```

```svelte

<script> let m = { x: 0, y: 0 }; function handleMousemove(event) { m.x = event.clientX; m.y = event.clientY; } </script> <div on:mousemove={handleMousemove}> The mouse position is {m.x} x {m.y} </div> <style> div { width: 100%; height: 100%; } </style>

```

```js / React Hook - sample code to capture mouse coordinates/

import React, { useState, useCallback, useEffect, useRef } from 'react';

function useEventListener(eventName, handler, element = window) { // Create a ref that stores handler const savedHandler = useRef();

// Update ref.current value if handler changes. // This allows our effect below to always get latest handler ... // ... without us needing to pass it in effect deps array ... // ... and potentially cause effect to re-run every render. useEffect(() => { savedHandler.current = handler; }, [handler]);

useEffect(() => { // Make sure element supports addEventListener const isSupported = element && element.addEventListener; if (!isSupported) return;

  // Create event listener that calls handler function stored in ref
  const eventListener = event => savedHandler.current(event);

  // Add event listener
  element.addEventListener(eventName, eventListener);

  // Remove event listener on cleanup
  return () => {
    element.removeEventListener(eventName, eventListener);
  };
},
[eventName, element] // Re-run if eventName or element changes

); }

export default function App() { // State for storing mouse coordinates const [coords, setCoords] = useState({ x: 0, y: 0 });

// Event handler utilizing useCallback ... // ... so that reference never changes. const handler = useCallback( ({ clientX, clientY }) => { // Update coordinates setCoords({ x: clientX, y: clientY }); }, [setCoords] );

// Add event listener using our hook useEventListener('mousemove', handler);

return (

The mouse position is ({coords.x}, {coords.y})

); } ```

```html

<form action="/baz"> <label> Query <input name="query"> </label> <label> Sort <input name="sort"> </label> <label> Order <input name="order"> </label> <label> Page <input name="page"> </label> </form>

```

```js let query = new URLSearchParams($page.url.searchParams.toString());

query.set('word', word);

goto(?${query.toString()}); ```

js $page.url.searchParams.set('word',word); goto(`?${$page.url.searchParams.toString()}`);

```svelte

<script> let wrapper; </script> <div bind:this="{wrapper}"></div>

```

js export const load: PageServerLoad = () => { return { post: fetchPost(), streamed: { comments: fetchComments() } }; }; ```svelte

<script lang="ts"> import type { PageData } from './$types'; export let data: PageData; </script> <article> {data.post} </article>

{#await data.streamed.comments} Loading... {:then value} <br />

{#each value as comment}
1. {comment}
{/each}

{/await} ```

https://www.swyx.io/jsdoc-swyxkit

```html

<script> let counter = 0; let evens = 0; $: { if (counter > 10) { break $; } if (counter % 2 === 0) { evens++; } } </script>

<button on:click={() => (counter++)}> Increment </button>

Counter: {counter}, evens before 10: {evens}

```