Bug fixed for self closing tags (0.1.6-beta)

Author: Git002

CHANGELOG.md

@@ -11,31 +11,49 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Work towards making it stable.
 - Add the related file name too below the colored overlay.
 
+## [0.1.6-beta] - 31st Aug 2025
+
+### Added
+
+Nothing added.
+
+### Technical Improvements
+
+Nothing improved.
+
+### Changed
+
+- Added LICENSE, README, and package.json to dist/ on build.
+
+### Fixed
+
+- Bug fixes for self closing tags.
+
 ## [0.1.5-beta] - 30th Aug 2025
 
 ### Added
 
-- **Click to Open in VS Code**: Ctrl/Cmd + Click functionality to instantly open source files in VS Code
-- **Automatic Client-side Script Injection**: Zero-configuration setup with automatic script injection for click-to-open functionality
-- **Base64 Metadata Encoding**: Implemented base64 encoding for `data-svelte-trace` attributes
-- **Configuration Options**: Added `openInCode` configuration option to control client-side script injection
-- **VS Code Integration**: Seamless integration with VS Code through `vscode://` protocol links
-- **Enhanced User Experience**: Instant navigation from browser elements to source code with precise line and column positioning
+- **Click to Open in VS Code**: Ctrl/Cmd + Click functionality to instantly open source files in VS Code.
+- **Automatic Client-side Script Injection**: Zero-configuration setup with automatic script injection for click-to-open functionality.
+- **Base64 Metadata Encoding**: Implemented base64 encoding for `data-svelte-trace` attributes.
+- **Configuration Options**: Added `openInCode` configuration option to control client-side script injection.
+- **VS Code Integration**: Seamless integration with VS Code through `vscode://` protocol links.
+- **Enhanced User Experience**: Instant navigation from browser elements to source code with precise line and column positioning.
 
 ### Technical Improvements
 
-- Client-side event listener for `Ctrl/Cmd` + `Click` detection
-- Base64 encoding/decoding for metadata security and cleanliness
-- Configurable preprocessor options
-- VS Code protocol URL construction for direct editor opening
-- Improved metadata handling and parsing
+- Client-side event listener for `Ctrl/Cmd` + `Click` detection.
+- Base64 encoding/decoding for metadata security and cleanliness.
+- Configurable preprocessor options.
+- VS Code protocol URL construction for direct editor opening.
+- Improved metadata handling and parsing.
 
 ### Changed
 
-- Made code modular, and more readable
-- Metadata format now uses base64 encoding for cleaner HTML output
-- Enhanced preprocessor configuration system
-- Improved documentation with comprehensive setup guide
+- Made code modular, and more readable.
+- Metadata format now uses base64 encoding for cleaner HTML output.
+- Enhanced preprocessor configuration system.
+- Improved documentation with comprehensive setup guide.
 
 ### Fixed
 
@@ -45,29 +63,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Initial beta release
-- Svelte 5 preprocessor functionality
-- `data-svelte-trace` attribute injection
-- Support for all HTML elements in Svelte components
-- Class attribute position tracking
-- File path metadata inclusion
-- Support for complex Svelte blocks (if, each, await, key, snippet)
-- Integration with SvelteKit and Vite
+- Initial beta release.
+- Svelte 5 preprocessor functionality.
+- `data-svelte-trace` attribute injection.
+- Support for all HTML elements in Svelte components.
+- Class attribute position tracking.
+- File path metadata inclusion.
+- Support for complex Svelte blocks (if, each, await, key, snippet).
+- Integration with SvelteKit and Vite.
 
 ### Technical Details
 
-- Uses magic-string for efficient code manipulation
-- Parses Svelte AST to identify HTML elements
-- Excludes script and style tags from processing
-- Handles elements with and without existing attributes
-- Tracks class attribute start/end positions
+- Uses magic-string for efficient code manipulation.
+- Parses Svelte AST to identify HTML elements.
+- Excludes script and style tags from processing.
+- Handles elements with and without existing attributes.
+- Tracks class attribute start/end positions.
 
 ### Known Limitations
 
-- Metadata is not base64 encoded yet
-- Limited testing with complex Svelte features
-- No configuration options
-- Terrible code quality
+- Metadata is not base64 encoded yet.
+- Limited testing with complex Svelte features.
+- No configuration options.
+- Terrible code quality.
 
 [Unreleased]: https://github.com/Git002/svelte-trace/compare/v0.1.5-beta...HEAD
 [0.1.5-beta]: https://github.com/Git002/svelte-trace/compare/v0.1.0-beta.1...v0.1.5-beta

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-trace",
-  "version": "0.1.5-beta.2",
+  "version": "0.1.6-beta",
   "description": "svelte-trace is a Svelte 5 preprocessor that enables 'click-to-open VS Code' functionality by adding metadata to HTML elements.",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,7 +12,10 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE",
+    "package.json"
   ],
   "keywords": [
     "svelte-trace",
@@ -55,7 +58,8 @@
     "clean": "rm -rf dist",
     "build:ts": "tsc -p tsconfig.build.json",
     "build:assets": "cp -r src/assets dist/",
-    "build": "npm run clean && npm run build:ts && npm run build:assets",
+    "build:docs": "cp README.md LICENSE package.json dist/",
+    "build": "npm run clean && npm run build:ts && npm run build:assets && npm run build:docs",
     "test": "echo 'Tests coming soon'",
     "prepublishOnly": "npm run build"
   }

package.json

@@ -23,7 +23,14 @@ export function processNodes(filepath: string, content: string, ast: AST.Root):
    */
   const addDataAttribute = (node: AST.RegularElement): void => {
     if (node.type !== "RegularElement") return;
-    if (node.name === "script" || node.name === "style") return;
+    if (
+      node.name === "script" ||
+      node.name === "style" ||
+      node.name === "meta" ||
+      node.name === "link" ||
+      node.name === "title"
+    )
+      return;
 
     const classAttr = node.attributes.find(
       (attr): attr is AST.Attribute => attr.type === "Attribute" && attr.name === "class"
@@ -39,9 +46,21 @@ export function processNodes(filepath: string, content: string, ast: AST.Root):
     const encodedBase64Data = Buffer.from(dataAttrValue, "utf8").toString("base64");
     const dataAttribute = `data-svelte-trace="${encodedBase64Data}"`;
 
-    // Always insert before the closing '>' to make it the last attribute
-    const tagEnd = content.indexOf(">", node.start);
-    magicString.appendLeft(tagEnd, ` ${dataAttribute}`);
+    // Find the correct insertion point based on whether it's self-closing or not
+    let insertionPoint: number;
+
+    // If there are attributes, insert after the last attribute
+    if (node.attributes.length > 0) {
+      const lastAttr = node.attributes[node.attributes.length - 1];
+      insertionPoint = lastAttr.end;
+    }
+    // If no attributes, insert after the tag name. Included +1 for '<'
+    else {
+      const tagNameEnd = node.start + 1 + node.name.length;
+      insertionPoint = tagNameEnd;
+    }
+
+    magicString.appendLeft(insertionPoint, ` ${dataAttribute}`);
   };
 
   /**
@@ -52,6 +71,7 @@ export function processNodes(filepath: string, content: string, ast: AST.Root):
       addDataAttribute(node);
     }
 
+    // Handle different node structures
     if (Array.isArray(node.children)) {
       node.children.forEach(walk);
     }