DEV Community: kvetoslavnovak

Self-hosting SvelteKit app - the easy way

kvetoslavnovak — Sat, 03 Jan 2026 13:55:59 +0000

This is a follow-up to my post Why We Left Vercel and Switched to Self-Hosting.

What is Self-hosting?

SvelteKit is great. Almost every tutorial advises you to use Vercel to deploy and host your app. Vercel is the most convenient way for SvelteKit app, but this also comes with some cons. The main issue is that the pricing scheme may be unpredictable and with growing traffic, your expenses will go up as well.

The solution may be to "rent" a server (or rather a virtual server, aka a VPS - Virtual Private Server). In this case, you pay just a fixed payment. VPSs are actually super cheap and you can get a decent server for less than $5 monthly.

But it's up to you to set up the server.

Preparing your VPS

There are thousands of providers offering affordable VPS - local ones as well as global ones. The biggest ones are Hetzner, Hostinger, DigitalOcean, Vultr, or OVHcloud. It is up to you which one to choose.

VPS providers usually have nice, user-friendly interfaces where you can choose the location of the server and the operating system. I recommend a Linux operating system such as Ubuntu. During this process, it is better not to choose SSH key access, but rather access via username and password. After renting a VPS, you will be provided with an IP address and a password to be able to connect to your VPS. Generally, VPS providers won't give you a username; in that case, the username is "root" for a VPS with a Linux operating system or "Administrator" for a VPS with a Windows operating system.

On your computer, just open the terminal. In the terminal, type ssh your_username@your_vps_ip_address and press Enter.

ssh root@123.45.67.89

You will be prompted to enter the password you were given by the VPS provider. Type your VPS password (it won't show as you type) and press Enter.

You will be prompted about an unknown key and asked to accept it. Type yes and press Enter.

The authenticity of host '123.45.67.89 (123.45.67.89)' can't be established.
ED25519 key fingerprint is SHA256:NTw36MQjDxsHlxC/Xso5yKMlKJu93uYknRx2LEaqk7I.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

This will store the fingerprint of the VPS on your computer so that the next time you connect, it is going to validate that fingerprint and you should not see this prompt ever again.

And now you should be connected to your VPS. This means that in your terminal, you are actually logged in and using the VPS itself.

Dokploy

There are several tools that will help you to run applications on your VPS. The most popular ones are Coolify, Dokploy and Caprover. I recommend Dokploy.

The installation is super simple. When logged in to your VPS, type this and hit Enter in your terminal:

curl -sSL https://dokploy.com/install.sh | sh

If everything went okay, you will be given a link where the Dokploy app is available on your VPS. Ctrl-click the link and you will be redirected to the Dokploy registration page. In the browser address bar, you will see that you are on your own server and that you are using the HTTP protocol.

Provide the email and password you wish to use and hit Register.

Setup HTTPS Domain for Dokploy

I guess you would like to share your app with a proper domain name instead of an IP address. So, I assume you have bought a nice domain name. Go to the website of your domain provider and edit the DNS records like this:
Type: A
Host: dokployadmin
Value: [your VPS IP address]

You will have to wait a couple of minutes until the DNS record changes propagate.

Go back to your Dokploy user interface, go to Settings > Web Server > Server Domain and enter:

Domain: dokployadmin.[YOURDOMAINNAME e.g. superapp.com]
Let's Encrypt Email: [YOUR EMAIL]
Enable HTTPS: [Checked]
Certificate Provider: Let's Encrypt

You are providing your email here to be notified via email when your SSL certificate is about to expire.

Now, after a minute or so, if you go to the link https://dokployadmin.YOURDOMAINNAME (e.g., https://dokployadmin.superapp.com), you should see the Dokploy sign-in page running on HTTPS.

I would advise changing your Dokploy password now in the Account > Profile section. Before HTTPS was set up, there was a chance that someone listened in on your communication over HTTP.

Now we can also safely deploy our SvelteKit app and add environment variables (secerts) if these are needed.

SvelteKit app changes

Dokploy offers several build types to serve applications:

Dockerfile
Railpack
Nixpacks
Heroku Buildpacks
Paketo Buildpacks
Static

We will use Dockerfile.

There are just a couple of preparation steps for your SvelteKit app.

Add Dockerfile and .dockerignore files in the root of your application.

Your Dockerfile should look like this:

# ---------- Build stage ----------
FROM node:22-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . .
RUN npm run build

# ---------- Run stage ----------
FROM node:22-alpine AS run

WORKDIR /app

ENV NODE_ENV=production
ENV PORT=3000

COPY --from=build /app/package.json ./
COPY --from=build /app/build ./build
COPY --from=build /app/node_modules ./node_modules

EXPOSE 3000

CMD ["node", "build"]

Your .dockerignore should look like this:

# Git files
.git
.gitignore
.gitattributes

# Documentation
README.md

# IDE / editor files
.vscode
.editorconfig

# SvelteKit build/cache
.svelte-kit

# Node modules (we install them in Docker)
node_modules

# Local build output (Docker builds from source)
build

# Config files not needed in container
.prettierrc
.eslintrc.cjs
.graphqlrc
.npmrc

# Environment files (secrets)
**/.env

Install adapter-node

 npm install @sveltejs/adapter-node

Update your svelte.config.js file:

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
  }
};

export default config;

Check your .env file for all environment variables that ARE NOT prefixed with PUBLIC_
Go through all files of your SvelteKit app and update these variable imports and their usage, we won't import them directly but using env object.

// import { PRIVATE_PASSWORD, ..., ... } from '$env/dynamic/private';
import { env } from '$env/dynamic/private'; 
....
// usingsecret(PRIVATE_PASSWORD)
usingsecret(env.PRIVATE_PASSWORD)

Commit these changes to your Github repository.

SvelteKit running in Dockploy

In Dokploy, go to Home > Projects > +Create Project. Choose a name and description. Now we need to use + Create Service > Application. Provide your application name, app name and description. You should see that your empty application was created. Click on it.

As a provider, use GitHub; go through the intuitive process to connect this provider. You should see your GitHub account added. Click the install icon and select the repository you need to deploy to Dokploy.

In the Service section, you should now see that you can select your GitHub account, the repository and the branch. You can also enable the Trigger (automatic redeployment) on pushing changes to your branch (if you want to be super sure, you can also use the Webhook URL from the Dokploy Deployments section and paste it into the GitHub repository Settings > Webhooks).

Hit Save.

Lower down in the Build Type section, choose Dockerfile. In the Dockerfile input, type ./Dockerfile.

Hit Save.

In Domains in the top navigation, click Add Domain and fill in:

Host: www.[YOURDOMAINNAME e.g. superapp.com]
Path: /
Internal Path: /
Container Port: 3000
Enable HTTPS with Let's Encrypt: [Checked]

The last thing we have to do is to go to the Environment section in the top navigation. In Environment Settings as well as Build-time Secrets, add all environment variables that your SvelteKit app uses (which you have in .env file) like this:

PUBLIC_URL = https://........com
PRIVATE_PASSWORD = FDR885dafdafdsafda..........

Now you can go back to the General section of the navigation and click the Deploy button.

And your app should be live!

Detailed Dockploy tutorials

The Dokploy homepage lists several detailed video tutorials, although these are not SvelteKit specific. I especially recommend this one: https://www.youtube.com/watch?v=ELkPcuO5ebo&list=LL&index=4, which goes really deep.

Dokploy is a great tool. For example, you can install PostgreSQL, MySQL, MariaDB, MongoDB, or Redis there. Or you can choose from more than 70 pre-configured templates like Supabase, n8n, Java Runtime, PocketBase and many others.

Why We Left Vercel and Switched to Self-Hosting

kvetoslavnovak — Wed, 24 Dec 2025 13:29:33 +0000

There is a follow-up post Self-hosting SvelteKit app - the easy way

Humble Beginnings

At the beginning of 2025 we launched Eurlexa, a user-friendly way to access EU regulations.

Eurlexa is built with SvelteKit. The developer experience was and is great. Vercel seemed like the obvious choice where to deploy Eurlexa.

Until it wasn't.

We started on the Hobby Plan. As traffic grew we upgraded to the Pro Plan. However during the start of this summer we noticed an extreme increase in bots crawling Eurlexa. At first we thought this was great. The application uses SSR (Server-Side Rendering) and every page is prerendered, so we assumed our SEO was finally working. But then the bots went into overdrive. The ones to blame are especially AI bots.

AI Bots Unleashed

By the end of summer and during the autumn the bot traffic went crazy. We realized that Eurlexa is perfect "food" for AI scrapers. To give you the full picture: on Eurlexa, you can find more than 150,000 EU directives and regulations in all 24 official languages. Approximately an EU law has roughly five different versions thanks to amendments. Eurlexa also enables users to generate "track changes" server-side. Consequently the number of accessible pages is massive.

The default $20 for the Vercel Pro Plan was no longer enough. Because we wanted to keep Eurlexa free for our users we absorbed the extra traffic costs ourselves.

To be fair Vercel did add tools to fight this. During the summer of 2025, they introduced and consistently improved their Bot Management tools.

December Ends the Year (and our Vercel journey)

December brought extreme traffic reaching 100,000 mainly bots visits a day. But what hit us hardest was Vercel’s pricing model. The new Fluid Compute model combined with the traffic surge stressing servers side functions duration led to an extreme increase in costs.

On the other hand I am incredibly thankful that Vercel also introduced the Spend Management tool. This tool allows developers to set a hard cost cap. If the cap was reached Eurlexa was paused.

The Spend Management tool literally saved us. We had fortunately set a limit of $40 in advance. When the bots went crazy we began increasing the spend cap by $10 increments. These caps weren't being hit over days, but in a matter of hours.

When our costs crossed $100 in a couple of days we decided it was time for a change. I am terrified to imagine what would have happened without that Spend Management tool; by Christmas a Vercel invoice would have been a very unwelcome gift.

VPS to the Rescue

We decided to buy a VPS. They are remarkably affordable. After checking out tools like Dokploy, Coolify, and Caprover. We chose Dokploy. The VPS setup was surprisingly easy.

Migrating the SvelteKit app was a bit more challenging. Ironically AI helped us write the Dockerfile and solve some issues (I guess IA scraped the solution somewhere). The most complicated part was figuring out how environment variables worked and changing how they are called within SvelteKit on VPS. But within just two days Eurlexa was running on our own VPS.

We’ve already learned that managing a VPS is a task in itself. The bots are still coming and we’ve already had to restart the app several times.

However we can sleep much better now. The worst-case scenario now is that our server goes down—but our costs remain fixed.
Not being vendor locked is a plus too.

Merry Christmas to everyone!

EU Forces Search Engines Like Google to Share Data

kvetoslavnovak — Fri, 10 Oct 2025 09:02:57 +0000

🧠💾 Big news for data geeks, AI engineers, and online data analytics — the EU just opened the door to real search engine data access.

On October 9, 2025, the EU published Regulation (EU) 2025/2050, a new law that implements the Digital Services Act (DSA) and defines how very large online platforms and search engines (like Google, Bing, etc.) must share data with researchers.

📘 Read the full regulation: https://www.eurlexa.com/act/en/32025R2050/present/text

This is the first time data analysts and researchers — and potentially startups collaborating with them — can legally access search and platform-level data under EU oversight.

💡 Why it matters

Until now, large-scale search data has been locked behind corporate APIs and NDAs. With this regulation, vetted access could enable:

AI model training on real-world user behavior (ethically and legally)
Search transparency tools — analyzing bias, misinformation, or ranking algorithms
Market insights for digital competition and innovation
Privacy-preserving data engineering solutions and new compliance tech

🚀 Opportunities ahead

This could be a massive opportunity for:

Data platform startups offering DSA-compliant research interfaces
Privacy & security tools enabling safe data sharing
Analytics frameworks for handling this scale of regulated access
Academic–industry collaborations that were previously impossible

Europe is effectively opening a new data economy layer — one focused on transparency, research, and accountability.

Lies about the European Accessibility Act

kvetoslavnovak — Sun, 15 Jun 2025 08:46:52 +0000

You might be scared of some recent articles and posts stating that on June 28, 2025 the European Accessibility Act aka EAA shall be applicable to all websites and software.

This is simply not true.

Read the article in matter for yourself Article 2 Scope

The true scope of the EAA
The EAA has very broad scope. From approaches to buildings, use of toilets and sanitary facilities to manufacturing and the EU declaration of conformity.

The EAA is a directive. This means there are no direct effects on EU citizens and businesses. EU member states adopt and publish the laws, regulations and administrative provisions necessary to comply with this Directive.

How EAA affects IT
The EAA applies to the following products placed on the market after 28 June 2025:

a) consumer general purpose computer hardware systems and operating systems for those hardware systems;
b) the following self-service terminals:
- i) payment terminals;
- ii) the following self-service terminals dedicated to the provision of services covered by this Directive:
  - automated teller machines;
  - ticketing machines;
  - check-in machines;
  - interactive self-service terminals providing information, excluding terminals installed as integrated parts of vehicles, aircrafts, ships or rolling stock;
c) consumer terminal equipment with interactive computing capability, used for electronic communications services;
d) consumer terminal equipment with interactive computing capability, used for accessing audiovisual media services; and
e) e-readers.

Without prejudice to Article 32, the EAA applies to the following services provided to consumers after 28 June 2025:

a) electronic communications services with the exception of transmission services used for the provision of machine-to-machine services;
b) services providing access to audiovisual media services;
c) the following elements of air, bus, rail and waterborne passenger transport services, except for urban, suburban and regional transport services for which only the elements under point v) apply:
- i) websites;
- ii) mobile device-based services including mobile applications;
- iii) electronic tickets and electronic ticketing services;
- iv) delivery of transport service information, including real-time travel information; this shall, with regard to information screens, be limited to interactive screens located within the territory of the Union; and
- v) interactive self-service terminals located within the territory of the Union, except those installed as integrated parts of vehicles, aircrafts, ships and rolling stock used in the provision of any part of such passenger transport services;
d) consumer banking services;
e) e-books and dedicated software; and
f) e-commerce services.

The EAA applies to answering emergency communications to the single European emergency number "112".

Conclusion
Are you air, bus, rail and waterborne passenger transport services provider?

Are you selling e-books and e-books dedicated software?

Are you a provider of e-commerce services? Do you maintain any paid subscription website or e-shop?

If so, this one piece of software, and only this one, is subject to the EAA. Note that the e-commerce services apply to the online sale.

In all other cases EAA does not apply to IT.

EU Fines Apple and Meta €700 Million for Breaching the DMA Regulation, Protects Developers' Right to Link Outside the App Store

kvetoslavnovak — Thu, 24 Apr 2025 15:52:11 +0000

On Apr 23, 2025 the European Commission found that Apple breached its anti-steering obligation under the Digital Markets Act (DMA), and that Meta breached the DMA obligation to give consumers the choice of a service that uses less of their personal data.

Therefore, the Commission has fined Apple and Meta with €500 million and €200 million respectively.

Non-compliance decision on Apple's steering terms

Under the DMA, app developers distributing their apps via Apple's App Store should be able to inform customers, free of charge, of alternative offers outside the App Store, steer them to those offers and allow them to make purchases.

This duty of the gatekeeper to allow developers to link users to alternative purchase options outside the gatekeeper's platform is set out in Article 5(4) of the DMA https://www.eurlexa.com/act/en/32022R1925/present/text#Article-5-Obligations-for-gatekeepers

The Commission found that Apple fails to comply with this obligation. Due to a number of restrictions imposed by Apple, app developers cannot fully benefit from the advantages of alternative distribution channels outside the App Store.

Similarly, consumers cannot fully benefit from alternative and cheaper offers as Apple prevents app developers from directly informing consumers of such offers.

Non-compliance decision on Meta's “consent or pay” model

Under the DMA, gatekeepers must seek users' consent for combining their personal data between services. Those users who do not consent must have access to a less personalised but equivalent alternative.

In November 2023, Meta introduced a binary Consent or Pay advertising model. Under this model, EU users of Facebook and Instagram had a choice between consenting to personal data combination for personalised advertising or paying a monthly subscription for an ad-free service.

The Commission found that this model is not compliant with the DMA, as it did not give users the required specific choice to opt for a service that uses less of their personal data but is otherwise equivalent to the ‘personalised ads' service. Meta's model also did not allow users to exercise their right to freely consent to the combination of their personal data.

The duty of the gatekeeper to provide users with a less personalized but equivalent alternative if they refuse data processing consent is set out in Article 5(2) of the DMA https://www.eurlexa.com/act/en/32022R1925/present/text#Article-5-Obligations-for-gatekeepers

EU Crypto Implementing Regulations Package Released

kvetoslavnovak — Fri, 14 Feb 2025 07:58:04 +0000

🚀 Important Update for Crypto Businesses in the EU 🇪🇺

If you're involved in crypto and your activities or business relate to the EU, you may find this useful:

The European Union has just published a significant package of implementing regulations. These cover key aspects of crypto-asset services, complaint handling, and regulatory procedures.

Here’s a breakdown of the newly released Commission Delegated Regulations under the Markets in Crypto-Assets Regulation (MiCA):

🔹 Conditions for the establishment and functioning of consultative supervisory colleges

Commission Delegated Regulation (EU) 2025/297

🔹 Methodology for estimating the number and value of transactions using asset-referenced and e-money tokens

Commission Delegated Regulation (EU) 2025/298

🔹 Continuity and regularity in the performance of crypto-asset services

Commission Delegated Regulation (EU) 2025/299

📌 If you're operating in the crypto space in the EU, it’s worth reviewing these regulations to stay compliant. 🚨

I guess the most significant one is the regulation on the approval of a crypto-asset white paper, as it directly impacts new token issuances and market transparency.

💬 What are your thoughts on these updates? Let’s discuss in the comments! 👇

ICT Security in EU - DORA Delegated Regulation on Oversight Was Published

kvetoslavnovak — Fri, 14 Feb 2025 07:33:52 +0000

Anyone into information and communication technology (ICT) security be aware that #DORA delegated Regulation 2025/295 on harmonisation of conditions enabling the conduct of the oversight activities was officialy published in EU on February 13, 2025.

The Regulation can be found here https://www.eurlexa.com/act/en/32025R0295/present/text

EU Drops the Hammer: MiCA Crypto Regulations Now in Full Force in 2025

kvetoslavnovak — Fri, 10 Jan 2025 09:43:12 +0000

Do you have or use crypto? Are you providing crypto services? If so, in 2025, you need to be very careful, especially if you or your clients or investors are from the European Union.

TLDR

As of January 2025, all crypto-asset service providers will need to begin applying for licenses to operate under MiCA in EU.

MiCA Latest Version

On December 30, 2024, the EU Crypto Regulation known as MiCA came into full effect. The full text of the latest version of MiCA can be found here:

https://www.eurlexa.com/act/en/32023R1114/present/text

Recent Changes

Interestingly, this is already the second version of MiCA. The initial text can be found here.

The main changes are:

The EU Commission has been given the power to supplement MiCA by adopting regulatory technical standards in certain areas.
Issuers, offerors, or persons seeking admission to trading are required to submit inside information to the European Single Access Point (expected to operate from 2030).

You can view the specific updates in detail with track changes mode here.

Objectives of MiCA

MiCA is a comprehensive framework designed to regulate crypto assets across the EU.

Unified Regulatory Framework: MiCA establishes a single set of rules applicable to all 27 EU member states, replacing the fragmented regulatory landscape that previously existed. So far, so good — you won’t need to study crypto rules for each individual EU member state.
Consumer Protection: MiCA introduces consumer protection measures, including transparency requirements for issuers of crypto-assets, and obligations for crypto-asset service providers (CASPs) to clearly communicate the risks associated with crypto investments. Given the many unfortunate stories from crypto customers, these protective measures are a much-needed step.
Market Integrity: MiCA aims to strengthen confidence in crypto markets by prohibiting market manipulation and insider trading. This is a fair addition, similar to regulations in traditional capital markets.

Key Provisions

Now comes the tricky part for crypto in the EU.

Licensing Requirements: All CASPs must obtain authorization from national competent authorities to operate within the EU. This includes having at least one director based in the EU and maintaining a registered office there. Competent authorities are typically financial market regulators, not IT experts, making it difficult to predict how stringent the rulings will be. It’s also possible that we may see "licence shopping" — CASPs choosing the most favorable EU regulator. More details on application to provide crypto-asset services are here https://www.eurlexa.com/act/en/32023R1114/present/text#Article-62-Application-for-authorisation-as-a-crypto-asset-service-provider
Regulatory Oversight: The European Securities and Markets Authority (ESMA) will oversee significant CASPs — those with more than 15 million active users.
Issuers' Obligations: Issuers of asset-referenced tokens (ARTs) and electronic money tokens (EMTs) must prepare detailed whitepapers outlining their offerings, including risks and terms of investment. More details describing content and form of the crypto-asset white paper are here https://www.eurlexa.com/act/en/32023R1114/present/text#Article-6-Content-and-form-of-the-crypto-asset-white-paper
Anti-Money Laundering (AML): All CASPs are required to implement strong AML policies to ensure compliance with EU financial service standards. This was, of course, expected, especially in light of sanctions imposed on Russia.

Licensing and Transitional Period

As of January 1, 2025, all CASPs will need to begin applying for licenses to operate under MiCA in EU. Here are the key details regarding the transitional provisions and licensing process:

Transitional Period: Existing virtual asset service providers (VASPs) — the more commonly used term outside the EU for crypto providers — can continue to operate under their current national licenses until December 31, 2025. In some countries, this transitional period may be extended until July 1, 2026. This allows VASPs time to apply for a MiCA CASP license while still providing services legally.
License Application Submission: From January 1, 2025, companies must submit their applications for a MiCA CASP license. However, they could have begun preparing and submitting applications as early as April 22, 2024, for pre-examination by local authorities, although formal authorization cannot be granted until MiCA comes into effect on December 30, 2024.
Application Process: Submitting a license application is necessary but not sufficient on its own. The application must be complete and meet all regulatory requirements. The review process typically takes around 40 working days, but it can take longer if additional information is requested or if the application is complex.
Continued Operation During Application: While existing VASPs can operate under their current licenses during the transition period, they must ensure that they submit their CASP license applications before the end of this period to avoid interruptions in service.

In summary, existing providers have until the end of 2025 to transition to a MiCA CASP license while continuing their operations, provided they apply for the new license in a timely manner.

Implementing Regulations

Welcome to the EU bureaucracy! Below is a comprehensive list of all EU regulations that supplement or implement MiCA:

Conclusion

In summary, MiCA aims to create one transparent environment for crypto assets within the EU. As the regulation comes into full effect in 2025, it will significantly shape how crypto-asset service providers operate in Europe, hopefully fostering innovation while ensuring accountability within the market.

Disclosure: I am a member of eurlexa team. On Eurlexa you can access and search EU regulations and directives with ease. Eurlexa is a mobile-optimized, user-friendly alternative to EU offical and rather cumbersome EUR-Lex.

🇪🇺 8 EU Regulations Every Developer Must Know ⚖️💻

kvetoslavnovak — Thu, 12 Dec 2024 15:09:21 +0000

Recently, I was involved in coverage of specific rules and regulations that web pages or applications in the EU must adhere to. I thought it might be interesting for others as well to know the most important EU legal rules for IT and web developers.

Sometimes these Directives and Regulations sets only the basic framework and have many implementing technical regulations as you can learn bellow.

The most important EU regulations and directives that may affect development are:

Directive on Privacy and Electronic Communications
General Data Protection Regulation
Artificial Intelligence Act
Digital Services Act
Digital Markets Act
Cyber Resilience Act
Directive on Measures for a High Common Level of Cybersecurity
Regulation on Digital Operational Resilience

Directive on Privacy and Electronic Communications

Current consolidated version: Cookie Directive
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Directive 2002/58/EC of the European Parliament and of the Council of 12 July 2002 concerning the processing of personal data and the protection of privacy in the electronic communications sector (Directive on privacy and electronic communications)
Also known as: Cookie Directive, ePrivacy Directive
Who should be concerned?
- Any service that uses cookies (other than strictly necessary cookies) or similar tracking technologies, and companies providing electronic communications services
Caveats:
- Cookies other than strictly necessary ones stored on a user’s device require the user's consent

General Data Protection Regulation

Current consolidated version: GDPR
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)
Also known as: GDPR, Data Protection Regulation
Who should be concerned?
- Anyone who collects or processes personal data, regardless of their form, size, or sector
Caveats:
- Cases when you send personal data outside the EU (this may include the full user IP address to Google, Vercel, etc.)

Artificial Intelligence Act

Current consolidated version: AI Act
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Regulation (EU) 2024/1689 of the European Parliament and of the Council of 13 June 2024 laying down harmonised rules on artificial intelligence and amending Regulations (EC) No 300/2008, (EU) No 167/2013, (EU) No 168/2013, (EU) 2018/858, (EU) 2018/1139 and (EU) 2019/2144 and Directives 2014/90/EU, (EU) 2016/797 and (EU) 2020/1828 (Artificial Intelligence Act)
Also known as: AI Act, Artificial Intelligence Act
Who should be concerned?
- Developers or providers of AI systems, especially those classified as high-risk or unacceptable risk
- Companies across various sectors that utilize AI technologies for decision-making, customer interaction, or operational efficiency
Caveats:
- Severe penalties for non-compliance, including fines up to €35 million or 7% of global annual turnover

Digital Services Act

Current consolidated version: DSA
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Regulation (EU) 2022/2065 of the European Parliament and of the Council of 19 October 2022 on a Single Market For Digital Services and amending Directive 2000/31/EC (Digital Services Act)
Also known as: DSA, DSA Regulation
Who should be concerned?
- Online platforms and very large online platforms (VLOPs)
Caveats:
- FAANG (Facebook, Amazon, Apple, Netflix, Google) or MAMAA (Meta, Apple, Microsoft, Amazon, Alphabet)

Digital Markets Act

Current consolidated version: DMA
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Regulation (EU) 2022/1925 of the European Parliament and of the Council of 14 September 2022 on contestable and fair markets in the digital sector and amending Directives (EU) 2019/1937 and (EU) 2020/1828 (Digital Markets Act)
Also known as: DMA, DMA Regulation
Who should be concerned?
- Gatekeeper platforms
Caveats:
- Alphabet (Google), Amazon, Apple, ByteDance (TikTok), Meta (Facebook) and Microsoft

Cyber Resilience Act

Current consolidated version: CRA
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Regulation (EU) 2024/2847 of the European Parliament and of the Council of 23 October 2024 on horizontal cybersecurity requirements for products with digital elements and amending Regulations (EU) No 168/2013 and (EU) 2019/1020 and Directive (EU) 2020/1828 (Cyber Resilience Act)
Also known as: CRA, CRA Directive
Who should be concerned?
- manufacturers, importers and distributors of products with digital elements having data connection to a device or network
Caveats:
- Organizations involved in developing open-source software intended for commercial use must implement cybersecurity policies and procedures as well

Directive on Measures for a High Common Level of Cybersecurity

Current consolidated version: NIS 2
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Directive (EU) 2022/2555 of the European Parliament and of the Council of 14 December 2022 on measures for a high common level of cybersecurity across the Union, amending Regulation (EU) No 910/2014 and Directive (EU) 2018/1972, and repealing Directive (EU) 2016/1148 (NIS 2 Directive)
Also known as: NIS 2, NIS 2 Directive
Who should be concerned?
- Companies in essential sectors such as energy, transport, healthcare, cloud computing services, internet service providers (ISPs), financial services, food production and distribution, chemicals production
Caveats:
- Organizations must report significant incidents not only to national authorities but also to affected service recipients without undue delay
- entities are required to assess the cybersecurity posture of their suppliers

Regulation on Digital Operational Resilience

Current consolidated version: DORA
Implementing regulations: link
Judicial precedents: link
Amendments and corrections: link
Full title: Regulation (EU) 2022/2554 of the European Parliament and of the Council of 14 December 2022 on digital operational resilience for the financial sector and amending Regulations (EC) No 1060/2009, (EU) No 648/2012, (EU) No 600/2014, (EU) No 909/2014 and (EU) 2016/1011
Also known as: DORA, DORA Regulation
Who should be concerned?
- Financial Institutions and their IT services providers
Caveats:
- Financial institutions must establish rigorous oversight mechanisms and ensure that their vendors comply with DORA
- Financial institutions have to report their key IT vendros to regulators

So, if you are asked to deliver IT services to a financial institution in the EU, and the project includes AI models for customers' payment terminals data, including an accompanying web app and phone app, as well as servers and database hosted outside of the EU, God bless you.

PostgreSQL Full Text Search Rank by Position

kvetoslavnovak — Sat, 30 Nov 2024 10:17:07 +0000

Recently, I encountered a problem with full-text search. I am using this feature in my search input, where the backend sends hints of possible matches as you type. The backend database is PostgreSQL. I needed the hints to be ranked by the position of the searched term in the text.

So if you search for "Star Wars" title you will get "Star Wars" post first instead of "How Star Wars 7- 9 changed the world of Star Wars (a fun made documentary about Star Wars)" which may have higher ranking as the term is there 3 times.

Full Text Search in PostgreSQL

Full-text search in PostgreSQL can be achieved quite easily. There are two main tools to use:

tsvector - represents a searchable document.
tsquery - represents the search query to perform against a document.

Let’s say we want to search the titles of our blog posts. To make them searchable, we can use the following query:

SELECT 
id, 
title 
FROM blogposts
WHERE to_tsquery('JavaScript') @@ to_tsvector(posts.title);

In this case, we are converting the post titles to a tsvector dynamically with every search. However, this transformation takes some time. A better approach is to perform this transformation in advance in the database and also store it as an indexes for the titles for faster search.

Lets create a new collumn of vectors of titles and also index this new column:

ALTER TABLE blogposts ADD COLUMN search_vector tsvector;
UPDATE blogposts SET search_vector = (to_tsvector(posts.title));
CREATE INDEX titles_fts_idx ON blogposts USING gin(search_vector);

Now try to search the term "JavaScript"

SELECT 
id, 
title
FROM blogposts
WHERE to_tsquery('JavaScript') @@ search_vector;

You may also make indexes from ts vectors directly on titles column like this:

CREATE INDEX titles_fts_idx ON blogposts USING GIN (to_tsvector(posts.title));

and use the search like this:

SELECT 
id, 
title
FROM blogposts
WHERE to_tsquery('JavaScript') @@ posts.title;

Now, the full-text search will be blazingly fast, completing in milliseconds.

Ranking the Results

PostgreSQL provides the ts_rank feature, which allows you to score search results and order them based on their ranking. PostgreSQL supports the following ranking options:

0 (the default) ignores the document length
1 divides the rank by 1 + the logarithm of the document length
2 divides the rank by the document length
4 divides the rank by the mean harmonic distance between extents (this is implemented only by ts_rank_cd)
8 divides the rank by the number of unique words in document
16 divides the rank by 1 + the logarithm of the number of unique words in document
32 divides the rank by itself + 1

You can use the ts_rank like this:

SELECT
    ...
ts_rank(search_vector, to_tsquery('JavaScript'), 0) as rank_title
    ...
ORDER BY rank_title DESC NULLS LAST

However, there is no built-in ranking option based on the position of the search term within the string (i.e. title column).

POSITION to the rescue

Fortunatelly there is POSITION function in PostgreSQL. The PostgreSQL POSITION function is used to find the location of a substring within a given string. In our case we can use it like this

...
ts_rank(search_vector, to_tsquery('JavaScript'), 2) + (1.0 / NULLIF(POSITION('JavaScript' IN posts.title), 0) + 0.0001)  as rank
    ...
ORDER BY rank_title DESC NULLS LAST

ts_rank uses normalization integer 2 because 2 divides the rank by the document length
Magic number + 0.0001 is to avoid dividing by the 0 because POSTION function counts from 1 not 0 and returns 0 if the string is not found.

Final code may look like this:

SELECT 
id, 
title,
ts_rank(search_vector, to_tsquery('JavaScript'), 0) as rank_title
FROM blogposts
WHERE to_tsquery('JavaScript') @@ search_vector
ORDER BY rank_title DESC NULLS LAST;

Searching for more terms

One caveat has to be mentioned if you search for more terms at once (like JavaScript and TypeScript).

The arguments for the to_tsquery function may be used with a big fleibility, including logical operators etc. POSITION function on the other hand is "just" a substring in string.

Real World Example

Here is my example from real world endpoint in SvelteKit web application which uses postgres (sql) npm library:

import sql from '../../../utils/sql.js'

export async function POST({request, locals}) {
const {input: searchTerm, limit}  = await request.json()
let queryTerm = searchTerm.split(' ').map(word => `'${word}'`).join(' & ');

let lang = locals.searchingLang
let fts = `fts_${lang}`

if the string is not found 
    let fts_response = await sql `SELECT 
    id, 
    COALESCE(title->>${lang}, title->>'en') as title,
    ts_rank(${ sql(fts)}, ${queryTerm}, 2) + (1.0 / NULLIF(POSITION(${ searchTerm } IN COALESCE(title->>${lang}, title->>'en')), 0) + 0.0001)  as rank
    FROM notices 
    WHERE ${ sql(fts) } @@ to_tsquery('simple', ${queryTerm})
    ORDER BY rank DESC NULLS LAST
    LIMIT ${limit};`

 return  new Response(
      JSON.stringify(fts_response)
    )
}

Here are the links to the documentatio in matter:

"Helper" Varaibles in Svelte 5

kvetoslavnovak — Fri, 08 Nov 2024 15:03:18 +0000

Bye Bye Magical Svelte 4 `$:`

Following my recent post Experiences and Caveats of Svelte 5 Migration I would like to highlight some techniques and change of mindset when going from Svelte 4 to Svelte 5.

Svelte 4 uses "magical" $: and let and does all the heavy lifting to make code reactive. We also embraced varaibles reassignment like

<script>
let arr = [1, 2, 3]
let value = 4

arr = [...arr, value]
</script>

instead of methods updating/mutating varaibles like push etc.

I was quite suprprised to re-learn good old JS patterns using Svelte 5.

No Need to Be Reactive All the Time

And I was also probably quite spoiled by let in Svelte 4 , no reasoning about reactivity, it was included if needed. But not all varaibles have to be reactive. Also non reactive variables may be updated in reactive or even "traditional mutating code". The real need for reactive variable is when we use it in UI (when this varaible is rendered in html/page and we need it to update later).

You may encounter erros in Svelte 5 like Cannot assign to derived state, State referenced in its own scope will never update. Did you mean to reference it inside a closure? or derived_references_self\nA derived value cannot reference itself recursively if using Svelte 4 coding style.

Example of Helper Variables

Take a look at this example of Svelte 4 style of code:

<script>
    let value;

    let derivedArr = []
    $: if (value) {
        derivedArr = [...derivedArr, value]
    }

    function random () {
        value = Math.floor(1 + Math.random() * 10)
    }
</script>

<button on:click={random}>Generate Random Value</button>
<p>value: {value}</p>
<p>derivedArr: {derivedArr}</p>

DEMO

The random function works as some kind of simulation of server response sending as a result of a search query, on the client we are accumulating the results, so it work like a "Load more" button. Hereby random function should not be changed. We have two reactive variables and Svelte 4 solves the updates automatically. We only needed to remember that the right way is by reassigning the variable.

In Svelte 5 we should think a little how to achieve the same result. The two variables we are using are not enough, we need one more, the helper one.

One way is to use a $derived rune.

<script>
    let value = $state();


                  let helperArr = [];   
let derivedArr =  $derived.by(() => {
                   if (value) {
                     helperArr.push(value);
                     return helperArr;
                   }
                  });

    function random () {
        value = Math.floor(1 + Math.random() * 10)
    }
</script>

<button onclick={random}>Generate Random Value</button>
<p>value: {value}</p>
<p>derivedArr: {derivedArr}</p>

DEMO

I am trying visually emphasize which parts of the code are relevant and somehow "wrapped" from Svelte 4 into Svelte 5 mental model. helperArr is declared outside of a$derived.by() function scope not to be reseted every time $derived.by() reruns (which is when reactive variables inside $derived updates). If you know easier way to do this let me know.

There is also an $effect() rune way to achieve the same with untrack trick. It might look even simplier but we should avoid effects if possible (mainly Svetlet 5 effects do not run on the server/SSR).

<script>
    import { untrack } from 'svelte';

    let value = $state();
    let derivedArr = $state([]);

    $effect.pre(() => {
        if (value)
            untrack(() => derivedArr.push(value))
    });

    function random () {
        value = Math.floor(1 + Math.random() * 10)
    }
</script>

<button onclick={random}>Generate Random Value</button>
<p>value: {value}</p>
<p>derivedArr: {derivedArr}</p>

DEMO

Real Life Example

This is the example how I tried to migrate quite stright forward Svelte 4 page to Svelte 5. It took me a while to rethink the code. This page works as a posts search with a "Load More" functionality (adding results or pagging if a user does not have JS):

Svelte 4

<script>
    import Icon from '../components/Icon.svelte';
    import { enhance } from '$app/forms';
    import { tick } from 'svelte';

    export let form;
    export let searchingLang;
    export let l;

    let results = [];
    let previousSearch = '';
    let searchTerm;
    let skip;

    $: if (!!form && form?.thereIsMore) {
        searchTerm = form.searchTerm;
        skip = Number(form?.skip) + 20;
    }

    $: if (!!form?.searchResultFromAction) {
        if (previousSearch == form.searchTerm && form.thereWasMore) {
            results = [...results, ...form.searchResultFromAction];
        } else {
            results = [...form.searchResultFromAction];
            previousSearch = form.searchTerm;
        }
    }

    async function intoView(el) {
        await tick();
        if (el.attributes.index.nodeValue == skip - 20 && skip != undefined) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    }
</script>

{#if results.length}
    <ol>
        {#each results as item, index}
            <li use:intoView {index} aria-posinset={index}>
                <!-- users without javascript have calculated order of results within paggination and css disables standard ol ul numbering -->
                <!-- users with javascript have standard ol ul numbering and loading more feature -->
                <noscript>{Number(index) + 1 + Number(form?.skip)}. </noscript>
                <a href="/post/{searchingLang}/{item.id}/content">{item.title}</a>
            </li>
        {/each}
    </ol>

    {#if form?.thereIsMore}
        <form
            method="POST"
            action="?/search&skip={skip}&thereWasMore={form?.thereIsMore}"
            use:enhance
            autocomplete="off"
        >
            <label>
                <!-- Probably we do not need to bind the value as this is hidden input -->
                <!-- <input name="searchTerm" type="hidden" bind:value={searchTerm} /> -->
                <input name="searchTerm" type="hidden" value={searchTerm} />
            </label>
            <button aria-label="Button to load more search results" class="outline">
                <Icon name="loadMore" />
            </button>
        </form>
    {/if}
{:else if form?.searchResultFromAction.length == 0}
    {l.noResultsFound}
{/if}

<style>
    @media (scripting: none) {
        /* users without javascript have calculated order of results within paggination and css disables standard ol ul numbering
users with javascript have standard ol ul numbering and loading more feature */
        ol {
            list-style-type: none;
        }
    }
</style>

Svelte 5

<script>
    import Icon from '../components/Icon.svelte';
    import { enhance } from '$app/forms';
    import { tick } from 'svelte';

    let { form, searchingLang, l } = $props();

    let previousSearch = '';
    let skip = $derived.by(() => {
        if (!!form && form?.thereIsMore) {
            return Number(form?.skip) + 20;
        }
    });

    let helperResultsArr = [];
    let results = $derived.by(() => {
        if (!!form?.searchResultFromAction) {
            if (previousSearch == form.searchTerm && form.thereWasMore) {
                helperResultsArr.push(...form.searchResultFromAction);
                return helperResultsArr;
            } else {
                helperResultsArr = [];
                helperResultsArr.push(...form.searchResultFromAction);
                previousSearch = form.searchTerm;
                return helperResultsArr;
            }
        } else return [];
    });

    async function intoView(el) {
        await tick();
        if (el.attributes.index.nodeValue == skip - 20 && skip != undefined) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    }
</script>

{#if results.length}
    <ol>
        {#each results as item, index}
            <li use:intoView {index} aria-posinset={index}>
                <!-- users without javascript have calculated order of results within paggination and css disables standard ol ul numbering -->
                <!-- users with javascript have standard ol ul numbering and loading more feature -->
                <noscript>{Number(index) + 1 + Number(form?.skip)}. </noscript>
                <a href="/post/{searchingLang}/{item.id}/content">{item.title}</a>
            </li>
        {/each}
    </ol>

    {#if form?.thereIsMore}
        <form
            method="POST"
            action="?/search&skip={skip}&thereWasMore={form?.thereIsMore}"
            use:enhance
            autocomplete="off"
        >
            <label>
                <input name="searchTerm" type="hidden" value={form.searchTerm} />
            </label>
            <button aria-label="Button to load more search results" class="outline">
                <Icon name="loadMore" />
            </button>
        </form>
    {/if}
{:else if form?.searchResultFromAction.length == 0}
    {l.noResultsFound}
{/if}

<style>
    @media (scripting: none) {
        /* users without javascript have calculated order of results within paggination and css disables standard ol ul numbering
users with javascript have standard ol ul numbering and loading more feature */
        ol {
            list-style-type: none;
        }
    }
</style>

That is all for now.

PS: Do not hesitate to let me know if you would do the migration in a different way.

Experiences and Caveats of Svelte 5 Migration

kvetoslavnovak — Sun, 03 Nov 2024 10:39:27 +0000

I have recently updated a rather complex web application. The application has features like auth, Stripe, i18n, dark/light mode, PWA, etc. Overall, it has around 30 pages and components, with almost no third-party npm packages.

I would like to point out what I found quite challenging when migrating the app to Svelte 5.

Auto-Migration Script Hammer

The auto-migration script provided by Svelte can do the job for you with this "one-liner" command in the terminal npx sv migrate svelte-5 (after you do all the necessary updates and installs: "@sveltejs/vite-plugin-svelte": "^4.0.0" and "svelte": "^5"). But I do not recommend this "hammer" approach.

Go file by file, component by component with Ctrl + Shift + P (Windows/Linux) / Shift + Command + P (Mac) and use the Migrate Component to Svelte 5 Syntax command in the VS Code command palette instead. You will have more control that way.

Deprecated run() Surprise

The script cannot perform miracles. Upgrading reactive variable declarations to $state() is usually fine. However, the script may struggle to detect whether $: should be converted to $derived()/$derived.by(() => {}) or $effect(() => {}).

So, guess what? With the auto-migration script, you might end up with lots of run(() => {}).

For example imagine using something like this (this is a very simplified example from real life code just to highhlight the point):

<script>
...
   let notext = false;
   $: if (data.completeDoc == 'NoLangVersion') {
      notext = true;
   }
   $: if (data.completeDoc !== 'NoLangVersion') {
      notext = false;
   }
</script>

...
{#if notext}
   {data.userPrefferedLang.noTextWarning}
{:else}
...
{/if}
...

The auto-migration script will give you this:

<script>
    import { run } from 'svelte/legacy';
...
    let notext = $state(false);
    run(() => {
        if (data.completeDoc == 'NoLangVersion') {
            notext = true;
        }
    });
    run(() => {
        if (data.completeDoc !== 'NoLangVersion') {
            notext = false;
        }
    });
</script>

with a nice little warning that the run function is deprecated.

The better Svelte 5 code would be this I guess:

<script>
...
    let notext = $derived.by(() => {
        if (data.completeDoc == 'NoLangVersion') {
            return  true;
        }
        if (data.completeDoc !== 'NoLangVersion') {
            return false;
        }
    });
...
</script>

The reason is that the script cannot transform code to $derived.by(() => {}) easily, so it would use a more dirty approach with $effect(). But $effect() runs only client-side, so the script uses the deprecated run function instead.

Avoid $effect If You Can

Now we are getting to the most important takeaway. Which is $effect() running only client-side. So no $effect() on the server, for prerendering pages and SSR.

$effect() DOES NOT RUN ON THE SERVER!

This should be really emphasized in the Svelte 5 documentation.

Look at this two examples:

<script>
let a = 1
let b = 2

$: c = a + b
</script>

{c}  // server responds with c == 3

<script>
let a = $state(1)
let b = $state(2)
let c = $state(0)

$effect(() => {
  c = a + b
})
</script>

{c}  // server responds with c == 0

They are not the same. This causes a lot of challenges. The client will need to reevaluate the c variable when mounting the page. The page will look different when sent from the server and when finally DOM-rendered on the client (SSR, SEO, flicker issues, etc.).

So always try to use $derived() or $derived.by() over $effect(). It will save you lots of trouble.

It's quite the same story as when we were discouraged from using stores server side in SvelteKit.

$effect vs onMount() in SvelteKit

You might be tempted to replace your onMount() with $effect() thanks to the examples that were given during the arrival of Svelte 5. For the reasons already mentioned, I would discourage this for the time being. onMount is still a core Svelte lifecycle hook.

$bindable $props Surprise

The other nice surprise is that Svelte 5 takes care to have consistent variable values. If you pass a variable as a prop to a component and change this variable in the component later on, the script will try to solve this inconsistency using $bindable $prop. The parent should be notified about this change, so your app state is consistent.

Look at this example:

// parent svelte file
<script>
   import ComponentBinded from './ComponentBinded.svelte';
   import ComponentWithDerived from './ComponentWithDerived.svelte';
   let name = $state('John Wick');
</script>

<p>Name value in parent: {name}</p>

<ComponentBinded bind:name={name} />

<ComponentWithDerived {name} />

The auto-migration script will want you to use a component with binded value to ensure the parent may get the updated value back:

// ComponentBinded.svelte
<script>
   let { name = $bindable() } = $props();
   name = name.toUpperCase()
</script>

<p>
Name value in component with binded value: {name}
</p>

We are mutating the name varaible in this child component. So we are notifing the parent so. The parent will use this mutated value as well.

If you do not need the parent to reflect the mutated name value we can use quite simpler way as well, you guessed it, with $derived():

// ComponentWithDerived.svelte
<script>
   let { name } = $props();
   let upperCaseName = $derived(name.toUpperCase())
</script>

<p>
Name value in component with derived value: {upperCaseName}
</p>

But in this later case we are not mutating name variable in the component.

:global { } Block

A very nice feature that I found during migration was that we can use CSS :global with block now. Styling with :global is quite necessary if you want to style the HTML elements in @html, for example.

So instead of this:

...
<style>
    #blog :global(table) {
        width: 100%;
    }
    #blog :global(td) {
        text-align: left;
    }
    #blog :global(th) {
        font-weight: bolder;
        font-size: medium;
        text-align: center;
    }
</style>

you can use this:

...
<style>
   #blog :global {
    table {
        width: 100%;
    }
    td {
        text-align: left;
    }
    th {
        font-weight: bolder;
        font-size: medium;
        text-align: center;
    }
}
</style>

Style as a Prop in Components

In Svelte 4, if you wanted to provide a CSS class as a prop to a component, you would use {$$props.class}:

// Icons Component
<script>
   export let name;
   export let width = '1.5em';
   export let height = '1.5em';
   export let focusable = false;

   let icons = {
    user: {
    svg: `<path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    },
    user_logged: {
    svg: `<path fill="none" d="M0 0h24v24H0z"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    }
   };

   let displayIcon = icons[name];
</script>

<svg
    xmlns="http://www.w3.org/2000/svg"
    class={$$props.class}
    viewBox="0 0 24 24"
    fill="currentColor"
    {focusable}
    {width}
    {height}
>
   {@html displayIcon.svg}
</svg>

<style>
    ...
</style>

In Svelte 5 you may use class={className}:

<script>
   let {
    name,
    width = '1.5em',
    height = '1.5em',
    focusable = false,
    class: className = ''
    } = $props();

let icons = {
    user: {
    svg: `<path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    },
    user_logged: {
    svg: `<path fill="none" d="M0 0h24v24H0z"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    }
   };

   let displayIcon = icons[name];
</script>

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    class={className}
    {focusable}
    {width}
    {height}
>
    {@html displayIcon.svg}
</svg>

<style>
...
</style>

Possible Lighthouse Perfomance Drop

When I used the auto-merging script, I was shocked at how my app's performance dropped. With Svelte 4, I had nearly all 100%s. It was only after I manually migrated and carefully considered "how to" (mainly how to avoid $effect() if possible) when my Lighthouse scores were back in the green again. ~~And to be honest even after extensive tests the Lighthouse score for the mobile is still worse compared to Svelte 4 version of the app.~~

EDIT: Svelte 5 seem to have great performace now too. I have updated to the Svelte 5 latest version and it is now even a little bit faster than Svelte 4.

Final Words

It took longer to migrate to Svelte 5 than I had expected. I still have not pushed this new version to production, though. The updates to Svelte 5 are still coming in with quite high frequency.

I hope my experience may be useful to others.

DEV Community: kvetoslavnovak

Self-hosting SvelteKit app - the easy way

What is Self-hosting?

Preparing your VPS

Dokploy

Setup HTTPS Domain for Dokploy

SvelteKit app changes

SvelteKit running in Dockploy

Detailed Dockploy tutorials

Why We Left Vercel and Switched to Self-Hosting

Humble Beginnings

AI Bots Unleashed

December Ends the Year (and our Vercel journey)

VPS to the Rescue

EU Forces Search Engines Like Google to Share Data

💡 Why it matters

🚀 Opportunities ahead

Lies about the European Accessibility Act

EU Fines Apple and Meta €700 Million for Breaching the DMA Regulation, Protects Developers' Right to Link Outside the App Store

Non-compliance decision on Apple's steering terms

Non-compliance decision on Meta's “consent or pay” model

EU Crypto Implementing Regulations Package Released

🚀 Important Update for Crypto Businesses in the EU 🇪🇺

🔹 Handling of complaints related to asset-referenced tokens

🔹 Handling of complaints by crypto-asset service providers

🔹 Procedure for the approval of a crypto-asset white paper

🔹 Conditions for the establishment and functioning of consultative supervisory colleges

🔹 Methodology for estimating the number and value of transactions using asset-referenced and e-money tokens

🔹 Continuity and regularity in the performance of crypto-asset services

ICT Security in EU - DORA Delegated Regulation on Oversight Was Published

EU Drops the Hammer: MiCA Crypto Regulations Now in Full Force in 2025

TLDR

MiCA Latest Version

Recent Changes

Objectives of MiCA

Key Provisions

Licensing and Transitional Period

Implementing Regulations

Conclusion

🇪🇺 8 EU Regulations Every Developer Must Know ⚖️💻

Directive on Privacy and Electronic Communications

General Data Protection Regulation

Artificial Intelligence Act

Digital Services Act

Digital Markets Act

Cyber Resilience Act

Directive on Measures for a High Common Level of Cybersecurity

Regulation on Digital Operational Resilience

PostgreSQL Full Text Search Rank by Position

Full Text Search in PostgreSQL

Ranking the Results

POSITION to the rescue

Searching for more terms

Real World Example

"Helper" Varaibles in Svelte 5

Bye Bye Magical Svelte 4 $:

No Need to Be Reactive All the Time

Example of Helper Variables

Real Life Example

Experiences and Caveats of Svelte 5 Migration

Auto-Migration Script Hammer

Deprecated run() Surprise

Avoid $effect If You Can

$effect vs onMount() in SvelteKit

$bindable $props Surprise

:global { } Block

Style as a Prop in Components

Possible Lighthouse Perfomance Drop

Final Words

Bye Bye Magical Svelte 4 `$:`