Svelte reactive $state recursive classes

In my new learning project I have a recursive data structure that looks as follows: type CategoryType = { name: string; percent: number; percentages: { name: string; percent: number; }[]; amount?: number | undefined; } & { categories: CategoryType[]; } Categories might have an array of more Categories which might have other categories again and so on. Now I want to achieve that when I add a new category to the $state that a new category component gets rendered. This commit does not work as expected. Svelte detects when I add something to the root categories. If I add a category to a root category the view won't update as you can see: This is mainly due to the fact that I'm using classes in my state and these classes don't have reactive properties. After reading this article which I can highly recommend I know now that I can also use the $state rune within my class. All I need to do is to rename the existing file where I defined my category class to category.svelte.ts so that svelte detects I'm using some svelte magic in that file. Then I can start defining my properties as follows export class Category { name = $state(); percent = $state(0); categories = $state([]); percentages = $state([]); parent = $state(); ...

Mar 21, 2025 - 15:49

Svelte reactive $state recursive classes

In my new learning project I have a recursive data structure that looks as follows:

type CategoryType = {
    name: string;
    percent: number;
    percentages: {
        name: string;
        percent: number;
    }[];
    amount?: number | undefined;
} & {
    categories: CategoryType[];
}

Categories might have an array of more Categories which might have other categories again and so on.

Now I want to achieve that when I add a new category to the $state that a new category component gets rendered.

This commit does not work as expected. Svelte detects when I add something to the root categories. If I add a category to a root category the view won't update as you can see:

This is mainly due to the fact that I'm using classes in my state and these classes don't have reactive properties.
After reading this article which I can highly recommend I know now that I can also use the $state rune within my class.

All I need to do is to rename the existing file where I defined my category class to category.svelte.ts so that svelte detects I'm using some svelte magic in that file.
Then I can start defining my properties as follows

export class Category {
  name = $state<string>();
  percent = $state<number>(0);
  categories = $state<Category[]>([]);
  percentages = $state<PercentageSchemaType[]>([]);
  parent = $state<Category | undefined>();
...