@thyn/core 0.0.352 → 0.0.354

package/README.md

@@ -35,7 +35,7 @@ npm run dev
 </button>
 
 <style>
-  /* Styles are scoped by default to prevent style bleeding 🎉 */
+  /* Styles are scoped by default to prevent style bleeding */
   button {
     background: #333;
     border: 0;

package/dist/plugin/index.js

@@ -879,7 +879,7 @@ export async function transformSFC(source, id) {
     s.append([
         "",
         `export default function ${name}($props) {`,
-        ...body.map((l) => "  " + l),
+        ...body.map((l) => (l.shouldIndent ? "  " + l.text : l.text)),
         removeUnusedThynVars(`  ${transformed} return ${root};`),
         `}`,
     ].join("\n"));

package/dist/plugin/utils.js

@@ -1,12 +1,13 @@
 export function extractParts(code) {
     // Helper to check if a position is inside a string literal or comment
-    function isInsideStringOrComment(code, pos) {
+    // within a specific range (used for checking script content only)
+    function isInsideStringOrComment(code, startPos, endPos) {
         let inString = false;
         let stringChar = '';
         let escaped = false;
         let inLineComment = false;
         let inBlockComment = false;
-        for (let i = 0; i < pos; i++) {
+        for (let i = startPos; i < endPos; i++) {
             const char = code[i];
             const nextChar = code[i + 1];
             if (inLineComment) {
@@ -52,45 +53,114 @@ export function extractParts(code) {
         }
         return inString || inLineComment || inBlockComment;
     }
-    // Find first real <script> tag (not inside a string)
-    function findScriptSection(code) {
+    // Find all script tag positions with their boundaries
+    function findScriptBoundaries(code) {
+        const boundaries = [];
         const openRegex = /<script([^>]*)>/gi;
+        const closeRegex = /<\/script>/gi;
         let openMatch;
         while ((openMatch = openRegex.exec(code)) !== null) {
-            if (!isInsideStringOrComment(code, openMatch.index)) {
-                const contentStart = openMatch.index + openMatch[0].length;
-                // Find the first </script> that is not inside a string
-                const closeRegex = /<\/script>/gi;
-                let closeMatch;
-                while ((closeMatch = closeRegex.exec(code)) !== null) {
-                    if (closeMatch.index >= contentStart && !isInsideStringOrComment(code, closeMatch.index)) {
-                        return {
-                            start: openMatch.index,
-                            contentStart: contentStart,
-                            contentEnd: closeMatch.index,
-                            end: closeMatch.index + closeMatch[0].length,
-                            attrs: openMatch[1] || ''
-                        };
+            const openIndex = openMatch.index;
+            const openLength = openMatch[0].length;
+            const attrs = openMatch[1] || '';
+            // Find matching close tag
+            closeRegex.lastIndex = openIndex + openLength;
+            let closeMatch;
+            while ((closeMatch = closeRegex.exec(code)) !== null) {
+                // Check if this close tag is inside a JS string within this script
+                const contentStart = openIndex + openLength;
+                if (!isInsideStringOrComment(code, contentStart, closeMatch.index)) {
+                    boundaries.push({
+                        start: openIndex,
+                        end: closeMatch.index + closeMatch[0].length,
+                        attrs
+                    });
+                    break;
+                }
+            }
+        }
+        return boundaries;
+    }
+    // Find the real script section (not inside a string of another script)
+    function findScriptSection(code) {
+        const allBoundaries = findScriptBoundaries(code);
+        if (allBoundaries.length === 0)
+            return null;
+        // The first script tag is the real one if it's not inside any other script's string
+        // Check each boundary to see if it's inside another script's content
+        for (const boundary of allBoundaries) {
+            let isInsideAnotherScript = false;
+            for (const other of allBoundaries) {
+                if (other === boundary)
+                    continue;
+                // Check if this boundary is inside another script's content
+                const otherContentStart = other.start + code.slice(other.start, other.end).indexOf('>') + 1;
+                const otherContentEnd = other.end - code.slice(other.end - 10, other.end).indexOf('<') - 10 + code.slice(other.end - 10, other.end).indexOf('<');
+                if (boundary.start > otherContentStart && boundary.start < other.end) {
+                    // This boundary is inside another script's content area
+                    // Check if it's inside a JS string
+                    if (isInsideStringOrComment(code, otherContentStart, boundary.start)) {
+                        isInsideAnotherScript = true;
+                        break;
                     }
                 }
             }
+            if (!isInsideAnotherScript) {
+                // This is the real script section
+                const openTagEnd = code.indexOf('>', boundary.start) + 1;
+                const closeTagStart = code.lastIndexOf('<', boundary.end - 1);
+                return {
+                    start: boundary.start,
+                    contentStart: openTagEnd,
+                    contentEnd: closeTagStart,
+                    end: boundary.end,
+                    attrs: boundary.attrs
+                };
+            }
         }
         return null;
     }
-    // Find first real <style> tag (not inside a string)
+    // Find the real style section (outside of script sections)
     function findStyleSection(code) {
+        const scriptBoundaries = findScriptBoundaries(code);
         const openRegex = /<style[^>]*>/gi;
+        const closeRegex = /<\/style>/gi;
         let openMatch;
         while ((openMatch = openRegex.exec(code)) !== null) {
-            if (!isInsideStringOrComment(code, openMatch.index)) {
-                const contentStart = openMatch.index + openMatch[0].length;
-                // Find the first </style> that is not inside a string
-                const closeRegex = /<\/style>/gi;
+            const openIndex = openMatch.index;
+            // Check if this style tag is inside any script section
+            let isInsideScript = false;
+            for (const script of scriptBoundaries) {
+                const contentStart = script.start + code.slice(script.start, script.end).indexOf('>') + 1;
+                const contentEnd = script.end - code.slice(script.end - 10, script.end).indexOf('<') - 10 + code.slice(script.end - 10, script.end).indexOf('<');
+                if (openIndex >= contentStart && openIndex < script.end) {
+                    // It's in the script section, check if inside a JS string
+                    if (isInsideStringOrComment(code, contentStart, openIndex)) {
+                        isInsideScript = true;
+                        break;
+                    }
+                }
+            }
+            if (!isInsideScript) {
+                // Found a real style tag, now find its close tag
+                const contentStart = openIndex + openMatch[0].length;
+                closeRegex.lastIndex = contentStart;
                 let closeMatch;
                 while ((closeMatch = closeRegex.exec(code)) !== null) {
-                    if (closeMatch.index >= contentStart && !isInsideStringOrComment(code, closeMatch.index)) {
+                    // Make sure close tag is also outside scripts
+                    let closeIsInsideScript = false;
+                    for (const script of scriptBoundaries) {
+                        const scriptContentStart = script.start + code.slice(script.start, script.end).indexOf('>') + 1;
+                        if (closeMatch.index >= scriptContentStart && closeMatch.index < script.end) {
+                            if (isInsideStringOrComment(code, scriptContentStart, closeMatch.index)) {
+                                closeIsInsideScript = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (!closeIsInsideScript) {
                         return {
-                            start: openMatch.index,
+                            start: openIndex,
                             contentStart: contentStart,
                             contentEnd: closeMatch.index,
                             end: closeMatch.index + closeMatch[0].length
@@ -198,7 +268,7 @@ export function splitScript(script) {
                 currentImport.push(line);
             }
             else {
-                body.push(line);
+                body.push({ text: line, shouldIndent: true });
             }
             // Check for end of multi-line comment, tracking strings
             for (let j = 0; j < line.length; j++) {
@@ -233,7 +303,7 @@ export function splitScript(script) {
                 currentImport.push(line);
             }
             else {
-                body.push(line);
+                body.push({ text: line, shouldIndent: !inString });
             }
             // Check if comment ends on same line
             for (let j = 0; j < line.length; j++) {
@@ -266,12 +336,12 @@ export function splitScript(script) {
         }
         // Skip single-line comments when not in import (only if not in string)
         if (!inString && !inImport && trimmed.startsWith("//")) {
-            body.push(line);
+            body.push({ text: line, shouldIndent: true });
             continue;
         }
         // Skip empty lines when not in import
         if (!trimmed && !inImport) {
-            body.push(line);
+            body.push({ text: line, shouldIndent: true });
             continue;
         }
         // Process the line character by character to maintain string state
@@ -335,7 +405,7 @@ export function splitScript(script) {
             }
         } // Regular body content
         else {
-            body.push(line);
+            body.push({ text: line, shouldIndent: !inString });
             // Update global string state
             inString = lineInString;
             stringChar = lineStringChar;
@@ -349,11 +419,15 @@ export function splitScript(script) {
         }
         else {
             // Still in string or incomplete, treat as body
-            body.push(...currentImport);
+            // We can't know for sure about indentation here, but if it was part of an import or string,
+            // it likely follows previous logic. For safety, if we are in string, don't indent.
+            for (const l of currentImport) {
+                body.push({ text: l, shouldIndent: !inString });
+            }
         }
     }
     return {
         imports: imports.filter((imp) => imp.trim()),
-        body: body.length > 0 ? body : [""],
+        body: body.length > 0 ? body : [{ text: "", shouldIndent: true }],
     };
 }

package/docs/package-lock.json

@@ -8,7 +8,7 @@
       "name": "thyn-app",
       "version": "0.0.0",
       "devDependencies": {
-        "@thyn/core": "^0.0.351",
+        "@thyn/core": "^0.0.353",
         "vite": "^6.3.5"
       }
     },
@@ -742,9 +742,9 @@
       ]
     },
     "node_modules/@thyn/core": {
-      "version": "0.0.351",
-      "resolved": "https://registry.npmjs.org/@thyn/core/-/core-0.0.351.tgz",
-      "integrity": "sha512-67M0/0wrdz1mNIMZ9V7Nq1jEO1C1iLdoG9rnjFcDGlDQRFM/HlNizvVWOaq2RfapVpgtRqIsKAA5iBloLE2GIA==",
+      "version": "0.0.353",
+      "resolved": "https://registry.npmjs.org/@thyn/core/-/core-0.0.353.tgz",
+      "integrity": "sha512-vg8X99bz1H+cCJtwPY8chIRBiRA+R26uI5XOOqXxL+jW2qWzZd7PID0EzkYi3zbfbCX0I3u5A+kfjbBJucFYAw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package/docs/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@thyn/core": "^0.0.351",
+    "@thyn/core": "^0.0.353",
     "vite": "^6.3.5"
   }
 }

package/docs/src/pages/Home.thyn

@@ -49,11 +49,7 @@ mount(App, document.body);`;
   <div class="compiled-wrapper">
     <div>
       <h4>source</h4>
-      <pre>
-        <code class="code language-javascript">
-            {{ codeSnippet }}
-        </code>
-      </pre>
+      <pre><code class="code language-javascript">{{ codeSnippet }}</code></pre>
     </div>
     <div>
       <h4>compiled</h4>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thyn/core",
-  "version": "0.0.352",
+  "version": "0.0.354",
   "type": "module",
   "main": "dist/index.js",
   "exports": {

package/src/plugin/index.ts

@@ -977,7 +977,7 @@ export async function transformSFC(source: string, id: string) {
   s.append([
     "",
     `export default function ${name}($props) {`,
-    ...body.map((l) => "  " + l),
+    ...body.map((l: any) => (l.shouldIndent ? "  " + l.text : l.text)),
     removeUnusedThynVars(`  ${transformed} return ${root};`),
     `}`,
   ].join("\n"));

package/src/plugin/utils.ts

@@ -1,13 +1,14 @@
 export function extractParts(code: string) {
   // Helper to check if a position is inside a string literal or comment
-  function isInsideStringOrComment(code: string, pos: number): boolean {
+  // within a specific range (used for checking script content only)
+  function isInsideStringOrComment(code: string, startPos: number, endPos: number): boolean {
     let inString = false;
     let stringChar = '';
     let escaped = false;
     let inLineComment = false;
     let inBlockComment = false;
     
-    for (let i = 0; i < pos; i++) {
+    for (let i = startPos; i < endPos; i++) {
       const char = code[i];
       const nextChar = code[i + 1];
       
@@ -61,50 +62,127 @@ export function extractParts(code: string) {
     return inString || inLineComment || inBlockComment;
   }
 
-  // Find first real <script> tag (not inside a string)
-  function findScriptSection(code: string): { start: number; contentStart: number; contentEnd: number; end: number; attrs: string } | null {
+  // Find all script tag positions with their boundaries
+  function findScriptBoundaries(code: string): Array<{ start: number; end: number; attrs: string }> {
+    const boundaries = [];
     const openRegex = /<script([^>]*)>/gi;
+    const closeRegex = /<\/script>/gi;
     let openMatch;
     
     while ((openMatch = openRegex.exec(code)) !== null) {
-      if (!isInsideStringOrComment(code, openMatch.index)) {
-        const contentStart = openMatch.index + openMatch[0].length;
+      const openIndex = openMatch.index;
+      const openLength = openMatch[0].length;
+      const attrs = openMatch[1] || '';
+      
+      // Find matching close tag
+      closeRegex.lastIndex = openIndex + openLength;
+      let closeMatch;
+      while ((closeMatch = closeRegex.exec(code)) !== null) {
+        // Check if this close tag is inside a JS string within this script
+        const contentStart = openIndex + openLength;
+        if (!isInsideStringOrComment(code, contentStart, closeMatch.index)) {
+          boundaries.push({
+            start: openIndex,
+            end: closeMatch.index + closeMatch[0].length,
+            attrs
+          });
+          break;
+        }
+      }
+    }
+    
+    return boundaries;
+  }
+
+  // Find the real script section (not inside a string of another script)
+  function findScriptSection(code: string): { start: number; contentStart: number; contentEnd: number; end: number; attrs: string } | null {
+    const allBoundaries = findScriptBoundaries(code);
+    if (allBoundaries.length === 0) return null;
+    
+    // The first script tag is the real one if it's not inside any other script's string
+    // Check each boundary to see if it's inside another script's content
+    for (const boundary of allBoundaries) {
+      let isInsideAnotherScript = false;
+      
+      for (const other of allBoundaries) {
+        if (other === boundary) continue;
         
-        // Find the first </script> that is not inside a string
-        const closeRegex = /<\/script>/gi;
-        let closeMatch;
-        while ((closeMatch = closeRegex.exec(code)) !== null) {
-          if (closeMatch.index >= contentStart && !isInsideStringOrComment(code, closeMatch.index)) {
-            return {
-              start: openMatch.index,
-              contentStart: contentStart,
-              contentEnd: closeMatch.index,
-              end: closeMatch.index + closeMatch[0].length,
-              attrs: openMatch[1] || ''
-            };
+        // Check if this boundary is inside another script's content
+        const otherContentStart = other.start + code.slice(other.start, other.end).indexOf('>') + 1;
+        const otherContentEnd = other.end - code.slice(other.end - 10, other.end).indexOf('<') - 10 + code.slice(other.end - 10, other.end).indexOf('<');
+        
+        if (boundary.start > otherContentStart && boundary.start < other.end) {
+          // This boundary is inside another script's content area
+          // Check if it's inside a JS string
+          if (isInsideStringOrComment(code, otherContentStart, boundary.start)) {
+            isInsideAnotherScript = true;
+            break;
           }
         }
       }
+      
+      if (!isInsideAnotherScript) {
+        // This is the real script section
+        const openTagEnd = code.indexOf('>', boundary.start) + 1;
+        const closeTagStart = code.lastIndexOf('<', boundary.end - 1);
+        return {
+          start: boundary.start,
+          contentStart: openTagEnd,
+          contentEnd: closeTagStart,
+          end: boundary.end,
+          attrs: boundary.attrs
+        };
+      }
     }
+    
     return null;
   }
 
-  // Find first real <style> tag (not inside a string)
+  // Find the real style section (outside of script sections)
   function findStyleSection(code: string): { start: number; contentStart: number; contentEnd: number; end: number } | null {
+    const scriptBoundaries = findScriptBoundaries(code);
     const openRegex = /<style[^>]*>/gi;
+    const closeRegex = /<\/style>/gi;
     let openMatch;
     
     while ((openMatch = openRegex.exec(code)) !== null) {
-      if (!isInsideStringOrComment(code, openMatch.index)) {
-        const contentStart = openMatch.index + openMatch[0].length;
+      const openIndex = openMatch.index;
+      
+      // Check if this style tag is inside any script section
+      let isInsideScript = false;
+      for (const script of scriptBoundaries) {
+        const contentStart = script.start + code.slice(script.start, script.end).indexOf('>') + 1;
+        const contentEnd = script.end - code.slice(script.end - 10, script.end).indexOf('<') - 10 + code.slice(script.end - 10, script.end).indexOf('<');
         
-        // Find the first </style> that is not inside a string
-        const closeRegex = /<\/style>/gi;
+        if (openIndex >= contentStart && openIndex < script.end) {
+          // It's in the script section, check if inside a JS string
+          if (isInsideStringOrComment(code, contentStart, openIndex)) {
+            isInsideScript = true;
+            break;
+          }
+        }
+      }
+      
+      if (!isInsideScript) {
+        // Found a real style tag, now find its close tag
+        const contentStart = openIndex + openMatch[0].length;
+        closeRegex.lastIndex = contentStart;
         let closeMatch;
         while ((closeMatch = closeRegex.exec(code)) !== null) {
-          if (closeMatch.index >= contentStart && !isInsideStringOrComment(code, closeMatch.index)) {
+          // Make sure close tag is also outside scripts
+          let closeIsInsideScript = false;
+          for (const script of scriptBoundaries) {
+            const scriptContentStart = script.start + code.slice(script.start, script.end).indexOf('>') + 1;
+            if (closeMatch.index >= scriptContentStart && closeMatch.index < script.end) {
+              if (isInsideStringOrComment(code, scriptContentStart, closeMatch.index)) {
+                closeIsInsideScript = true;
+                break;
+              }
+            }
+          }
+          if (!closeIsInsideScript) {
             return {
-              start: openMatch.index,
+              start: openIndex,
               contentStart: contentStart,
               contentEnd: closeMatch.index,
               end: closeMatch.index + closeMatch[0].length
@@ -226,7 +304,7 @@ export function splitScript(script: string) {
       if (inImport) {
         currentImport.push(line);
       } else {
-        body.push(line);
+        body.push({ text: line, shouldIndent: true });
       }
 
       // Check for end of multi-line comment, tracking strings
@@ -260,7 +338,7 @@ export function splitScript(script: string) {
       if (inImport) {
         currentImport.push(line);
       } else {
-        body.push(line);
+        body.push({ text: line, shouldIndent: !inString });
       }
 
       // Check if comment ends on same line
@@ -294,13 +372,13 @@ export function splitScript(script: string) {
 
     // Skip single-line comments when not in import (only if not in string)
     if (!inString && !inImport && trimmed.startsWith("//")) {
-      body.push(line);
+      body.push({ text: line, shouldIndent: true });
       continue;
     }
 
     // Skip empty lines when not in import
     if (!trimmed && !inImport) {
-      body.push(line);
+      body.push({ text: line, shouldIndent: true });
       continue;
     }
 
@@ -373,7 +451,7 @@ export function splitScript(script: string) {
       }
     } // Regular body content
     else {
-      body.push(line);
+      body.push({ text: line, shouldIndent: !inString });
       // Update global string state
       inString = lineInString;
       stringChar = lineStringChar;
@@ -387,12 +465,16 @@ export function splitScript(script: string) {
       imports.push(currentImport.join("\n"));
     } else {
       // Still in string or incomplete, treat as body
-      body.push(...currentImport);
+      // We can't know for sure about indentation here, but if it was part of an import or string,
+      // it likely follows previous logic. For safety, if we are in string, don't indent.
+      for(const l of currentImport) {
+          body.push({ text: l, shouldIndent: !inString });
+      }
     }
   }
 
   return {
     imports: imports.filter((imp) => imp.trim()),
-    body: body.length > 0 ? body : [""],
+    body: body.length > 0 ? body : [{ text: "", shouldIndent: true }],
   };
 }

package/tests/CodeSnippet.test.ts

@@ -16,6 +16,17 @@ describe("CodeSnippet component", () => {
     expect(display.textContent).toContain("button {");
   });
 
+  it("should not add extra indentation to template literals", () => {
+    const root = CodeSnippet();
+    const display = root.querySelector('.display');
+    const text = display.textContent;
+
+    // Check that <script> is at the start of the line (no extra indentation)
+    expect(text).toContain("\n<script>");
+    // Check that const count has exactly 2 spaces (as in source), not 4
+    expect(text).toContain("\n  const count");
+  });
+
   it("should apply the component's actual style, not style from codeSnippet", () => {
     const root = CodeSnippet();
     const display = root.querySelector('.display');