Svelte Standalone is a CLI tool that simplifies bundling Svelte components into standalone JavaScript files. It has opt-in support for Tailwind, TypeScript, and Storybook, making it simple to integrate to your workflow.
- Bundle Svelte Components: Uses Vite and
@sveltejs/vite-plugin-svelteto bundle components into standalone scripts. - Optional Features: Choose what you need—Tailwind, TypeScript, or Storybook.
- Reactive Components: Leverages Svelte's reactivity to create light but powerfull embedabbles.
- No Tooling Hassle: Handles minification, CSS purging, and boilerplate generation.
- Shareable Components: Reuse styles and logic with a special
runtimecomponent. - Cross Plataform Support: Supports your favorite OS or npm package.
Install the CLI globally or locally:
npm install svelte-standaloneFor Svelte 5 (beta):
npm install svelte-standalone@betaRun the create command to generate a new standalone component:
npx standalone createYou'll be prompted to:
- Name your component (e.g.,
payments). - Choose an embedding strategy:
- Explicit Call (Single Instance): Start with
window.payments.start(). - Explicit Call (Multiple Instances): Start with
window.payments.start()and mount multiple instances. - Auto-Embed with Target: Automatically append to a target
<div>. - Auto-Embed on Body: Automatically append to the
<body>.
- Explicit Call (Single Instance): Start with
This will generate the following files in src/_standalone/payments/:
index.svelte: The main Svelte component.embed.ts(orembed.js): Embedding logic based on your chosen strategy.config.ts(orconfig.js): Default configuration for the component.
Once your component is created, build it into a standalone script:
npx standalone build- Production Build: Minify and optimize for production.
npx standalone build --production
- Build All Components: Build all standalone components at once.
npx standalone build --all
- Strip Runtime: Bundle shared styles directly into components (excludes the runtime component).
npx standalone build --strip-runtime
The output will be saved in static/dist/standalone/:
payments.min.js: The standalone JavaScript file.payments.status.html: A visualization of the bundle.
Include the generated script in your HTML:
<script src="/path/to/payments.min.js"></script>- For Explicit Call:
window.payments.start({ /* props */ });
- For Auto-Embed:
<div id="payments"></div> <script src="/path/to/payments.min.js?target=payments"></script>
The runtime is a special component (runtime, $runtime, or +runtime) used to encapsulate styles or logic across multiple standalone components.
- Include styles once: You can include your styles from
src/sharedonce within yourruntimecomponent. - Setup your embedabbles: You can run methods required to your cards just at your runtime. i.e. authenticate once and retrieve at other embedabbles.
npx standalone createWhen prompted for the component name, enter runtime, $runtime, or +runtime.
By default, the styles from src/shared folder are included across the runtime component during builds. Use the --strip-runtime flag to bundle styles from the src/styles folder directly into each component:
npx standalone build --strip-runtimeCheck out the demo to see it in action!
MIT © 2024 Breno Lira