@thyn/core 0.0.350 → 0.0.352

package/dist/plugin/index.js

@@ -815,7 +815,7 @@ async function transformHTMLtoJSX(html, style) {
     const template = parseHTML("<template>" + processedHTML + "</template>");
     const rootElement = template.content.firstElementChild;
     let scopedStyle = null;
-    if (style) {
+    if (style && rootElement) {
         addScopeId(rootElement, scopeId);
         scopedStyle = await scopeSelectors(style, scopeId);
     }

package/dist/plugin/utils.js

@@ -1,21 +1,142 @@
 export function extractParts(code) {
-    const scriptMatch = code.match(/<script([^>]*?)>([\s\S]*?)<\/script>/);
-    const styleMatch = code.match(/<style[^>]*>([\s\S]*?)<\/style>/);
-    const html = code
-        .replace(/<script[^>]*>[\s\S]*?<\/script>/, "")
-        .replace(/<style[^>]*>[\s\S]*?<\/style>/, "")
-        .trim();
+    // Helper to check if a position is inside a string literal or comment
+    function isInsideStringOrComment(code, pos) {
+        let inString = false;
+        let stringChar = '';
+        let escaped = false;
+        let inLineComment = false;
+        let inBlockComment = false;
+        for (let i = 0; i < pos; i++) {
+            const char = code[i];
+            const nextChar = code[i + 1];
+            if (inLineComment) {
+                if (char === '\n') {
+                    inLineComment = false;
+                }
+                continue;
+            }
+            if (inBlockComment) {
+                if (char === '*' && nextChar === '/') {
+                    inBlockComment = false;
+                    i++; // skip the '/'
+                }
+                continue;
+            }
+            if (escaped) {
+                escaped = false;
+                continue;
+            }
+            if (char === '\\') {
+                escaped = true;
+                continue;
+            }
+            // Check for comment start
+            if (char === '/' && nextChar === '/') {
+                inLineComment = true;
+                i++; // skip the second '/'
+                continue;
+            }
+            if (char === '/' && nextChar === '*') {
+                inBlockComment = true;
+                i++; // skip the '*'
+                continue;
+            }
+            if (!inString && (char === '"' || char === "'" || char === '`')) {
+                inString = true;
+                stringChar = char;
+            }
+            else if (inString && char === stringChar) {
+                inString = false;
+                stringChar = '';
+            }
+        }
+        return inString || inLineComment || inBlockComment;
+    }
+    // Find first real <script> tag (not inside a string)
+    function findScriptSection(code) {
+        const openRegex = /<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] || ''
+                        };
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    // Find first real <style> tag (not inside a string)
+    function findStyleSection(code) {
+        const openRegex = /<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;
+                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
+                        };
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    // Extract sections
+    const scriptSection = findScriptSection(code);
+    const styleSection = findStyleSection(code);
+    let script = "";
     let scriptLang = "js";
-    if (scriptMatch && scriptMatch[1]) {
-        const langMatch = scriptMatch[1].match(/lang\s*=\s*["']([^"']+)["']/);
+    if (scriptSection) {
+        script = code.slice(scriptSection.contentStart, scriptSection.contentEnd).trim();
+        const langMatch = scriptSection.attrs.match(/lang\s*=\s*["']([^"']+)["']/);
         if (langMatch) {
             scriptLang = langMatch[1];
         }
     }
+    let style = "";
+    if (styleSection) {
+        style = code.slice(styleSection.contentStart, styleSection.contentEnd).trim();
+    }
+    // Build HTML by removing script and style sections
+    // Remove from highest index to lowest to preserve indices
+    let html = code;
+    const sections = [];
+    if (scriptSection) {
+        sections.push({ start: scriptSection.start, end: scriptSection.end });
+    }
+    if (styleSection) {
+        sections.push({ start: styleSection.start, end: styleSection.end });
+    }
+    // Sort by start position descending (remove from end first)
+    sections.sort((a, b) => b.start - a.start);
+    for (const section of sections) {
+        html = html.slice(0, section.start) + html.slice(section.end);
+    }
+    html = html.trim();
     return {
-        script: scriptMatch?.[2]?.trim() ?? "",
+        script,
         scriptLang,
-        style: styleMatch?.[1]?.trim() ?? "",
+        style,
         html,
     };
 }
@@ -47,13 +168,13 @@ export function splitScript(script) {
     let inString = false;
     let stringChar = "";
     let inMultiLineComment = false;
+    let escaped = false;
     // Helper function to check if import is complete without semicolon
-    function isImportComplete(line, braceCount, inString) {
+    function isImportComplete(lineIndex, braceCount, inString) {
         // If we have balanced braces and not in a string, check if next non-empty line starts a new statement
         if (braceCount === 0 && !inString) {
             // Look ahead to see if next line starts a new statement/declaration
-            const nextLineIndex = lines.indexOf(line) + 1;
-            for (let i = nextLineIndex; i < lines.length; i++) {
+            for (let i = lineIndex + 1; i < lines.length; i++) {
                 const nextLine = lines[i].trim();
                 if (!nextLine || nextLine.startsWith("//") || nextLine.startsWith("/*")) {
                     continue; // Skip empty lines and comments
@@ -67,6 +188,7 @@ export function splitScript(script) {
         }
         return false;
     }
+    // Process each line, maintaining string/comment state
     for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
         const trimmed = line.trim();
@@ -78,13 +200,34 @@ export function splitScript(script) {
             else {
                 body.push(line);
             }
-            if (line.includes("*/")) {
-                inMultiLineComment = false;
+            // Check for end of multi-line comment, tracking strings
+            for (let j = 0; j < line.length; j++) {
+                const char = line[j];
+                if (escaped) {
+                    escaped = false;
+                    continue;
+                }
+                if (char === '\\' && inString) {
+                    escaped = true;
+                    continue;
+                }
+                if (!inString && (char === '"' || char === "'" || char === '`')) {
+                    inString = true;
+                    stringChar = char;
+                }
+                else if (inString && char === stringChar) {
+                    inString = false;
+                    stringChar = "";
+                }
+                else if (!inString && char === '*' && line[j + 1] === '/') {
+                    inMultiLineComment = false;
+                    break;
+                }
             }
             continue;
         }
-        // Check for start of multi-line comment
-        if (line.includes("/*") && !inString) {
+        // Check for start of multi-line comment (only if not in string)
+        if (!inString && line.includes("/*")) {
             inMultiLineComment = true;
             if (inImport) {
                 currentImport.push(line);
@@ -92,15 +235,37 @@ export function splitScript(script) {
             else {
                 body.push(line);
             }
-            if (!line.includes("*/")) {
-                continue;
+            // Check if comment ends on same line
+            for (let j = 0; j < line.length; j++) {
+                const char = line[j];
+                if (escaped) {
+                    escaped = false;
+                    continue;
+                }
+                if (char === '\\' && inString) {
+                    escaped = true;
+                    continue;
+                }
+                if (!inString && (char === '"' || char === "'" || char === '`')) {
+                    inString = true;
+                    stringChar = char;
+                }
+                else if (inString && char === stringChar) {
+                    inString = false;
+                    stringChar = "";
+                }
+                else if (!inString && char === '*' && line[j + 1] === '/') {
+                    inMultiLineComment = false;
+                    break;
+                }
             }
-            else {
-                inMultiLineComment = false;
+            if (!inMultiLineComment) {
+                // Comment ended on same line
+                continue;
             }
         }
-        // Skip single-line comments when not in import
-        if (trimmed.startsWith("//") && !inImport) {
+        // Skip single-line comments when not in import (only if not in string)
+        if (!inString && !inImport && trimmed.startsWith("//")) {
             body.push(line);
             continue;
         }
@@ -109,37 +274,46 @@ export function splitScript(script) {
             body.push(line);
             continue;
         }
-        // Start of import statement
-        if (!inImport && trimmed.startsWith("import")) {
+        // Process the line character by character to maintain string state
+        let lineBraceCount = 0;
+        let lineInString = inString;
+        let lineStringChar = stringChar;
+        let lineEscaped = false;
+        for (let j = 0; j < line.length; j++) {
+            const char = line[j];
+            if (lineEscaped) {
+                lineEscaped = false;
+                continue;
+            }
+            if (char === '\\' && lineInString) {
+                lineEscaped = true;
+                continue;
+            }
+            if (!lineInString && (char === '"' || char === "'" || char === '`')) {
+                lineInString = true;
+                lineStringChar = char;
+            }
+            else if (lineInString && char === lineStringChar) {
+                lineInString = false;
+                lineStringChar = "";
+            }
+            else if (!lineInString && char === '{') {
+                lineBraceCount++;
+            }
+            else if (!lineInString && char === '}') {
+                lineBraceCount--;
+            }
+        }
+        // Start of import statement (only if not inside a string)
+        if (!inImport && !inString && trimmed.startsWith("import")) {
             inImport = true;
             currentImport = [line];
-            braceCount = 0;
-            inString = false;
-            // Count braces and track strings in the import line
-            for (let j = 0; j < line.length; j++) {
-                const char = line[j];
-                if (inString) {
-                    if (char === stringChar && line[j - 1] !== "\\") {
-                        inString = false;
-                        stringChar = "";
-                    }
-                }
-                else {
-                    if (char === '"' || char === "'" || char === "`") {
-                        inString = true;
-                        stringChar = char;
-                    }
-                    else if (char === "{") {
-                        braceCount++;
-                    }
-                    else if (char === "}") {
-                        braceCount--;
-                    }
-                }
-            }
-            // Check if import is complete
+            braceCount = lineBraceCount;
+            inString = lineInString;
+            stringChar = lineStringChar;
+            // Check if import is complete on this line
             if ((trimmed.endsWith(";") ||
-                isImportComplete(trimmed, braceCount, inString)) &&
+                isImportComplete(i, braceCount, inString)) &&
                 braceCount === 0 && !inString) {
                 imports.push(currentImport.join("\n"));
                 currentImport = [];
@@ -148,31 +322,12 @@ export function splitScript(script) {
         } // Continue import statement
         else if (inImport) {
             currentImport.push(line);
-            // Count braces and track strings in the current line
-            for (let j = 0; j < line.length; j++) {
-                const char = line[j];
-                if (inString) {
-                    if (char === stringChar && line[j - 1] !== "\\") {
-                        inString = false;
-                        stringChar = "";
-                    }
-                }
-                else {
-                    if (char === '"' || char === "'" || char === "`") {
-                        inString = true;
-                        stringChar = char;
-                    }
-                    else if (char === "{") {
-                        braceCount++;
-                    }
-                    else if (char === "}") {
-                        braceCount--;
-                    }
-                }
-            }
+            braceCount += lineBraceCount;
+            inString = lineInString;
+            stringChar = lineStringChar;
             // Check if import is complete
             if ((trimmed.endsWith(";") ||
-                isImportComplete(trimmed, braceCount, inString)) &&
+                isImportComplete(i, braceCount, inString)) &&
                 braceCount === 0 && !inString) {
                 imports.push(currentImport.join("\n"));
                 currentImport = [];
@@ -181,11 +336,21 @@ export function splitScript(script) {
         } // Regular body content
         else {
             body.push(line);
+            // Update global string state
+            inString = lineInString;
+            stringChar = lineStringChar;
         }
     }
-    // Handle unterminated import (likely malformed)
+    // Handle unterminated import (likely malformed or still in string)
     if (currentImport.length > 0) {
-        imports.push(currentImport.join("\n"));
+        if (inImport && !inString) {
+            // Import seems complete but wasn't captured properly
+            imports.push(currentImport.join("\n"));
+        }
+        else {
+            // Still in string or incomplete, treat as body
+            body.push(...currentImport);
+        }
     }
     return {
         imports: imports.filter((imp) => imp.trim()),

package/docs/package-lock.json

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

package/docs/package.json

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

package/docs/src/pages/Home.thyn

@@ -17,47 +17,49 @@
   setTimeout(() => {
     Prism.highlightAll();
   });
-</script>
 
-<div class="main">
-  <h1>
-    <img src="/thyn.svg" />
-    thyn
-  </h1>
-  <p class="tagline">{{ taglines[tagline() % taglines.length] }}</p>
-  <div class="compiled-wrapper">
-    <div>
-      <h4>source</h4>
-      <pre>
-        <code class="code language-javascript">
-// App.thyn
-&lt;script&gt;
+  const codeSnippet = `// App.thyn
+<script>
   const count = $signal(0);
-&lt;/script&gt;
+</script>
 
-&lt;button onclick={() =&gt; count(c =&gt; c + 1)}&gt;
+<button onclick={() => count(c => c + 1)}>
   Count: \{{ count() \}}
-&lt;/button&gt;
+</button>
 
-&lt;style&gt;
+<style>
   button {
     background: #333;
   }
-&lt;/style&gt;
+</style>
 
 // main.js
 import { mount } from '@thyn/core';
 import App from './App.thyn';
 
-mount(App, document.body);          
-       </code>
+mount(App, document.body);`;
+</script>
+
+<div class="main">
+  <h1>
+    <img src="/thyn.svg" />
+    thyn
+  </h1>
+  <p class="tagline">{{ taglines[tagline() % taglines.length] }}</p>
+  <div class="compiled-wrapper">
+    <div>
+      <h4>source</h4>
+      <pre>
+        <code class="code language-javascript">
+            {{ codeSnippet }}
+        </code>
       </pre>
     </div>
     <div>
       <h4>compiled</h4>
       <pre>
         <code class="compiled language-javascript">
-let u,s;const r=[];function l(t){r.push(t),s||(s=!0,queueMicrotask(()=&gt;{for(const n of r)f(n);r.length=0,s=!1}))}function p(t){const n=new Set;return(...e)=&gt;{if(!e.length)return u&amp;&amp;(n.add(u),u.deps.add(n)),t;const o=e[0],i=typeof o==&quot;function&quot;?o(t):o;if(i!==t){t=i;for(const d of n)l(d)}}}function f(t,n){n||a(t);const e=u;u=t;const o=t.run();o&amp;&amp;(t.td?t.td.push(o):t.td=[o]),u=e}function _(t,n){const e={run:t,deps:new Set,show:n};return f(e,!0),e}function a(t){const{deps:n,td:e}=t;if(n.size){for(const o of n)o.delete(t);n.clear()}if(e){for(const o of e)o();t.td=null}}function h(t,n){n.appendChild(t())}let c;function m(){if(!c){c=document.createElement(&quot;button&quot;),c.className=&quot;thyn-0&quot;;const t=document.createTextNode(&quot;&quot;);return c.appendChild(t),c}return c.cloneNode(!0)}function N(t){const n=p(0),e=m();return e.onclick=()=&gt;n(o=&gt;o+1),_(()=&gt;{e.firstChild.nodeValue=`Count: ${n()}`}),e}h(N,document.body);
+let u,s;const r=[];function l(t){r.push(t),s||(s=!0,queueMicrotask(()=>{for(const n of r)f(n);r.length=0,s=!1}))}function p(t){const n=new Set;return(...e)=>{if(!e.length)return u&amp;&amp;(n.add(u),u.deps.add(n)),t;const o=e[0],i=typeof o==&quot;function&quot;?o(t):o;if(i!==t){t=i;for(const d of n)l(d)}}}function f(t,n){n||a(t);const e=u;u=t;const o=t.run();o&amp;&amp;(t.td?t.td.push(o):t.td=[o]),u=e}function _(t,n){const e={run:t,deps:new Set,show:n};return f(e,!0),e}function a(t){const{deps:n,td:e}=t;if(n.size){for(const o of n)o.delete(t);n.clear()}if(e){for(const o of e)o();t.td=null}}function h(t,n){n.appendChild(t())}let c;function m(){if(!c){c=document.createElement(&quot;button&quot;),c.className=&quot;thyn-0&quot;;const t=document.createTextNode(&quot;&quot;);return c.appendChild(t),c}return c.cloneNode(!0)}function N(t){const n=p(0),e=m();return e.onclick=()=>n(o=>o+1),_(()=>{e.firstChild.nodeValue=`Count: ${n()}`}),e}h(N,document.body);
         </code>
       </pre>
     </div>

package/package.json

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

package/src/plugin/index.ts

@@ -906,7 +906,7 @@ async function transformHTMLtoJSX(html: string, style: string) {
   const rootElement = template.content.firstElementChild;
 
   let scopedStyle = null;
-  if (style) {
+  if (style && rootElement) {
     addScopeId(rootElement, scopeId);
     scopedStyle = await scopeSelectors(style, scopeId);
   }

package/src/plugin/utils.ts

@@ -1,23 +1,163 @@
 export function extractParts(code: string) {
-  const scriptMatch = code.match(/<script([^>]*?)>([\s\S]*?)<\/script>/);
-  const styleMatch = code.match(/<style[^>]*>([\s\S]*?)<\/style>/);
-  const html = code
-    .replace(/<script[^>]*>[\s\S]*?<\/script>/, "")
-    .replace(/<style[^>]*>[\s\S]*?<\/style>/, "")
-    .trim();
+  // Helper to check if a position is inside a string literal or comment
+  function isInsideStringOrComment(code: string, pos: number): boolean {
+    let inString = false;
+    let stringChar = '';
+    let escaped = false;
+    let inLineComment = false;
+    let inBlockComment = false;
+    
+    for (let i = 0; i < pos; i++) {
+      const char = code[i];
+      const nextChar = code[i + 1];
+      
+      if (inLineComment) {
+        if (char === '\n') {
+          inLineComment = false;
+        }
+        continue;
+      }
+      
+      if (inBlockComment) {
+        if (char === '*' && nextChar === '/') {
+          inBlockComment = false;
+          i++; // skip the '/'
+        }
+        continue;
+      }
+      
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      
+      if (char === '\\') {
+        escaped = true;
+        continue;
+      }
+      
+      // Check for comment start
+      if (char === '/' && nextChar === '/') {
+        inLineComment = true;
+        i++; // skip the second '/'
+        continue;
+      }
+      
+      if (char === '/' && nextChar === '*') {
+        inBlockComment = true;
+        i++; // skip the '*'
+        continue;
+      }
+      
+      if (!inString && (char === '"' || char === "'" || char === '`')) {
+        inString = true;
+        stringChar = char;
+      } else if (inString && char === stringChar) {
+        inString = false;
+        stringChar = '';
+      }
+    }
+    
+    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 {
+    const openRegex = /<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] || ''
+            };
+          }
+        }
+      }
+    }
+    return null;
+  }
+
+  // Find first real <style> tag (not inside a string)
+  function findStyleSection(code: string): { start: number; contentStart: number; contentEnd: number; end: number } | null {
+    const openRegex = /<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;
+        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
+            };
+          }
+        }
+      }
+    }
+    return null;
+  }
 
+  // Extract sections
+  const scriptSection = findScriptSection(code);
+  const styleSection = findStyleSection(code);
+
+  let script = "";
   let scriptLang = "js";
-  if (scriptMatch && scriptMatch[1]) {
-    const langMatch = scriptMatch[1].match(/lang\s*=\s*["']([^"']+)["']/);
+  
+  if (scriptSection) {
+    script = code.slice(scriptSection.contentStart, scriptSection.contentEnd).trim();
+    const langMatch = scriptSection.attrs.match(/lang\s*=\s*["']([^"']+)["']/);
     if (langMatch) {
       scriptLang = langMatch[1];
     }
   }
 
+  let style = "";
+  if (styleSection) {
+    style = code.slice(styleSection.contentStart, styleSection.contentEnd).trim();
+  }
+
+  // Build HTML by removing script and style sections
+  // Remove from highest index to lowest to preserve indices
+  let html = code;
+  const sections = [];
+  if (scriptSection) {
+    sections.push({ start: scriptSection.start, end: scriptSection.end });
+  }
+  if (styleSection) {
+    sections.push({ start: styleSection.start, end: styleSection.end });
+  }
+  // Sort by start position descending (remove from end first)
+  sections.sort((a, b) => b.start - a.start);
+  
+  for (const section of sections) {
+    html = html.slice(0, section.start) + html.slice(section.end);
+  }
+  html = html.trim();
+
   return {
-    script: scriptMatch?.[2]?.trim() ?? "",
+    script,
     scriptLang,
-    style: styleMatch?.[1]?.trim() ?? "",
+    style,
     html,
   };
 };
@@ -46,20 +186,20 @@ export function splitScript(script: string) {
   const lines = script.split("\n");
   const imports = [];
   const body = [];
-  let currentImport = [];
+  let currentImport: string[] = [];
   let inImport = false;
   let braceCount = 0;
   let inString = false;
   let stringChar = "";
   let inMultiLineComment = false;
+  let escaped = false;
 
   // Helper function to check if import is complete without semicolon
-  function isImportComplete(line, braceCount, inString) {
+  function isImportComplete(lineIndex: number, braceCount: number, inString: boolean): boolean {
     // If we have balanced braces and not in a string, check if next non-empty line starts a new statement
     if (braceCount === 0 && !inString) {
       // Look ahead to see if next line starts a new statement/declaration
-      const nextLineIndex = lines.indexOf(line) + 1;
-      for (let i = nextLineIndex; i < lines.length; i++) {
+      for (let i = lineIndex + 1; i < lines.length; i++) {
         const nextLine = lines[i].trim();
         if (
           !nextLine || nextLine.startsWith("//") || nextLine.startsWith("/*")
@@ -76,6 +216,7 @@ export function splitScript(script: string) {
     return false;
   }
 
+  // Process each line, maintaining string/comment state
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const trimmed = line.trim();
@@ -88,14 +229,33 @@ export function splitScript(script: string) {
         body.push(line);
       }
 
-      if (line.includes("*/")) {
-        inMultiLineComment = false;
+      // Check for end of multi-line comment, tracking strings
+      for (let j = 0; j < line.length; j++) {
+        const char = line[j];
+        if (escaped) {
+          escaped = false;
+          continue;
+        }
+        if (char === '\\' && inString) {
+          escaped = true;
+          continue;
+        }
+        if (!inString && (char === '"' || char === "'" || char === '`')) {
+          inString = true;
+          stringChar = char;
+        } else if (inString && char === stringChar) {
+          inString = false;
+          stringChar = "";
+        } else if (!inString && char === '*' && line[j + 1] === '/') {
+          inMultiLineComment = false;
+          break;
+        }
       }
       continue;
     }
 
-    // Check for start of multi-line comment
-    if (line.includes("/*") && !inString) {
+    // Check for start of multi-line comment (only if not in string)
+    if (!inString && line.includes("/*")) {
       inMultiLineComment = true;
       if (inImport) {
         currentImport.push(line);
@@ -103,15 +263,37 @@ export function splitScript(script: string) {
         body.push(line);
       }
 
-      if (!line.includes("*/")) {
+      // Check if comment ends on same line
+      for (let j = 0; j < line.length; j++) {
+        const char = line[j];
+        if (escaped) {
+          escaped = false;
+          continue;
+        }
+        if (char === '\\' && inString) {
+          escaped = true;
+          continue;
+        }
+        if (!inString && (char === '"' || char === "'" || char === '`')) {
+          inString = true;
+          stringChar = char;
+        } else if (inString && char === stringChar) {
+          inString = false;
+          stringChar = "";
+        } else if (!inString && char === '*' && line[j + 1] === '/') {
+          inMultiLineComment = false;
+          break;
+        }
+      }
+      
+      if (!inMultiLineComment) {
+        // Comment ended on same line
         continue;
-      } else {
-        inMultiLineComment = false;
       }
     }
 
-    // Skip single-line comments when not in import
-    if (trimmed.startsWith("//") && !inImport) {
+    // Skip single-line comments when not in import (only if not in string)
+    if (!inString && !inImport && trimmed.startsWith("//")) {
       body.push(line);
       continue;
     }
@@ -122,38 +304,50 @@ export function splitScript(script: string) {
       continue;
     }
 
-    // Start of import statement
-    if (!inImport && trimmed.startsWith("import")) {
-      inImport = true;
-      currentImport = [line];
-      braceCount = 0;
-      inString = false;
+    // Process the line character by character to maintain string state
+    let lineBraceCount = 0;
+    let lineInString = inString;
+    let lineStringChar = stringChar;
+    let lineEscaped = false;
 
-      // Count braces and track strings in the import line
-      for (let j = 0; j < line.length; j++) {
-        const char = line[j];
+    for (let j = 0; j < line.length; j++) {
+      const char = line[j];
 
-        if (inString) {
-          if (char === stringChar && line[j - 1] !== "\\") {
-            inString = false;
-            stringChar = "";
-          }
-        } else {
-          if (char === '"' || char === "'" || char === "`") {
-            inString = true;
-            stringChar = char;
-          } else if (char === "{") {
-            braceCount++;
-          } else if (char === "}") {
-            braceCount--;
-          }
-        }
+      if (lineEscaped) {
+        lineEscaped = false;
+        continue;
       }
 
-      // Check if import is complete
+      if (char === '\\' && lineInString) {
+        lineEscaped = true;
+        continue;
+      }
+
+      if (!lineInString && (char === '"' || char === "'" || char === '`')) {
+        lineInString = true;
+        lineStringChar = char;
+      } else if (lineInString && char === lineStringChar) {
+        lineInString = false;
+        lineStringChar = "";
+      } else if (!lineInString && char === '{') {
+        lineBraceCount++;
+      } else if (!lineInString && char === '}') {
+        lineBraceCount--;
+      }
+    }
+
+    // Start of import statement (only if not inside a string)
+    if (!inImport && !inString && trimmed.startsWith("import")) {
+      inImport = true;
+      currentImport = [line];
+      braceCount = lineBraceCount;
+      inString = lineInString;
+      stringChar = lineStringChar;
+
+      // Check if import is complete on this line
       if (
         (trimmed.endsWith(";") ||
-          isImportComplete(trimmed, braceCount, inString)) &&
+          isImportComplete(i, braceCount, inString)) &&
         braceCount === 0 && !inString
       ) {
         imports.push(currentImport.join("\n"));
@@ -163,32 +357,14 @@ export function splitScript(script: string) {
     } // Continue import statement
     else if (inImport) {
       currentImport.push(line);
-
-      // Count braces and track strings in the current line
-      for (let j = 0; j < line.length; j++) {
-        const char = line[j];
-
-        if (inString) {
-          if (char === stringChar && line[j - 1] !== "\\") {
-            inString = false;
-            stringChar = "";
-          }
-        } else {
-          if (char === '"' || char === "'" || char === "`") {
-            inString = true;
-            stringChar = char;
-          } else if (char === "{") {
-            braceCount++;
-          } else if (char === "}") {
-            braceCount--;
-          }
-        }
-      }
+      braceCount += lineBraceCount;
+      inString = lineInString;
+      stringChar = lineStringChar;
 
       // Check if import is complete
       if (
         (trimmed.endsWith(";") ||
-          isImportComplete(trimmed, braceCount, inString)) &&
+          isImportComplete(i, braceCount, inString)) &&
         braceCount === 0 && !inString
       ) {
         imports.push(currentImport.join("\n"));
@@ -198,12 +374,21 @@ export function splitScript(script: string) {
     } // Regular body content
     else {
       body.push(line);
+      // Update global string state
+      inString = lineInString;
+      stringChar = lineStringChar;
     }
   }
 
-  // Handle unterminated import (likely malformed)
+  // Handle unterminated import (likely malformed or still in string)
   if (currentImport.length > 0) {
-    imports.push(currentImport.join("\n"));
+    if (inImport && !inString) {
+      // Import seems complete but wasn't captured properly
+      imports.push(currentImport.join("\n"));
+    } else {
+      // Still in string or incomplete, treat as body
+      body.push(...currentImport);
+    }
   }
 
   return {

package/tests/CodeSnippet.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import CodeSnippet from "./CodeSnippet.thyn";
+
+describe("CodeSnippet component", () => {
+  it("should render codeSnippet string containing script/style tags", () => {
+    const root = CodeSnippet();
+    const display = root.querySelector('.display');
+    
+    // The component should render the codeSnippet content
+    expect(display).toBeTruthy();
+    expect(display.textContent).toContain("// App.thyn");
+    expect(display.textContent).toContain("<script>");
+    expect(display.textContent).toContain("</script>");
+    expect(display.textContent).toContain("<style>");
+    expect(display.textContent).toContain("</style>");
+    expect(display.textContent).toContain("button {");
+  });
+
+  it("should apply the component's actual style, not style from codeSnippet", () => {
+    const root = CodeSnippet();
+    const display = root.querySelector('.display');
+    
+    // The display element should have the component's style applied
+    // (white-space: pre and font-family: monospace from actual <style> section)
+    // Note: scoped CSS adds a class like 'thyn-e', so we check it contains 'display'
+    expect(display.className).toContain('display');
+  });
+});

package/tests/CodeSnippet.thyn

@@ -0,0 +1,31 @@
+<script>
+  const count = $signal(0);
+  
+  // This code snippet string contains <script> and <style> tags
+  // which should NOT be extracted as actual sections
+  const codeSnippet = `// App.thyn
+<script>
+  const count = $signal(0);
+</script>
+
+<button onclick={() => count(c => c + 1)}>
+  Count: {{ count() }}
+</button>
+
+<style>
+  button {
+    background: #333;
+  }
+</style>`;
+</script>
+
+<div>
+  <p class="display">{{ codeSnippet }}</p>
+</div>
+
+<style>
+  .display {
+    white-space: pre;
+    font-family: monospace;
+  }
+</style>

package/tests/ImportInString.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import ImportInString from "./ImportInString.thyn";
+
+describe("ImportInString component", () => {
+  it("should not treat imports inside string literals as real imports", () => {
+    const root = ImportInString();
+    expect(root.textContent).toBe("42");
+  });
+
+  it("should include the import statements in the codeSnippet", () => {
+    const root = ImportInString();
+    // The codeSnippet should be available (this tests the script was parsed correctly)
+    expect(root).toBeTruthy();
+  });
+});

package/tests/ImportInString.thyn

@@ -0,0 +1,15 @@
+<script>
+  const codeSnippet = `// main.js
+import { mount } from '@thyn/core';
+import App from './App.thyn';
+
+mount(App, document.body);`;
+
+  const value = 42;
+</script>
+
+<div>{{ value }}</div>
+
+<style>
+  div { color: red; }
+</style>