Skip to content

Releases: hanielu/vite-plugin-svelte-inline-component

0.0.16

24 Jul 23:14

Choose a tag to compare

🚀 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.assign transformation 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

24 Jul 23:13

Choose a tag to compare

🚀 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 fenceStart and fenceEnd options 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

24 Jul 17:18

Choose a tag to compare

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 multiple ReferenceError` issues.

0.0.13

24 Jul 11:20

Choose a tag to compare

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

24 Jul 11:06

Choose a tag to compare

🚀 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 ReferenceError issues 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

24 Jul 09:39

Choose a tag to compare

🐞 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

24 Jul 09:24

Choose a tag to compare

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 import and a const for the same global component.
  • Corrects ReferenceError for global variables. Variables from svelte:globals are 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

24 Jul 09:10

Choose a tag to compare

  • Fixed a bug where you couldn't declare a component inline without making it a variable on its own
// this used to break
render(html`<h1>Hello World</h1>`)
  • add new fenceEnd and globalsEnd options to vite plugin

0.0.8

24 Jul 00:30

Choose a tag to compare

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

23 Jul 22:20

Choose a tag to compare

  • 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 html and svelte functions instead of global type registration
import { html, svelte } from "@hvniel/vite-plugin-svelte-inline-component";