Title: Theory / Important / CS / Programming / JS / Svelte
Tags: automatedNewLineAfterCommaSpace

Question: Main selling point of Svelt
Answer: it compiles to JS, making updates faster by precompiling everything necessary
Page: https://svelte.dev/tutorial/basics

Name: Svelte
Definition: A javascript framework compiled
Page: https://svelte.dev/tutorial/basics

Extension: svelte
Means: A svelte file, containing html, css and js
Other fields (not shown on cards):
Page: https://svelte.dev/tutorial/basics

Instruction: {foo}
Page: https://svelte.dev/tutorial/basics
Effect: If a variable used in foo is updated, the html change
Language: Svelte
Returns: foo's value. HTML entities are escaped
Where to use it: in the html code
Index: svelte

Page: https://svelte.dev/tutorial/dynamic-attributes
Syntactic sugar: {single_word}
Implementation: single_word={single_word}
Language: Svelte
Where to use it: html tag

Question: CSS difference in svelte
Answer: The top level <style> in a .svelte file is scoped to the html component it is defined in
Page: https://svelte.dev/tutorial/styling

Instruction: {@html expr}
Page: https://svelte.dev/tutorial/html-tags
Language: Svelte
Returns: Same as {expr}, but html is not escaped
Where to use it: in html code

Instruction: on:event={function_name}
Page: https://svelte.dev/tutorial/html-tags
Effect: when event occurs of the current tag, call the method function_name
Language: svelte
Variables: event an event
function_name a function taking an event as argument
Where to use it: html tag

Instruction: $: instr
Page: https://svelte.dev/docs#3_$_marks_a_statement_as_reactive
Effect: evaluate instr now and each time a reactive variable occurring in the value in expr is updated
Language: svelte
Name: A reactive statement

Name: An update of var
Definition: An assignment in which var appear on the left side of the equality sign
Page: https://svelte.dev/tutorial/html-tags
Variables: var a variable
Context: Svelte

Instruction: export foo;
Page: https://svelte.dev/tutorial/html-tags
Meaning: the variable foo is accessible from other components importing the current file
Language: Svelte
Name: A prop (property)
Variables: var a variable
Similar to: foo;
Mutable: same as foo

Instruction: <script>
import Nested from './Nested.svelte';
</script>
Page: https://svelte.dev/tutorial/reactive-declarations
Language: Svelte
Identifier: Nested
Initialization: the block defined in Nested
Syntactical constraint: First letter is upper case

Instruction: <Nested/>
Page: https://svelte.dev/tutorial/reactive-declarations
Effect: Replaced by the code defined in Nested.svelte file
Language: Svelte
Variables: <script>
import Nested from './Nested.svelte';
</script>

Instruction: var = {value}
Page: https://svelte.dev/tutorial/reactive-declarations
Effect: initialize Nested's variable var with value in Nested
Language: Svelte
Variables: <script>
import Nested from './Nested.svelte';
</script>
Where to use it: <Nested/>

Instruction: {...pkg}
Page: https://svelte.dev/tutorial/reactive-declarations
Effect: initialize Nested's variable with variable and value from pkg
Language: Svelte
Variables: <script>
import Nested from './Nested.svelte';
</script>
pkg an object
Where to use it: <Nested/>
Name: Spread attribute

Instruction: $$props
Page: https://svelte.dev/tutorial/reactive-declarations
Effect: The object containing all values passed to this components during call (declared with export or not)
Language: Svelte

Instruction: {#if prop}
  true_html
{:else}
  false_html
{/if}
Page: https://svelte.dev/tutorial/reactive-declarations
Language: Svelte
Returns: if prop holds, true_html otherwise false_html

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: {#if prop}
  some_html
{/if}
Implementation: {#if prop}
  some_html
{:else}
{/if}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: {:else if prop}
  foo
{/if}
Implementation: {:else}
  {#if prop}
    foo
  {/if}
{/if}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: {#each array as elt}
  foo
{/each}
Implementation: {#each array as elt, index}
  foo
{/each}
Language: Svelte

Instruction: {#each elts as elt, i}
  some_parametrized_html
{/each}
Page: https://svelte.dev/tutorial/reactive-declarations
Effect: Any update to elts is applied to the last dom element generated
Language: Svelte
Returns: for each elt at position i in elts, generate some_parametrized_html

Instruction: {#each elts as elt, i (elt_key_i)}
  some_parametrized_html
{:else}
  empty_html
{/if}
Page: https://svelte.dev/tutorial/reactive-declarations
https://svelte.dev/docs#each
Effect: when elt_i_key is updated, the dom generated for key, i is updated
Language: Svelte
Returns: for each elt at position i in elts, generate some_parametrized_html.
If elts is empty, empty_html

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: {#await promise then value}
Implementation: {#await promise}
{:then value}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: {:then value}
  some_html
{/await}
Implementation: {:then value}
  some html
{:cach error}
{/await}
Language: Svelte

Instruction: {#await promise}
  waiting_html
{:then value}
  good_html
{:catch error}
  error_html
{/await}
Page: https://svelte.dev/tutorial/reactive-declarations
Language: Svelte
Returns: waiting_html first. When most recent promise resolve, either good_html or error_html

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: on:event|preventDefault={action}
Implementation: on:event={e => {
  e.preventDefault();
  action(e);
}}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: on:event|stopPropagation={action}
Implementation: on:event={e => {
  e.stopPropagation();
  action(e);
}}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: on:event|passive={action}
Implementation: on:event={e => {
  passive set to true;
  action(e);
}}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: on:event|nonpassive={action}
Implementation: on:event={e => {
  passive set to false;
  action(e);
}}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: on:event|self={action}
Implementation: on:event|preventDefault={e => {
  if (e.target !== self) return;
  action(e);
}}
Language: Svelte

Page: https://svelte.dev/tutorial/reactive-declarations
Syntactic sugar: on:event|trusted={action}
Implementation: on:event={e => {
  if (!e.isTrusted) return;
  action(e);
}}
Language: Svelte

Instruction: on:event|once=action
Page: https://svelte.dev/tutorial/reactive-declarations
Effect: same as
on:event=action
but executed only once
Language: Svelte

Instruction: createEventDispatcher()
Page: https://svelte.dev/tutorial/component-events
Language: Svelte
Returns: a callable that can send event to the current component
Assuming: must be created exactly once during component creation

Instruction: dispatch(
  name,
  object
)
Page: https://svelte.dev/tutorial/component-events
Effect: the current context receive even name with attributes as in object
Language: Svelte
Variables: const dispatch = createEventDispatcher(
);

Instruction: on:message
Page: https://svelte.dev/tutorial/event-forwarding
Effect: all messages received from the inner component are redispatched to the containing component
Language: Svelte
Where to use it: in a svelte component tag <Inner>
Name: event forwarding

Instruction: bind:value={var}
Page: https://svelte.dev/tutorial/text-inputs
Effect: when the value of the input is modified, var is updated to the new value
Language: Svelte
Where to use it: in a html tag <input>

Instruction: bind:group={var}
Page: https://svelte.dev/tutorial/text-inputs
Effect: Indicate that this input is one of a group, and the selected values are to be saved in an array in the variable var
Language: Svelte
Where to use it: in a html tag <input>

Instruction: bind:innerhtml={var}
Page: https://svelte.dev/tutorial/text-inputs
Effect: bind the innerhtml to var
Language: Svelte
Where to use it: in a html tag <tag contenteditable="true">

Instruction: bind:textContent={var}
Page: https://svelte.dev/tutorial/text-inputs
Effect: bind the textContent to var
Language: Svelte
Where to use it: in a html tag <tag contenteditable="true">

Instruction: bind:innerVar={outerVar}
Page: https://svelte.dev/tutorial/text-inputs
Effect: when innerVar of InnerComponent is updated, its new value is copied into outerVar
Language: Svelte
Where to use it: in a component tag <innerComponent>

Instruction: bind:this={var}
Page: https://svelte.dev/tutorial/component-this
Effect: Variable var is set to this element of the dom (initially undefined until it joined the DOM)
Language: Svelte
Where to use it: in a component tag <innerComponent>

Instruction: onMount(f)
Page: https://svelte.dev/tutorial/component-this
Effect: On client side:
The first time the current component is rendered, f is executed
on server side: nothing
Language: Svelte
Variables: f an async function
Where to use it: In a component

Question: When should data be fetched online?
Answer: In onMount, so that it does not block initial rendering of the DOM
Page: https://svelte.dev/tutorial/onmount
Context: Svelte

Instruction: onDestroy(f)
Page: https://svelte.dev/tutorial/ondestroy
Effect: When this component is destroyed, f is executed
Language: Svelte

Instruction: beforeUpdate(f)
Page: https://svelte.dev/tutorial/ondestroy
Effect: On client:
Before this component is updated, f is called
On server: nothing
Language: Svelte

Instruction: afterUpdate(f)
Page: https://svelte.dev/tutorial/ondestroy
Effect: On client:
after this component is updated, f is called
On server: nothing
Language: Svelte

Instruction: await tick();
Page: https://svelte.dev/tutorial/ondestroy
Effect: pause until this rendering of the dom is done
Language: Svelte
Library: svelte
Intuition: useful to do actions that require the new dom to be rendered, e.g. putting cursor at right position

Typ: A store
Function: subscribe(f):
return `unsubscribe`
when the store value is updated to u, f(u) is called
until `unsubscribe()` is called
Page: https://svelte.dev/tutorial/writable-stores
https://svelte.dev/docs#4_Prefix_stores_with_$_to_access_their_values
Function2: usually:
$ : return the stored value
Context: Svelte
Language: js

Typ: A writable store
Function: set(v) change the value to v
Page: https://svelte.dev/tutorial/writable-stores
Function2: update(f) change the value from v to f(v)
Context: Svelte
Subtype of: a store
Language: js

Instruction: writable(v)
Page: https://svelte.dev/tutorial/writable-stores
Language: Svelte
Returns: a writable store initialized at v

Instruction: ws.update(f)
Page: https://svelte.dev/tutorial/writable-stores
Effect: change the value of ws from v to f(v)
Language: Svelte
Variables: ws a writable store

Instruction: ws.set(v)
Page: https://svelte.dev/tutorial/writable-stores
https://svelte.dev/docs#4_Prefix_stores_with_$_to_access_their_values
Effect: change the value of ws to v
Language: Svelte
Variables: ws a writable store
v a value
Abbreviation: $ws = v

Instruction: s.subscribe(f)
Page: https://svelte.dev/tutorial/writable-stores
Effect: when s is set to v, call f(v), until unsubscribed
Language: Svelte
Returns: unsubscribe() method
Variables: s a writable store
v a value

Instruction: get(s)
Page: https://svelte.dev/tutorial/auto-subscriptions
https://svelte.dev/docs#4_Prefix_stores_with_$_to_access_their_values
Language: Svelte
Returns: the value stored in s
Variables: s a store
Abbreviation: $s
Library: svelte/store
Time complexity: slow. It subscribe, take value and unsubscribe

Instruction: readable(
  v,
  f
)
Page: https://svelte.dev/tutorial/auto-subscriptions
Effect: on the first subscriber
`stop = f(set)` where `set()` allows to set the store value
when the last unsubscription:
`stop()`
Language: Svelte
Returns: a store initialized at f
Variables: s a writable store

Instruction: derived(
  [base_store_1, ..., base_store_n],
  f: ([a: any, ..., b: any[]]) =>any
)
Page: https://svelte.dev/tutorial/auto-subscriptions
Language: Svelte
Returns: a store, whose value is f(  [$base_store_1, ..., $base_store_n])
Variables: s a store

Typ: tweened
Meaning: A store whose value progress smoothly from the current value to the set value
Page: https://svelte.dev/tutorial/tweened
Language: Svelte

Instruction: tweened(
  v,
  {params}
)
Page: https://svelte.dev/tutorial/tweened
Effect: A tweened store, initialized at v, with params indicating the evolution of the values when it is set
Language: Svelte
Library: svelte/motion

Instruction: spring(
  v,
  {params}
)
Page: https://svelte.dev/tutorial/tweened
Effect: A spring store, initialized at v, with params indicating the evolution of the values when it is set
Language: Svelte
Library: svelte/motion

Typ: spring
Meaning: a store whose value evolves to simulate a spring tense between previous value and setted value
Page: https://svelte.dev/tutorial/tweened
Language: Svelte

Instruction: transition:fade
Page: https://svelte.dev/tutorial/tweened
Effect: indicate that when the dom element appear/disappear, it does so fading instead of instantaneous
Language: Svelte
Where to use it: html tag

Instruction: transition
Page: https://svelte.dev/tutorial/tweened
Effect: todo
Language: Svelte

Variable: in:
Meaning: how to introduce visually new content in the DOM
Page: https://svelte.dev/tutorial/animate
Context: Component
Language: Svelte

Variable: out:
Meaning: how to show that this component leaves the DOM
Page: https://svelte.dev/tutorial/animate
Context: Component
Language: Svelte

Variable: animate:
Meaning: how to show that this component moves in the DOM
Page: https://svelte.dev/tutorial/animate
Context: Component
Language: Svelte

Instruction: animate:flip
Page: https://svelte.dev/tutorial/animate
Effect: when this element move in the DOM, show it moving from one place to the other
Language: Svelte
Context: Component
Where to use it: HTML tag

Page: https://svelte.dev/tutorial/animate
Syntactic sugar: use:foo
Implementation: use:foo="{{}}"
Language: Svelte
Where to use it: HTML tag

Instruction: use:foo="{{parameters}}"
Page: https://svelte.dev/tutorial/animate
Effect: call foo(this node, parameters) when the object is created
Language: Svelte
Where to use it: HTML tag

Instruction: class:foo="{expr}"
Page: https://svelte.dev/tutorial/animate
Effect: html consider that the current tag has CSS class foo iff expr holds
Language: Svelte
Where to use it: HTML tag

Page: https://svelte.dev/tutorial/animate
Syntactic sugar: class:foo
Implementation: class:foo={foo}
Language: Svelte
Where to use it: HTML tag

Instruction: <slot>My_Empty_content</slot>
Page: https://svelte.dev/tutorial/slot-fallbacks
Language: Svelte
Returns: The html content of the container in which this instance is called if it is not empty, otherwise My_Empty_content
Extra: in
<Box>
    My box content
</Box>
"My box content" will replace <slot/> in the Box code
Where to use it: A component
Name: The default slot
Intuition: You can use a default gray pattern or "Unknown value" while waiting for actual slot value

Page: https://svelte.dev/tutorial/slot-fallbacks
Syntactic sugar: <slot/>
Implementation: <slot></slot>
Language: Svelte
Where to use it: A container

Instruction: <slot name="foo">my_empty_slot</slot>
Page: https://svelte.dev/tutorial/slot-fallbacks
Language: Svelte
Returns: replaced by the content of the tag slot="foo" inside of this instance of this component instantiation
Where to use it: A container
Example: <svelte:fragment slot="address">
        42 Wallaby Way<br>
        Sydney
    </svelte:fragment>
to put this address in the slot address

Instruction: $$slots
Page: https://svelte.dev/tutorial/slot-fallbacks
Language: Svelte
Returns: an object having fields foo if only the container was instantiated with slot foo
Where to use it: Container C

Instruction: let:innerVar={outerVar}
Page: https://svelte.dev/tutorial/slot-fallbacks
Meaning: copy the value of innerVar and its updates
Language: Svelte
Identifier: outerVar
Where to use it: Container tag <C>
Scope: inside the container

Name: A context
Definition: Some data, accessible from any component, indexed by a key
Page: https://svelte.dev/tutorial/context-api
Context: Svelte

Instruction: setContext(
  key,
  value
)
Page: https://svelte.dev/tutorial/context-api
Effect: Ensure that all call to getContext(key) return `value`
Language: Svelte
Where to use it: Container initialization
Library: svelte

Instruction: getContext(key)
Page: https://svelte.dev/tutorial/context-api
Language: Svelte
Returns: The last value set in the global context
Where to use it: Container
Library: svelte

Question: How to ensure that the same key is not used by different component
Answer: Uses an object as key, as it is only equal to itself
Page: https://svelte.dev/tutorial/context-api
Context: Svelte context

Instruction: <svelte:self>
Page: https://svelte.dev/tutorial/context-api
Language: svelte
Returns: Another instance of the current component
Where to use it: not top level

Instruction: <svelte:component this={expr}/>
Page: https://svelte.dev/tutorial/context-api
Language: svelte
Returns: An instance of the component whose name is the value of expr

Instruction: <svelte:window/>
Page: https://svelte.dev/tutorial/context-api
Effect: A tag representing the window DOM, so that you can change it from svelte
Language: svelte

Instruction: <svelte:body/>
Page: https://svelte.dev/tutorial/context-api
Effect: A tag representing the body DOM, so that you can change it from svelte
Language: svelte

Instruction: <svelte:head/>
Page: https://svelte.dev/tutorial/context-api
Effect: A tag representing the Head DOM, so that you can change it from svelte
Language: svelte

Instruction: <svelte:fragment slot="slot_name">content</svelte:fragment>
Page: https://svelte.dev/tutorial/context-api
Language: svelte
Identifier: slot_name
Initialization: content
Scope: in the innermost container containing this tag

Page: https://svelte.dev/tutorial/svelte-fragment
Syntactic sugar: <foo  slot="slot_name">content</foo>
Implementation: <svelte:fragment slot="slot_name"><foo>content</foo></svelte:fragment>
Language: svelte

Instruction: <script context="module">
content
<script>
Page: https://svelte.dev/tutorial/svelte-fragment
Effect: execute content only the first time the module is loaded, and not once by component
Language: svelte
Context: component
Intuition: static in most OO language

Question: what is the default export of a svelte module
Answer: The component itself
Page: https://svelte.dev/tutorial/module-exports
Context: Svelte

Instruction: {@debug val1, ..., valn}
Page: https://svelte.dev/tutorial/debug
Effect: trigger the debugger as the value of user changes.
Language: Svelte

Instruction: <script>
foo
</script>
Page: https://svelte.dev/docs
Effect: Run foo when a component instance is created
Language: Svelte

Question: Limit to update with
$: var = expr
Answer: If expr depends on f(), and f depends on the global x, var do not update when x updates
Page: https://svelte.dev/docs#3_$_marks_a_statement_as_reactive
Context: Svelte

Page: https://svelte.dev/docs#3_$_marks_a_statement_as_reactive
Syntactic sugar: $: var = expr;
Implementation: let var;
$: var = expr;
Language: Svelte
Assuming: var not declared

Name: A reactive variable
Definition: A variable, declared globally in the component level, not in a module script.
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Context: Svelte
Etymology: The remaining of the program react when it change its value

Variable: svelte-foo
Meaning: The name given to the svelte style whose hash is foo
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Context: Svelte css
Language: Svelte

Instruction: :global(foo)
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Effect: Same as foo, but not restricted to the current component
Language: Svelte
Context: Svelte css

Instruction: @keyframes -global-foo
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Effect: compiled to
@keyframes foo,
hence valid outside of the module
Language: Svelte
Context: Svelte css

Question: How to distinguish html from svelte component
Answer: By convention, svelte <Tag> start wit a upper case and <html> one with lower case
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Context: Svelte css

Instruction: boolean_attribute={js_expr}
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Effect: apply boolean_attribute iff js_expr is truthy
Language: Svelte
Variables: boolean_attribute
Where to use it: html tag

Instruction: attribute={js_expr}
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Effect: if js_expr is nullish, nothing, otherwise `attribute=value` with value the value to which `js_expr` evaluate
Language: How to distinguish html from svelte component
Context: Svelte
Variables: attribute
Where to use it: html tag

Name: A nullish value
Definition: null or undefined
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Context: Svelte

Instruction: https://svelte.dev/docs#Attributes_and_props
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Effect: the props which are not declared with export
Language: Svelte

Instruction: <!-- svelte-ignore foo -->
Page: https://svelte.dev/docs#2_Assignments_are_reactive
Effect: disable warning foo for the next block of markup
Language: Svelte

Page: https://svelte.dev/docs#each
Syntactic sugar: {#each elts params}
  some_parametrized_html
{/if}
Implementation: {#each elts params}
  some_parametrized_html
{:else}
{/if}
Language: Svelte

Page: https://svelte.dev/docs#each
Syntactic sugar: {#await expression catch name}foo{/await}
Implementation: {#await expression}{:catch name}foo{/await}
Language: Svelte

Instruction: {#key value}
foo
{/key}
Page: https://svelte.dev/docs#each
Effect: destroy and recreate foo each time the value is changed
Language: Svelte
Returns: foo

Page: https://svelte.dev/docs#bind_element_property
Syntactic sugar: bind:value
Implementation: bind:value={value}
Language: Svelte
Where to use it: Component tag

Instruction: type="number" bind:value={var}
Page: https://svelte.dev/docs#bind_element_property
Effect: same as bind:value={var}, but if value is not a number, var is undefined
Language: Svelte

Page: https://svelte.dev/docs#Binding_select_value
Syntactic sugar: <option>foo</option>
Implementation: <option value="foo">foo</option>
Language: Svelte

Typ: action
Meaning: called with an html node and constructor argument.
Return the destructor that must be called when the component is removed from the dom
if there is an update method, call it on each new value of the node
Page: https://svelte.dev/docs#use_action
Language: Svelte
Implementation: (HTMLElement, any) => (() => void)
or
(HTMLElement, any) => {
  update: (any) => (),
  destroy: () => ()
}

Typ: A destructor for N
Meaning: A function that destroy N
Page: https://svelte.dev/docs#use_action
Language: Svelte
Variables: N a HTMLElement

Name: A transition of N
Definition: When N enter or leaves the DOM
Page: https://svelte.dev/docs#transition_fn
Variables: N a HTMLElement
Notation: Svelte

Page: https://svelte.dev/docs#transition_fnb
Syntactic sugar: <Foo args --css-property:value> content</foo>
Implementation: <div style="display:contents;  --css-property:value;"><Foo args> content</foo></div>
Language: Svelte

Question: How to use the variable in bind:this={component_instance}
Answer: check whether it is undefined before using it. or use it inside function body that are executed only when the instance is in the DOM
Page: https://svelte.dev/docs#bind_component

Question: Difference between let and bind
Answer: bind copy value from inner component to outer one. Let set a value in the inner component
Page: https://svelte.dev/docs#bind_component

Question: Order in which callback are called in the life cycle
Answer: beforeUpdate
Page: https://svelte.dev/docs#beforeUpdate
Answer2: onMount
Answer3: (afterUpdate, beforeUpdate)*
Answer4: onDestroy

Instruction: onDestroy(f)
Page: https://svelte.dev/docs#onDestroy
Effect: when the current component is unmounted, call f
Language: Svelte

Instruction: tick()
Page: https://svelte.dev/docs#tick
Language: Svelte
Returns: A promise resolves once any pending state changes have been applied, or in the next microtask if there are none.

Instruction: hasContext(key)
Page: https://svelte.dev/docs#tick
Language: Svelte
Returns: whether key belongs to the context

Instruction: getAllContexts()
Page: https://svelte.dev/docs#tick
Language: Svelte
Returns: Retrieves the whole context map that belongs to the closest parent component.
Where to use it: component initialization

Page: https://svelte.dev/docs#tick
Syntactic sugar: derived(base_store, f)
Language: Svelte
Where to use it: derived([base_store], ([store_arg], ...other_args)=>f(store_arg, ...other_args))

Page: https://svelte.dev/docs#tick
Syntactic sugar: derived([base_store_1, ..., base_store_n], f)
Implementation: derived([base_store_1, ..., base_store_n], f, undefined)
Language: Svelte
Variables: f taking n values and a setter: any=>void

Instruction: derived(
  [base_store_1,
  ...,
  base_store_n],
  f,
  initial_value
)
Page: https://svelte.dev/docs#tick
Effect: when one of the base_stores is changed, (including at initialization), it calls  f([$base_store_1, ..., $base_store_n], set), with set a method that takes as argument the new value of the store
Language: Svelte
Returns: a store, starting with initial value.
Variables: f taking n values and a setter: any=>void
Intuition: Allow for asynchronous update

Variable: target
Meaning: the root in which the element is rendered. HTMLElement or ShadowRoot
Page: https://svelte.dev/docs#tick
Context: creating a component from js
Language: Svelte

Variable: anchor
Meaning: A child of target to render the component immediately before
Page: https://svelte.dev/docs#tick
Context: creating a component from js
Language: Svelte

Variable: props
Meaning: An object of properties to supply to the component
Page: https://svelte.dev/docs#tick
Context: creating a component from js
Language: Svelte

Variable: context
Meaning: A Map of root-level context key-value pairs to supply to the component
Page: https://svelte.dev/docs#tick
Context: creating a component from js
Language: Svelte

Variable: intro
Meaning: whether it play transitions on initial render, rather than waiting for subsequent state changes
Page: https://svelte.dev/docs#tick
Context: creating a component from js
Language: Svelte

Variable: hydrate
Meaning: upgrade existing DOM (usually from server-side rendering) rather than creating new elements
Page: https://svelte.dev/docs#Creating_a_component
Context: creating a component from js
Language: Svelte
Assuming: compiled with the hydratable: true option

Instruction: component.$set(
  {var_1: value_1,
  ...,
  var_n: value_n}
)
Page: https://svelte.dev/docs#Creating_a_component
Effect: asynchronously set var_1 to value_1 .... var_n to value_n inside the component
Language: JS
Kind: component a Svelte component

Instruction: component.$on(
  'event',
  f
)
Page: https://svelte.dev/docs#Creating_a_component
Effect: when the component sent the event 'event', call f on it
Language: JS
Returns: A function that will remove the event listener when called.
Kind: component a Svelte component

Instruction: component.$destroy()
Page: https://svelte.dev/docs#Creating_a_component
Effect: remove the component from the DOM and triggers any onDestroy handlers
Language: JS
Kind: component a Svelte component

Instruction: component.prop
Page: https://svelte.dev/docs#Creating_a_component
Language: JS
Returns: the value assigned to prop in the component
Variables: component a Svelte component
Assuming: compiled with accessors: true

Instruction: component.prop = value
Page: https://svelte.dev/docs#Creating_a_component
Language: JS
Returns: set synchronously component's prop to value
Assuming: compiled with accessors: true
Kind: component a Svelte component

Name: a11y-accesskey
Definition: Warning if there is a accessKey
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-aria-attributes
Definition: Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example meta, html, script, style. This rule enforces that these DOM elements do not contain the aria-* props.
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-autofocus
Definition: Enforce that autofocus is not used on elements.
Page: https://svelte.dev/docs#Creating_a_component
Intuition: Autofocusing elements can cause usability issues for sighted and non-sighted users alike.

Name: a11y-distracting-elements
Definition: Enforces that no distracting elements are used.
Page: https://svelte.dev/docs#Creating_a_component
Intuition: Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.

Name: a11y-hidden
Definition: Elements of the DOM are hidden
Page: https://svelte.dev/docs#Creating_a_component
Intuition: Certain DOM elements are useful for screen reader navigation and should not be hidden.

Name: a11y-img-redundant-alt
Definition: Warn if the alt contains the words iamge, picture, photo
Page: https://svelte.dev/docs#Creating_a_component
Intuition: Screenreader already state it's an image

Name: a11y-invalid-attribute
Definition: Enforce that attributes important for accessibility have a valid value.
Page: https://svelte.dev/docs#Creating_a_component
Example: should not be empty, '#', or javascript:.
Applied to: href

Name: a11y-label-has-associated-control
Definition: Enforce that a label tag has a text label and an associated control.
Page: https://svelte.dev/docs#Creating_a_component
Applied to: href

Question: How to associate a label with a control
Answer: Wrapping a control in a label tag.
Page: https://svelte.dev/docs#Creating_a_component
Answer2: Adding for to a label and assigning it the ID of an input on the page.

Name: a11y-media-has-caption
Definition: Warn if the media has no caption
Page: https://svelte.dev/docs#Creating_a_component
Intuition: Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to alt text on an image when an image is unable to load).
The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the muted attribute.

Name: a11y-misplaced-role
Definition: This rule enforces that these DOM elements do not contain the role props.
Page: https://svelte.dev/docs#Creating_a_component
Intuition: Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example meta, html, script, style.

Name: a11y-misplaced-scope
Definition: The scope attribute should only be used on <th> elements.
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-missing-attribute
Definition: Enforce that attributes required for accessibility are present on an element. This includes the following checks:
- <a> should have an href (unless it's a fragment-defining tag)
- <area> should have alt, aria-label, or aria-labelledby
- <html> should have lang
- <iframe> should have title
- <img> should have alt
- <object> should have title, aria-label, or aria-labelledby
- <input type="image"> should have alt, aria-label, or aria-labelledby
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-missing-content
Definition: Enforce that heading elements (h1, h2, etc.) and anchors have content and that the content is accessible to screen readers
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-mouse-events-have-key-events
Definition: Enforce that on:mouseover and on:mouseout are accompanied by on:focus and on:blur, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-positive-tabindex
Definition: Avoid positive tabindex property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-structures
Definition: Enforce that certain DOM elements have the correct structure.
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-unknown-aria-attribute
Definition: Enforce that only known ARIA attributes are used. This is based on the WAI-ARIA States and Properties spec.
Page: https://svelte.dev/docs#Creating_a_component

Name: a11y-unknown-role
Definition: Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at WAI-ARIA site.
Page: https://svelte.dev/docs#Creating_a_component