Custom store logic in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a writable store in Svelte.

Svelte

import { [1] } from 'svelte/store';

const count = [1](0);

Drag options to blanks, or click blank then click option'

Awritable

Breadable

Cderived

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readable' which creates a store that cannot be updated.

Using 'derived' which creates a store based on others.

Using 'get' which is a function to read store values.

The writable function creates a store that can be updated and subscribed to.

2fill in blank

medium

Complete the code to define a custom store with a subscribe method.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  return { subscribe, [1] };
}

Drag options to blanks, or click blank then click option'

Aincrement

Bset

Cupdate

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Returning 'set' which is not defined in this custom store.

Returning 'update' which is not defined here.

Returning 'subscribe' twice.

The custom store returns a subscribe method and a custom increment method to change the value.

3fill in blank

hard

Fix the error in the increment method to notify subscribers.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  function increment() {
    count += 1;
    subscribers.forEach(run => run([1]));
  }

  return { subscribe, increment };
}

Drag options to blanks, or click blank then click option'

Aincrement

Bsubscribe

Ccount()

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Calling count as a function like count().

Passing the function name increment instead of the value.

Passing subscribe which is a function, not the value.

We call each subscriber function with the updated count value to notify them.

4fill in blank

hard

Fill both blanks to create a custom store with a reset method.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  function increment() {
    count += 1;
    subscribers.forEach(run => run([1]));
  }

  function reset() {
    count = [2];
    subscribers.forEach(run => run(count));
  }

  return { subscribe, increment, reset };
}

Drag options to blanks, or click blank then click option'

Acount

B0

C1

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong value like 1 or null for reset.

Passing a function name instead of the variable in increment.

The increment method sends the updated count. The reset method sets count to zero.

5fill in blank

hard

Fill all three blanks to create a custom store with subscribe, increment, and decrement methods.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = [];

  function subscribe(run) {
    subscribers.push(run);
    run(count);
    return () => {
      subscribers.splice(subscribers.indexOf(run), 1);
    };
  }

  function increment() {
    count += 1;
    subscribers.forEach(run => run([1]));
  }

  function decrement() {
    count -= 1;
    subscribers.forEach(run => run([2]));
  }

  function reset() {
    count = [3];
    subscribers.forEach(run => run(count));
  }

  return { subscribe, increment, decrement, reset };
}

Drag options to blanks, or click blank then click option'

Acount

B0

Attempts:

3 left

💡 Hint

Common Mistakes

Passing wrong variables or values to subscribers.

Setting reset to a non-zero value.

Both increment and decrement notify subscribers with the updated count. The reset method sets count to zero.

Practice

1. What is the main purpose of creating a custom store in Svelte?

easy

A. To disable reactivity in the app

B. To add custom methods and control how data updates and shares

C. To make the store work only on the server side

D. To replace the built-in writable store completely

Solution

1. Step 1: Understand what a custom store does

   A custom store extends the basic writable store by adding your own methods to control data updates and sharing.

2. Step 2: Compare options with this understanding

   Only "To add custom methods and control how data updates and shares" correctly describes this purpose. The other options misunderstand the role of custom stores: disabling reactivity, replacing the built-in writable store completely, or server-side only.

3. Final Answer:

   To add custom methods and control how data updates and shares -> Option B

4. Quick Check:

   Custom store purpose = Add custom methods [OK]

Hint: Custom stores add your own methods to writable stores [OK]

Common Mistakes:

• Thinking custom stores replace writable stores entirely
• Believing custom stores disable reactivity
• Assuming custom stores only run on the server

2. Which of the following is the correct way to create a custom store in Svelte?

easy

A. import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; }

B. import { readable } from 'svelte/store'; function createStore() { const { subscribe } = readable(0); return { subscribe, increment: () => {} }; }

C. import { writable } from 'svelte/store'; function createStore() { const { subscribe, set } = writable(0); return { subscribe, increment: () => set(n => n + 1) }; }

D. import { store } from 'svelte/store'; function createStore() { return { subscribe: () => {}, increment: () => {} }; }

Solution

1. Step 1: Check import and store creation

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; } correctly imports writable and uses update to change the value.

2. Step 2: Verify method usage

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, set } = writable(0); return { subscribe, increment: () => set(n => n + 1) }; } incorrectly uses set with a function argument, which is invalid. import { readable } from 'svelte/store'; function createStore() { const { subscribe } = readable(0); return { subscribe, increment: () => {} }; } uses readable which is read-only. import { store } from 'svelte/store'; function createStore() { return { subscribe: () => {}, increment: () => {} }; } imports a non-existent store.

3. Final Answer:

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; } -> Option A

4. Quick Check:

   Correct syntax uses writable and update() [OK]

Hint: Use writable and update() for custom store methods [OK]

Common Mistakes:

• Using set() with a function argument
• Using readable store when write access is needed
• Importing non-existent store types

3. Given this custom store code, what will be logged after calling counter.increment() twice?

import { writable } from 'svelte/store';
function createCounter() {
  const { subscribe, update } = writable(0);
  return {
    subscribe,
    increment: () => update(n => n + 1)
  };
}
const counter = createCounter();
counter.subscribe(value => console.log(value));
counter.increment();
counter.increment();

medium

A. 0, 1, 2

B. 1, 2

C. 0, 2

D. 2

Solution

1. Step 1: Understand subscription behavior

   Subscribing logs the current value immediately, so 0 is logged first.

2. Step 2: Trace increments and logs

   Each increment increases the value by 1 and triggers the subscriber, logging 1 then 2.

3. Final Answer:

   0, 1, 2 -> Option A

4. Quick Check:

   Subscription logs initial and updates [OK]

Hint: Subscription logs initial value immediately [OK]

Common Mistakes:

• Ignoring initial subscription log
• Assuming increments log only final value
• Confusing update with set behavior

4. Identify the error in this custom store code:

import { writable } from 'svelte/store';
function createTimer() {
  const { subscribe, set } = writable(0);
  let interval = null;
  return {
    subscribe,
    start: () => {
      interval = setInterval(() => set(n + 1), 1000);
    },
    stop: () => clearInterval(interval)
  };
}

medium

A. Not clearing interval on stop

B. Missing update method for incrementing

C. Using set(n + 1) without defining n

D. Incorrect import of writable store

Solution

1. Step 1: Check the setInterval callback

   The callback uses set(n + 1) but n is not defined anywhere in scope.

2. Step 2: Understand correct usage

   To increment the value, update should be used or the current value tracked. Using set with undefined n causes an error.

3. Final Answer:

   Using set(n + 1) without defining n -> Option C

4. Quick Check:

   Undefined variable in set() causes error [OK]

Hint: Use update() or track value before set() [OK]

Common Mistakes:

• Using set() with undefined variable
• Forgetting to clear intervals
• Confusing set and update methods

5. You want to create a custom store that holds a list of items and provides a method to add unique items only (no duplicates). Which implementation correctly achieves this?

hard

A. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => [...list, item]) }; }

B. import { writable } from 'svelte/store'; function createList() { const { subscribe, set } = writable([]); return { subscribe, add: (item) => set(list => list.includes(item) ? list : [...list, item]) }; }

C. import { readable } from 'svelte/store'; function createList() { const { subscribe } = readable([]); return { subscribe, add: (item) => {} }; }

D. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => list.includes(item) ? list : [...list, item]) }; }

Solution

1. Step 1: Check method to add unique items

   import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => list.includes(item) ? list : [...list, item]) }; } uses update and checks if the item exists before adding, preventing duplicates.

2. Step 2: Verify other options

   import { writable } from 'svelte/store'; function createList() { const { subscribe, set } = writable([]); return { subscribe, add: (item) => set(list => list.includes(item) ? list : [...list, item]) }; } incorrectly uses set with a function argument, which is invalid. import { readable } from 'svelte/store'; function createList() { const { subscribe } = readable([]); return { subscribe, add: (item) => {} }; } uses readable which is read-only. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => [...list, item]) }; } adds items without checking duplicates.

3. Final Answer:

   Custom store with update() and duplicate check -> Option D

4. Quick Check:

   Use update() and check includes() for uniqueness [OK]

Hint: Use update() with includes() check to avoid duplicates [OK]

Common Mistakes:

• Using set() with function argument
• Using readable store when write access needed
• Not checking for duplicates before adding