Svelte Standalone is a CLI tool that simplifies bundling Svelte components into standalone JavaScript files. It supports optional features like Tailwind, TypeScript, and Storybook, making it easy to integrate into 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 and provides a component API for Svelte 4.
- Shareable Components: Create reusable styles and logic with a special
runtimecomponent. - No Tooling Hassle: Handles minification, CSS purging, and boilerplate generation.
- Cross Plataform Support: Handles cross plataform support between different OS and node package managers.
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 (optional).
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 share styles or logic across multiple standalone components. It ensures consistency and reduces duplication.
npx standalone createWhen prompted for the component name, enter runtime, $runtime, or +runtime.
By default, the runtime styles are included in all builds. Use the --strip-runtime flag to bundle shared styles directly into each component:
npx standalone build --strip-runtimeCheck out the demo to see it in action!
MIT © 2024 Breno Lira