Creating Concurrent Svelte Applications with Local State Management

Question

Creating Concurrent Svelte Applications with Local State Management

Note: Self-answer provided.

There are three primary methods in Svelte for passing data between components:

1. Utilizing Props

This involves passing data from a parent component to a child component.

Data transfer is one-way only.
Data can only be passed between immediate parent-child components.

2. Implementing and utilizing Context

Data can be passed from a parent to any nested child component.

Data flow is unidirectional.
Data cannot be passed outside the parent-child hierarchy.
Context must be established when the parent component is initialized.

3. Using Svelte Store

This allows for setting, updating, and subscribing to data from any file or component.

If multiple instances of the same app run, the store will retain only one value from either instance. storeVar.set() sets the value based on page load time. storeVar.update() uses the value from the last instance.

Purpose

The goal is to configure a Svelte app that detects multiple custom embed codes within the root index file and runs distinct instances of the app. Each embedded code includes additional data such as video size and aspect ratio. Consequently, the UI for each instance will adjust according to the attributes of the embedded code (passed as props to the App). Users may interact with the UI by clicking on different actions like screen sizes, which should trigger updates specific to that particular instance without affecting others.

Challenge

The current issues involve limitations in passing or updating values within components after initialization (issue 2.2, 2.3), or encountering difficulties where the store fails to retain values for every instance (3.1).

typescript svelte sveltekit svelte-component svelte-store

Answer 1

Answer №1

Solution (successfully tested)

To solve the issue, I constructed an array of objects containing the id and data. Instead of using set(), I utilized update(). Before adding new data to an instance in the array, I made sure to filter out any existing instances.

Code snippet (typescript)

package.json file:

"scripts": {
    "dev": "vite",
    ...
  },
  ...
  "dependencies": {
    "swiper": "^8.2.2"
  }

Index.html file:

  <body>
    <custom-element
      id="id_custom_element_987654321"
      videoid="987654321"
      size="7"
    ></custom-element>
    ...
</body>

Main.ts file:

const embedElements = document.querySelectorAll(
  "custom-element"
);
...
export default app;

Helpers.ts file:


// Svelte helpers
...

export const store.ts file:

type CommonCustomStoreFormatType<T> = Array<CustomStoreFormatType<T>>;
...

App.svelte file:

// passed props
  export let embedElementId: string;
  export let embedVideoid: string;
  setContext("contxt_videoid", embedVideoid);
...
</main>

Any other component (fetches store instance value):

  import { store_videoComments } from "./store";

  const videoId = getContext("contxt_videoId");
  ...

Output - logging $store_videoComments

[
    {
        "videoId": "987654321",
        "data": "[data1,data2,data3]"
    },
    {
        "videoId": "123456789",
        "data": "[data63,data74,data88]"
    }
]

The log displays that all app instance values are successfully stored. Feel free to share any issues you encounter with this method or suggest a better alternative in the comments section.

Note:

I aimed for minimal build size and hence refrained from including third-party packages to address the problem.
I did not utilize SvelteKit
Similar discussion can be found on this GitHub page

Answer 2

Solution (successfully tested)

To solve the issue, I constructed an array of objects containing the id and data. Instead of using set(), I utilized update(). Before adding new data to an instance in the array, I made sure to filter out any existing instances.

Code snippet (typescript)

package.json file:

"scripts": {
    "dev": "vite",
    ...
  },
  ...
  "dependencies": {
    "swiper": "^8.2.2"
  }

Index.html file:

  <body>
    <custom-element
      id="id_custom_element_987654321"
      videoid="987654321"
      size="7"
    ></custom-element>
    ...
</body>

Main.ts file:

const embedElements = document.querySelectorAll(
  "custom-element"
);
...
export default app;

Helpers.ts file:


// Svelte helpers
...

export const store.ts file:

type CommonCustomStoreFormatType<T> = Array<CustomStoreFormatType<T>>;
...

App.svelte file:

// passed props
  export let embedElementId: string;
  export let embedVideoid: string;
  setContext("contxt_videoid", embedVideoid);
...
</main>

Any other component (fetches store instance value):

  import { store_videoComments } from "./store";

  const videoId = getContext("contxt_videoId");
  ...

Output - logging $store_videoComments

[
    {
        "videoId": "987654321",
        "data": "[data1,data2,data3]"
    },
    {
        "videoId": "123456789",
        "data": "[data63,data74,data88]"
    }
]

The log displays that all app instance values are successfully stored. Feel free to share any issues you encounter with this method or suggest a better alternative in the comments section.

Note:

I aimed for minimal build size and hence refrained from including third-party packages to address the problem.
I did not utilize SvelteKit
Similar discussion can be found on this GitHub page

Creating Concurrent Svelte Applications with Local State Management

There are three primary methods in Svelte for passing data between components:

1. Utilizing Props

2. Implementing and utilizing Context

3. Using Svelte Store

Purpose

Challenge

Answer №1

Solution (successfully tested)

Code snippet (typescript)

Output - logging `$store_videoComments`

Similar questions

Struggling to import a React component for sharing purposes

Send a variable from a next.js middleware to an API request

Encounter issue with async function in produce using Immer

Performing a test on API GET Request with Playwright

How to update nested properties in Typescript using bracket notation

Strategies for effectively mocking an Angular service: During Karma Jasmine testing, ensure that the spy on service.getShipPhotos is expected to be called once. In the test, it should

Oops! Looks like an issue has popped up: using require() of an ES module is not supported when using recharts in combination with next.js

Drizzle ORM retrieve unique string that is not a database column

Importing TypeScript enums into a Vue or browser context can lead to errors or the need for additional dependencies

How can I use the Required utility type in TypeScript for nested properties?

Tips for successfully passing the dynamic state and setState to a function in typescript

Step-by-step guide for importing a JSON file in React typescript using Template literal

Utilizing the onscroll feature to trigger a function within a ScrollView

Error: An unexpected token < was caught in the TypeScript Express code

Learn how to utilize the "is" status in Postma within your code, even when this particular status is not included in the response

Unable to access global functions in Typescript

Using TypeScript, let's take a closer look at an example of Angular

Is there a way to automatically scroll to the bottom of a div when it first

There was an issue thrown during the afterAll function: Unable to access properties of undefined

Unable to resolve all parameters for the RouterUtilities class

Creating Concurrent Svelte Applications with Local State Management

There are three primary methods in Svelte for passing data between components:

1. Utilizing Props

2. Implementing and utilizing Context

3. Using Svelte Store

Purpose

Challenge

Answer №1

Solution (successfully tested)

Code snippet (typescript)

Output - logging $store_videoComments

Similar questions

Struggling to import a React component for sharing purposes

Send a variable from a next.js middleware to an API request

Encounter issue with async function in produce using Immer

Performing a test on API GET Request with Playwright

How to update nested properties in Typescript using bracket notation

Strategies for effectively mocking an Angular service: During Karma Jasmine testing, ensure that the spy on service.getShipPhotos is expected to be called once. In the test, it should

Oops! Looks like an issue has popped up: using require() of an ES module is not supported when using recharts in combination with next.js

Drizzle ORM retrieve unique string that is not a database column

Importing TypeScript enums into a Vue or browser context can lead to errors or the need for additional dependencies

How can I use the Required utility type in TypeScript for nested properties?

Tips for successfully passing the dynamic state and setState to a function in typescript

Step-by-step guide for importing a JSON file in React typescript using Template literal

Utilizing the onscroll feature to trigger a function within a ScrollView

Error: An unexpected token < was caught in the TypeScript Express code

Learn how to utilize the "is" status in Postma within your code, even when this particular status is not included in the response

Unable to access global functions in Typescript

Using TypeScript, let's take a closer look at an example of Angular

Is there a way to automatically scroll to the bottom of a div when it first

There was an issue thrown during the afterAll function: Unable to access properties of undefined

Unable to resolve all parameters for the RouterUtilities class

Output - logging `$store_videoComments`