svelte-comment-injector

A Svelte preprocessor that injects an HTML comment at the top of every component, making it easier to identify components in browser DevTools.

✨ Features

• Injects a DevTools-visible HTML comment like:

  <!-- Begin MyComponent.svelte -->
  <div class="my-component">
  	<!-- Component content -->
  </div>
  <!-- End MyComponent.svelte -->

📦 Installation

npm install svelte-devtools-comment --save-dev

⚙️ Usage

Add the preprocessor to your Svelte configuration:

// svelte.config.js
import svelteInjectComment from 'svelte-devtools-comment';

export default {
	preprocess: [svelteInjectComment()]
	// ...rest of your config
};

🛠️ Configuration

You can customize the comment format by passing options to the preprocessor:

// svelte.config.js
import svelteInjectComment from 'svelte-devtools-comment';

export default {
	preprocess: [
		svelteInjectComment({
			enabled: true, // Enable or disable the comment injection
			showEndComment: true, // Show the end comment
			showFullPath: false // Show the full path in the comment
		})
	]
	// ...rest of your config
};