@thyn/core 0.0.349 → 0.0.351

package/.github/workflows/test.yml

@@ -23,17 +23,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Install core dependencies
-        working-directory: packages/core
         run: npm install
 
       - name: Run core tests
-        working-directory: packages/core
-        run: npm test
-
-      - name: Install vite-plugin dependencies
-        working-directory: packages/vite-plugin
-        run: npm install
-
-      - name: Run vite-plugin tests
-        working-directory: packages/vite-plugin
         run: npm test

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