Releases: hanielu/vite-plugin-svelte-inline-component
0.0.16
🚀 Plugin Optimizations
This update introduces a more intelligent compilation process for inline Svelte components. The plugin now detects whether a component uses <script module> with export statements.
- Optimized Output: Components without module exports are now compiled with a standard
import, resulting in cleaner and more efficient generated code. - Maintained Functionality: Components that do use module exports will continue to be compiled with the special
Object.assigntransformation to ensure that both default and named exports (like snippets) remain available.
This change enhances performance and readability for the majority of use cases without sacrificing the powerful snippet-exporting feature.
0.0.15
🚀 Plugin Refinements and Simplification
This release focuses on improving the developer experience by simplifying the plugin's API. We've consolidated the import and global fences into a single, more intuitive definitions fence.
✨ Changes
- Unified Definitions Fence: Gone are the separate
/* svelte:imports */and/* svelte:globals */fences. Now, you can declare all your imports, variables, and component definitions within a single/* svelte:definitions */block. This streamlines the process of providing context to your inline components. - Simplified Configuration: The plugin options have been updated to reflect this change. The
fenceStartandfenceEndoptions now control the delimiters for the new unified fence.
migrating from previous versions
Updating to this new version is straightforward. Simply combine the content of your old import and global fences into the new definitions fence.
Before:
/* svelte:imports */
import { tick } from "svelte";
/* svelte:globals */
const name = "World";After:
/* svelte:definitions */
import { tick } from "svelte";
const name = "World";0.0.14
Bug Fixes & Improvements
This release provides a major improvement to the dependency injection logic for components and variables defined in the /* svelte:globals */ block.
- Global Component Dependencies: Fixed a critical bug where a global component using another global component would fail if the components were defined out of dependency order. The plugin now correctly analyzes the dependency graph and ensures components are compiled with the necessary imports.
- Robust Global Injection: All variables and components from the globals block are now reliably injected into any inline template (
html\...`orsvelte`...`) that uses them, resolving multipleReferenceError` issues.
0.0.13
Fix for Global Variable Injection Scope
This patch resolves a bug that caused ReferenceErrors by preventing required global variables from being injected into component scopes.
The previous logic for detecting if a variable was already declared was flawed; it would incorrectly flag any use of a variable on a line containing let or const as a declaration. This stopped the plugin from providing the necessary global definition.
The scope-checking logic has been updated to more accurately distinguish between variable declaration and usage, ensuring components receive all the global definitions they need.
0.0.12
🚀 globalFence Stability and Reliability Update
This release bundles several critical bug fixes for the svelte:globals feature, making it significantly more robust, predictable, and powerful. We've overhauled the parsing and dependency resolution logic to handle more complex, real-world use cases.
Key Fixes & Improvements
- Correct Dependency Resolution: The plugin now understands dependencies between global variables. If your template uses a variable that depends on another global, all required definitions are now automatically included in the correct order. This resolves complex
ReferenceErrorissues at runtime. - Fix for Multi-line Declarations: The parser now correctly handles multi-line JavaScript objects and arrays. This fixes "Unexpected token" errors that occurred when defining complex global constants.
Example of Newly Supported Use Case:
/* svelte:globals
const James = html`<h1>James</h1>`;
// Multi-line array declaration
const dupes = [
{ name: "John", comp: James },
{ name: "Jane", comp: James },
];
// A variable that depends on another global
const dupe = dupes[0];
*/
// ✅ This now works correctly. The plugin understands that `dupe`
// depends on `dupes`, and injects both into the component's scope.
const App = html`
<div>
<dupe.comp />
</div>
`;0.0.11
🐞 Fix for Multiple Global Components
This patch fully resolves the issue where only the first component in a svelte:globals block was being recognized.
The root cause was a faulty regular expression that failed to find subsequent component definitions. The expression has been corrected, and defining multiple components now works as expected.
/* svelte:globals
const Frank = html`<h1>Frank</h1>`;
// ✅ This now works correctly.
const James = html`<h1>James</h1>`;
*/
const App = html`
<Frank />
<James />
`;0.0.10
globalFence Scope Handling Fix
This patch resolves critical scope-clashing issues with the svelte:globals feature, making it more robust and predictable.
- Fixes "Identifier has already been declared" errors. The plugin now intelligently checks your component's
<script>tag and will not inject a global variable if you have already declared it locally. - Resolves component import conflicts. The plugin no longer causes redeclaration errors by injecting both an
importand aconstfor the same global component. - Corrects
ReferenceErrorfor global variables. Variables fromsvelte:globalsare now correctly injected into the scope of components that use them.
The plugin now properly respects your local component scope, giving you full control to override globals when needed.
Example:
/* svelte:globals
const count = 0; // Global fallback
*/
// ✅ This now works without errors.
// The plugin sees `let count` and won't inject the global definition.
const Counter = html`
<script>
let count = $state(100); // Local state takes precedence
</script>
<p>Count: {count}</p> `;0.0.9
0.0.8
You can now define components in a /* svelte:globals */ fence to make them automatically available to all other inline components in the same file. This reduces boilerplate and is perfect for creating shared mocks or UI elements.
/* svelte:globals
// This Button is now available everywhere in this file.
const Button = html`<button>Global Button</button>`;
*/
// No import needed! It just works.
const MyForm = html`
<form>
<p>Please submit the form:</p>
<Button />
</form>
`;This release also improves how component scopes are handled, increasing robustness and fixing ReferenceError bugs. The fence is configurable via the new globalsFenceStart option.
0.0.7
- Updated import paths for inline Svelte plugin
// NEW
import inlineSveltePlugin from "@hvniel/vite-plugin-svelte-inline-component/plugin";
// OLD
import { inlineSveltePlugin } from "@hvniel/vite-plugin-svelte-inline-component";- Exported
htmlandsveltefunctions instead of global type registration
import { html, svelte } from "@hvniel/vite-plugin-svelte-inline-component";