svelte-standalone
is a serie of configurations that aims to process any svelte widget to a single standalone javascript file. Currently, as a template, you just create a version of it and starts using it.
It includes minifications for JavasCript and CSS absed on terser
and cssnano
.
Unit and e2e testing with vitest
and @testing-library/svelte
.
Also, storybook
and vite
to ensure that you can check the bundled scripts and the components as it is.
See "example" component on: https://svelte-standalone.vercel.app/.
It's structure is intended to be simple. Basically you're going to create an folder on src/_standalone
with the name of your component e.g.: src/_standalone/<component>
.
-
Inside the example folder initially you just need to create an
index.svelte
file and once you run thedev
/build
scripts it'll generate some files using plop. These files will be:-
src/_standalone/<component>/embed.ts
- A simple file that'll create a new instance ofindex.svelte
component. It'll also implementswindow.<component>Start
andwindow.<component>Stop
. -
src/_standalone/<component>/declarations.d.ts
- Exposes<component>
,<component>Props
anddefaultConfig
.- Using this, you'll be able to import
<component>.svelte
anywhere and have it's props well typed. - If you only want the definition for props, it'll also defines
<component>Props
.
- Using this, you'll be able to import
-
src/_standalone/<component>/types.ts
- It'll declaresdefaultConfig
which will be typed as<component>Props
so it'll be used as default props for<component>stories.ts
and also forsrc/routes/<component>/+page.svelte
. It'll also exposes a simpleCustomWindow
and use it inside the route files. -
src/routes/<component>/+page.svelte
- Exposes a route that imports the bundled script from vite so you'll can check how the compiled script is working. It'll also initializeswindow.<component>Start
andwindow.<component>Stop
usingdefaultConfig
from types.ts. -
src/stories/<component>.stories.ts
- A simple storybook that imports the<component>/index.svelte
so you'll be able to see how the svelte component is without bundling it.
-
If you're going to use your bundled <component>
into an app that has tailwindcss, consider importing: /src/css/tailwind-utils.css
instead of /src/css/tailwind-full.css
.
Basically, it'll runs vite on everything from src/_standalone
. For each <component>
inside it, it'll run a separatedly build. It'll also swap tailwind.content
to be only the src/_standalone/*
and src/shared
folders so you can have each <component>
css purged separatedly relying on tailwind jit. It'll also handle minifications, preprocessing for sveltekit and typescript and just returns a single <component>.min.js
and an <component>.status.html
at /static/dist
.