fix(svelte): Track components without <script> tags

packages/svelte/src/preprocessors.ts

@@ -15,9 +15,31 @@ export const defaultComponentTrackingOptions: Required<ComponentTrackingInitOpti
 export function componentTrackingPreprocessor(options?: ComponentTrackingInitOptions): PreprocessorGroup {
   const mergedOptions = { ...defaultComponentTrackingOptions, ...options };
 
+  const visitedFilesMarkup = new Set<string>();
   const visitedFiles = new Set<string>();
 
   return {
+    // This preprocessor hook is called once per .svelte component file, before the `script` hook is called
+    // We use it to check if the passed component has a <script> tag. If it doesn't, we add one to inject our
+    // code later on, when the `script` hook is executed.
+    markup: ({ content, filename }) => {
+      const finalFilename = filename || 'unknown';
+      const shouldInject = shouldInjectFunction(mergedOptions.trackComponents, finalFilename, {}, visitedFilesMarkup);
+
+      if (shouldInject && !hasScriptTag(content)) {
+        // Insert a <script> tag into the component file where we can later on inject our code.
+        // We have to add a placeholder to the script tag because for empty script tags,
+        // the `script` preprocessor hook won't be called
+        // Note: The space between <script> and </script> is important! Without any content,
+        // the `script` hook wouldn't  be executed for the added script tag.
+        const s = new MagicString(content);
+        s.prepend('<script> </script>\n');
+        return { code: s.toString(), map: s.generateMap().toString() };
+      }
+
+      return { code: content };
+    },
+
     // This script hook is called whenever a Svelte component's <script>
     // content is preprocessed.
     // `content` contains the script code as a string
@@ -83,6 +105,15 @@ function shouldInjectFunction(
   return true;
 }
 
+function hasScriptTag(content: string): boolean {
+  // This is not a super safe way of checking for the presence of a <script> tag in the Svelte
+  // component file but I think we can use it as a start.
+  // A case that is not covered by regex-testing HTML is e.g. nested <script> tags but I cannot
+  // think of why one would do this in Svelte components.
+  // Also, we just want to know if there is a <script> tag in the entire file content; not if
+  return /<script(\s+.+)?>.*<\/script>/s.test(content);
+}
+
 function getBaseName(filename: string): string {
   const segments = filename.split('/');
   return segments[segments.length - 1].replace('.svelte', '');