svelte | Cybernetically enhanced web apps | Frontend Framework library

I am trying to build a docker image from a sample app I have created in Sveltekit.

I am using the @sveltejs/adapter-auto and have included both .js files for API calls and .svelte files in my routes folder.

Here is my Dockerfile (which builds fine, but might not be correct)

The following question is specific to SvelteKit.

I have a page that could potentially render a subset of various components based upon what the server determines from the request. But since the server is already going to determine what should/should not be displayed, I don't want to include any of the other components in the final bundle shipped to the client since the client will never need that code for that specific request.

To illustrate, in the example code below, if there is no error, I don't want the code for ErrorToast included in the bundle.

In a NORMAL Svelte project (no SvelteKit) the static files are in the public directory and when running npm run build (rollup -c) the src folder is compiled into public/build and the public folder can then be hosted somewhere.

I now switched (an already existing) Svelte project to Vite and the static files are still under public but when running npm run build (vite build), everything is bundled into the dist directory. So all the files in the public directory are actually copied and exist twice in the project. Which means when changing or adding something (which doesn't effect the app logic) the project needs to be rebuild before it can be redeployed.

Can this be changed via the configuration, that either all compiled files are added again to the public directory or that the static files reside directly inside dist and nothing is copied during the build process?

Edit: The project should still be able to be run in dev mode npm run dev (vite) with the assets being served

Maybe someone tried this before and is able to give me a hint. I have used normal svelte setup (mentioned in the main page) which scaffolds the app;

npx degit sveltejs/template my-svelte-project

I wanted to use vaadin web components in Svelte. I've installed it;

npm install @vaadin/vaadin

the code of main.ts:

In a Svelte component, I'm trying to access an object I set up in my rollup config file. My rollup.config.js file looks like this:

I am a beginner in both Svelte and Tailwind and want to avoid an XY-Problem, so here is my goal:

I generate rows of a table with an #each loop in Svelte. (6 values per row). I now want to conditionally color the background of this row based on one value (the battery charge).

My idea was to conditionally render different tags based on this value. Like this:

I am testing my SvelteKit site with Cypress. I sometimes experience flaky tests, similar to what has been described here: https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/. In short, Cypress sometimes finds and clicks a button before the event listeners are attached - as a result, the click goes nowhere. The proposed solution is to simply re-try clicking until the appropriate listeners have been attached. That works in my case as well. However, though I do understand why this can be an issue in the example given in the blog post (it's a large calendar modal), I find it hard to justify that this issue arises when using a simple Svelte button.

Here is a simple example of a button that reveals some content when clicked:

If I run npm run build with SvelteKit it seems to include all files from the src folder. Is it possible to exclude a certain file type (eg. *test.js)?

1. Select demo app with npm init svelte@next my-app

2. Add the following code to src/routes/todos/foo.test.js

   ...

I would like to import apexChart library which using "window" property, and i get error in console.