@thyn/core 0.0.350 → 0.0.351

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,
     };
 }

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.350",
         "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.350",
+      "resolved": "https://registry.npmjs.org/@thyn/core/-/core-0.0.350.tgz",
+      "integrity": "sha512-SZTB1jjjsXEkZg1BlH7s4Lhe8kWN/74ufNlNMnI86x+9tiyc0yvMLh+GFhe7VkIS//NrEwdgjR3ktpJlGeMEfA==",
       "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.350",
     "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.351",
   "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,
   };
 };

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>