DEV Community: Florian Klenk

Svelte reactive $state recursive classes

Florian Klenk — Fri, 21 Mar 2025 14:19:52 +0000

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>();
...

Recursive components

Florian Klenk — Sat, 08 Mar 2025 21:59:52 +0000

Given the recursive structure of my project I have to render the Category multiple times calling itself.
Fortunately in svelte that is not a problem.
My component file is called category.svelte and the only thing I need to do is importing category.svelte from within category.svelte again. I named the component CategoryComponentRecursive as you can see below.

<script lang="ts">
  import * as Card from '$lib/components/ui/card';
  import CategoryComponentRecursive from './category.svelte';
  import type { Category } from '../schemas/category';
  let { category }: { category: Category } = $props();
</script>

<Card.Root>
  <Card.Header>
    <Card.Title>{category.name}</Card.Title>
  </Card.Header>
  <Card.Content>
    {#each category.categories as childCategory}
      <CategoryComponentRecursive category={childCategory} />
    {/each}
  </Card.Content>
</Card.Root>

I have a category component which is a shadcn svelte card and this calls itself if child categories where detected.
You can look up the category component in the repo.

Zod and Data modelling

Florian Klenk — Tue, 25 Feb 2025 20:13:17 +0000

My plan is to develop that app.

It has a hierarchic data structure.
Zod should validate the data. To model the data in zod we need to create a recursive structure as follows:

const baseCategorySchema = z.object({
  name: z.string().min(2).max(50),
  percent: z.number().gte(1),
  amount: z.number().optional(),
  percentages: z.array(percentageSchema)
});

type CategoryType = z.infer<typeof baseCategorySchema> & {
  categories: CategoryType[];
};

export const categorySchema: z.ZodType<CategoryType> = baseCategorySchema.extend({
  categories: z.array(z.lazy(() => categorySchema))
});

With z.lazy() I can access the categorySchema even though it's not yet initialised.

Now I can do the following:

export type CategorySchema = typeof categorySchema;

export type CategorySchemaType = z.infer<CategorySchema>;

const testData: CategorySchemaType = {
  amount: 1000,
  name: 'root',
  categories: [
    {
      name: 'risk part',
      percent: 80,
      categories: [
        {
          name: 'ETFs',
          percent: 70,
          categories: [],
          percentages: [
            { name: 'world', percent: 70 },
            { name: 'EM', percent: 30 }
          ]
        },
        {
          name: 'sustainable',
          percent: 20,
          categories: [],
          percentages: [{ name: 'ETF sustainable', percent: 100 }]
        },
        {
          name: 'commondities',
          percent: 10,
          categories: [],
          percentages: [{ name: 'ETF commodities', percent: 100 }]
        }
      ],
      percentages: []
    },
    {
      name: 'low risk',
      percent: 20,
      categories: [],
      percentages: [{ name: 'government bond', percent: 100 }]
    }
  ]
};

Svelte Shadcn Forms, Superforms, Formsnap, zod

Florian Klenk — Mon, 24 Feb 2025 20:55:15 +0000

I want to start with a simple form. svelte Shadcn has a whole lineup of tools which suppose to work together seamlessly.
After copying the example from the svelte-shadcn page the form didn't work at first. Mainly my fault. The filenames were not setup properly.

Superforms, Formsnap, zod

svelte-shadcn is using formsnap which is using superforms for handling the forms.
zod is being used for validation.

Gotcha: +page.server.ts vs +page.ts

There seems to be a difference between those files. I think +page.ts is more SPA and +page.server.ts supports more doing in the backend e.g. backend rendering.
Found this example in superforms docs.

Diving into svelte

Florian Klenk — Thu, 20 Feb 2025 18:30:04 +0000

Hi there,

I'm going to learn svelte now and like to invite all interested people to join me on my journey.
Ok lets get started.
At first I discovered that svelte has a nice interactive tutorial that lets you do learning by coding.
I want to test svelte on a specific app I thought about recently.

The App

So I thought about implementing a simple percentage calculator where I can manage categories and split them up into percentages.

The Stack (subject to changes)

svelte
sveltekit
svelte-shadcn
tailwind

I like the concept of shadcn. It's basically a low dependency lib ... no actually its not a lib. It's more a bunch of tailwind components.
Now the special thing about shadcn is that you add each component to your very own source code (instead of adding npm dependency) which gives you full ownership about it. It comes with a slick cli so I just had to execute a few commands.

What I did so far

Aside from creating a concept I've basically executed a series of commands.

To create the app

npx sv create percenty
(I had to answer a few questions, basically the answers were typescript, playwright, lint and prettier)

To add svelte-shadcn and tailwind (not in that order)

This step turned out trickier than expected given my lack of tailwind experience.
First tailwind needs to be added.

npx sv add tailwindcss

So far so good. I still had to do some stuff described in the official svelte tailwind installation guide.

Then I initialised svelte-shadcn with

npx shadcn-svelte@latest init

Adding a shadcn button failed ungracefully because I didn't have a tailwind.config.js.
I've added a basic config.

Then again the command for adding a shadcn button:

npx  shadcn-svelte@latest add button

Github repo

I've created a github repo which I'm going to update corresponding to blog posts.

Introducing remotify.place

Florian Klenk — Mon, 23 May 2022 09:58:25 +0000

Hi, I think it's time to properly introduce my side project which is open source and can be found on github.
I mentioned it in my articles and by now it has reached MVP status and can be tried out.

Motivation and purpose

Going to the office can be fun. You meet others in person. You can talk. Drink coffee. You can also do lot's of fun stuff.
At least where I was working there was always at least one gaming option available in the office. Most often it was a kicker table (I love it but I suck). Sometimes people had nerv guns and were chasing each other. Another time they had table tennis.
And this is where remotify comes into play.
Remotify is targeted is to catch the fun part of going to an office and provides it virtually.

Key features

display a room and people
let different users join a room using invitation links
users can walk the room by tapping somewhere
enable camera and microphone and display the picture as peoples heads
edit the room and draw walls anywhere
place desks or toilets somewhere
use desks
assign desks to users

It provides a virtual place where you can meet and have fun. It's a mix between a game and an online webRTC conference where you can see each other.

Use tilt to provide easy to setup development environments

Florian Klenk — Mon, 24 Jan 2022 11:58:18 +0000

You might know it. You just want to start working on an existing project be it in a company or on github. You just want to do the frontend part. Only the frontend which is usually super easy to setup. Just a quick npm install and npm start respectively yarn. But of course you need to run the whole project on your local machine to be independent.

Just install a few backend tools quick and easy ... so they said

So you get in touch with the backend folks and they tell you "yeah no problem, suuper easy, you just have to install this and that, then have this config and add this repository URL and install this database and apply that db dump and now it's working. Ah I forgot the message queue. Ah you are using MacOS, let's quickly recompile it and then have these certificates and..." and it goes on and on and on...
I have to say I'm a little frontend biased because of the complexity most backends have... sure frontend also has complexity but it's usually easy to setup.

I'd like to show you a tool which set's up kubernetes pods and services fast and also watches your changes during development. The target is to have all your projects run by tilt in a container even the frontend.

This will speed up the setup of new dev environments and fasten the onboarding process for new people.

There are a few prerequisites to install first.

Prerequisites

install docker (https://www.docker.com/get-started)
install minikube (https://minikube.sigs.k8s.io/docs/start/)
install kubctl (https://kubernetes.io/docs/tasks/tools/)
install helm chart (https://helm.sh/docs/intro/install/)
install tilt (https://docs.tilt.dev)

For macOS I recommend you use homebrew to install minikube, kubectl, helm and tilt.

Create a Tiltfile

In the root of your project you can now create a Tiltfile.

For remotify I've created the following.
Please note that the Tiltfile has to have this exact name in order to be detected by tilt.

Now let's examine whats going on.

define the minikube context that has to be used using allow_k8s_contexts
load helm remote extension
define a db password
setup each app

My project consists of postgresql db, hasura graphql, hasura migration, backend auth and the app frontend.

All of these projects are setup by almost the same schema.
First load the helm chart. Second define how the projects will be accessed using k8s_resource.

Note how all projects after postgres define resource_deps. The projects will wait for the defined dependencies until they are up and running.

For the app project I've set trigger mode to manual which means that it won't automatically update the project when a file change is detected. The frontend just takes too long to build. On my macbook it's 1 minute 30 seconds.

Run tilt

Now that you have defined your projects in the Tiltfile you can navigate to the respective directory using the command line and run tilt up.

Tilt gives you hints how to proceed. I'm always opening the browser using space since I really like the UI of tilt.

By clicking on the project name (for example app) you can get into a detail view where to console output is shown.

To switch back just click on the tilt logo in the upper left corner (took me a while to figure that out ☺️).

Fazit

So far I love tilt. The UI is quite cool. It does what it's meant to do. Refreshes the pod after an update is detected.
Only thing is for me that the frontend takes very long to bundle the file but that is only for me because I happen to have large dependencies.
The Tiltfile is easy to write, the docs are quite good.
Check out how everything works and maybe try setting up remotify using tilt.

If one could just setup the infrastructure on AWS using a simple Tiltfile ... that would be too good to be true 😊

Ways to inject variables into kubernetes deployment configs using hasura

Florian Klenk — Fri, 21 Jan 2022 07:54:04 +0000

In this post I want to discuss ways to inject variables into kubernetes deployment condigs.

Why do you need that?

Well it starts with version control. You certanly dont want to have sensitive information like passwords in your repository.
Or consider different system environments like dev, test, stage or prod. Each of them will have slightly different variables and settings.

Example

I'm going to use the hasura deployment config used for remotify in this example.

It has a few variables that have to be replaced depending to which environment the pod will be deployed:

$HASURA_GRAPHQL_DATABASE_URL
$HASURA_GRAPHQL_ADMIN_SECRET
$HASURA_GRAPHQL_JWT_SECRET

To have a complete example I also have the service config for hasura but there are no variables to inject here. Nevertheless I'm going to use it later with helm so here it is:

Inject variables using envsubst

The first and certainly easiest way is to create env files next to the deployment config and substitute them with the ones used in the deployment config. The folder structure in my case looks the following:

The .env file contains the following:

export HASURA_GRAPHQL_JWT_SECRET='{"type":"RS256", "key": "super secret key"}'
export HASURA_GRAPHQL_ADMIN_SECRET="super secret admin secret"
export HASURA_GRAPHQL_DATABASE_URL="postgres://postgres:testpassword@postgresql/remotify"

Then I navigate to the hasura directory using the command line and execute the following command:

source .env && envsubst < deployment.yaml | kubectl apply -f -

And done.

Create a helm chart

The next method wasn't quite so obvious to me. I was using helm charts before by executing a simple command e.g. for installing a postgres pod. I've never spend a second thought how it works. Under the hood it's very simple and offers exactly what I needed: Configurable kubernetes templates.

Let's get back to our example. I do have the kubernetes config for hasura. Now I want to inject the mentioned variables.

In order to do that with helm chart navigate to a directory where you plan to create the chart on the command line and execute helm create hasura.

Now what the command does is that it creates template files for your deployment.

For my example I don't need all of these files. So I'm going to delete all files in the template folder since I have my own configs already:

Next I copy my own hasura configs service.yaml and deployment.yaml into the templates folder.

Now I declare the variables that I need to inject in the values.yaml
Here is my example values yaml:

Helm uses mustache templates (I guess 🤥) so I cannot let the variables look like in the gist of the deployment yaml on the top. I have to change the deployment variables to the following format:

env:
- name: HASURA_GRAPHQL_DATABASE_URL
  value: "{{ .Values.deployment.databaseUrl }}"
- name: HASURA_GRAPHQL_ADMIN_SECRET
  value: "{{ .Values.deployment.adminSecret }}"
- name: HASURA_GRAPHQL_ENABLE_CONSOLE
  value: "true"
- name: HASURA_GRAPHQL_JWT_SECRET
  value: '{{ .Values.deployment.jwt }}'

Now I can test the chart using helm install hasura --dry-run --debug ./hasura and it will output the successfully replaced configs.
With helm you can also utilise the --set parameter so that you override the values in declared in values.yaml

Fazit

Even though the helm chart method takes a lot more space in this article (which is due to the images ☺️) it's not complicated and I really would always prefer the helm approach over the envsubst. Helm is no magic trick and pretty easy once understood.
Do you now other methods for replacing variables and which would you prefer?

How to create your project docs using storybook and host it with github pages

Florian Klenk — Tue, 18 Jan 2022 15:55:32 +0000

I'm a big fan of automatically generated documentation.
Today I want to show you storybook docs. Storybook is great because it let's you develop independently in a sandbox. No dependencies. No more waiting for the backend. Just the code. It is also a good documentation. It can show product managers which components are available for use so that they won't reinvent the wheel for each mockup.

All the mentioned code can be found in my remotify repository.

Setup storybook

That's easy: execute npx sb init in the project root.
Additionally I recommend to install storybook essentials (npm i -D @storybook/addon-essentials) which bundles all relevant addons.
Now you need to navigate to the .storybook/main.js file and add the essentials addon so that it looks similar to the following:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
  ],
  ...

Now execute npm run storybook and see the results in the browser. You should have a few pre-generated stories already.

Configure for TypeScript docs

As of version 6 of Storybook zero configuration is needed.
This is the way :)

The only thing you should taking care of is to declare the component in the default export.

export default {
  title: 'EditToolbar',
  decorators: [ComponentDecorator],
  component: EditToolbar, // <-- important

Configure storybook docs

If you don't have it already in your package.json add the following lines within the "scripts" part.

"storybook-docs": "start-storybook --docs --no-manager-cache",
"build-storybook-docs": "build-storybook --docs -o ./docs",

storybook-docs is for development in the browser (similar to npm run storybook)
build-storybook-docs is for building the docs. For getting github pages to work using this example I defined the output to <project_root>/docs folder

Now start storybook docs with npm run storybook-docs. The browser should open and you should see some stories.

Since I already have a few stories in my remotify project it looks this way for me:

Now run the second command to build the docs. Then commit the files and push them to github.

Activate Github pages

Open your github project in the browser and navigate to Settings -> Pages. There activate github pages and select your main branch and the docs folder you have previously generated and pushed.

Now you should be able to see the docs in your browser.
For remotify you can find the docs here.
I've also activated a custom domain right under the branch selection which I've named docs.remotify.place.
Happy storybuilding :)

My personal package bundler odyssey

Florian Klenk — Fri, 14 Jan 2022 08:56:34 +0000

From parcel

For my project I used parcel bundler version 1.x from the beginning and was quite happy with it.
Zero configuration was great and I'm a supporter of smaller more innovative projects that do something different than the big players (e.g. trello > jira, pixelmator > photoshop).

To rollup

One day I've got an issue that a react file couldn't get loaded because of an svg that was imported. So as usual I want to dig into the manual to solve the problem. Thing was that the manual wasn't there anymore and replaced with parcel v2.
Well ok I thought when they ditch the old version and manual v2 must be stable enough. So I did the switch and discovered that at this time peerDependencies couldn't get resolved.

Being kind of a burned child with webpack spending to many hours in configuration I still wasn't ready for it. So I switched to rollup and had some nice rollup config.

original repo file

Not quite zero configuration but I rather read code than configuration options. The build worked. Problem was that it took ages to build :(

To webpack

Long story short I've ended up using webpack and it wasn't so worse how I imagined in the first place.
I used create-react-app to setup an empty project. Then I did eject (of course). Afterwards I've copied package.json typescript config and all other relevant config files into my project. It works flawlessly and I had zero configuration (by not looking at it :).

Checkout remotify to see how it works.

Fazit

I wouldn't got that far to recommend a solution that works for everything. There are use cases for all bundlers and I still love the zero configuration approach (who doesn't?).
But for my project webpack currently works best.