@thyn/core 0.0.344 → 0.0.347

package/src/plugin/utils.ts

@@ -0,0 +1,213 @@
+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();
+
+  let scriptLang = "js";
+  if (scriptMatch && scriptMatch[1]) {
+    const langMatch = scriptMatch[1].match(/lang\s*=\s*["']([^"']+)["']/);
+    if (langMatch) {
+      scriptLang = langMatch[1];
+    }
+  }
+
+  return {
+    script: scriptMatch?.[2]?.trim() ?? "",
+    scriptLang,
+    style: styleMatch?.[1]?.trim() ?? "",
+    html,
+  };
+};
+
+export function escapeTemplateLiteral(text: string): string {
+  return text
+    .replace(/\\/g, '\\\\')     // Escape backslashes
+    .replace(/`/g, '\\`')       // Escape backticks
+    .replace(/\$/g, '\\$');  // Escape interpolation
+}
+
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+export function splitScript(script: string) {
+  if (!script || typeof script !== "string") {
+    return { imports: [], body: [] };
+  }
+
+  const lines = script.split("\n");
+  const imports = [];
+  const body = [];
+  let currentImport = [];
+  let inImport = false;
+  let braceCount = 0;
+  let inString = false;
+  let stringChar = "";
+  let inMultiLineComment = false;
+
+  // Helper function to check if import is complete without semicolon
+  function isImportComplete(line, 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++) {
+        const nextLine = lines[i].trim();
+        if (
+          !nextLine || nextLine.startsWith("//") || nextLine.startsWith("/*")
+        ) {
+          continue; // Skip empty lines and comments
+        }
+        // If next line starts with typical JS keywords/patterns, current import is complete
+        return /^(const|let|var|function|class|export|if|for|while|switch|try|return|\w+\s*[=:]|\w+\()/
+          .test(nextLine);
+      }
+      // If we reached end of file, import is complete
+      return true;
+    }
+    return false;
+  }
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Handle multi-line comments
+    if (inMultiLineComment) {
+      if (inImport) {
+        currentImport.push(line);
+      } else {
+        body.push(line);
+      }
+
+      if (line.includes("*/")) {
+        inMultiLineComment = false;
+      }
+      continue;
+    }
+
+    // Check for start of multi-line comment
+    if (line.includes("/*") && !inString) {
+      inMultiLineComment = true;
+      if (inImport) {
+        currentImport.push(line);
+      } else {
+        body.push(line);
+      }
+
+      if (!line.includes("*/")) {
+        continue;
+      } else {
+        inMultiLineComment = false;
+      }
+    }
+
+    // Skip single-line comments when not in import
+    if (trimmed.startsWith("//") && !inImport) {
+      body.push(line);
+      continue;
+    }
+
+    // Skip empty lines when not in import
+    if (!trimmed && !inImport) {
+      body.push(line);
+      continue;
+    }
+
+    // Start of import statement
+    if (!inImport && 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
+      if (
+        (trimmed.endsWith(";") ||
+          isImportComplete(trimmed, braceCount, inString)) &&
+        braceCount === 0 && !inString
+      ) {
+        imports.push(currentImport.join("\n"));
+        currentImport = [];
+        inImport = false;
+      }
+    } // 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--;
+          }
+        }
+      }
+
+      // Check if import is complete
+      if (
+        (trimmed.endsWith(";") ||
+          isImportComplete(trimmed, braceCount, inString)) &&
+        braceCount === 0 && !inString
+      ) {
+        imports.push(currentImport.join("\n"));
+        currentImport = [];
+        inImport = false;
+      }
+    } // Regular body content
+    else {
+      body.push(line);
+    }
+  }
+
+  // Handle unterminated import (likely malformed)
+  if (currentImport.length > 0) {
+    imports.push(currentImport.join("\n"));
+  }
+
+  return {
+    imports: imports.filter((imp) => imp.trim()),
+    body: body.length > 0 ? body : [""],
+  };
+}

package/tests/Bind.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import Bind from "./Bind.thyn";
+
+describe("Bind component", () => {
+  it("has bound class name", async () => {
+    const root = Bind();
+    expect(root.className).toBe("bar");
+  });
+
+  it("does not touch text content", async () => {
+    const root = Bind();
+    expect(root.textContent).toBe("const n={run:t,deps:new Set,td:null}");
+  });
+});

package/tests/Bind.thyn

@@ -0,0 +1,7 @@
+<script>
+  const foo = $signal("bar");
+</script>
+
+<div class={foo() === 'foo' ? 'danger' : 'bar'}>
+const n={run:t,deps:new Set,td:null}
+</div>

package/tests/ConsecInterps.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import ConsecInterps from "./ConsecInterps.thyn";
+
+describe("ConsecInterps component", () => {
+  it("renders", async () => {
+    const root = ConsecInterps();
+    expect(root.textContent).toBe("00");
+  });
+});

package/tests/ConsecInterps.thyn

@@ -0,0 +1,9 @@
+<script>
+  const foo = $signal(0);
+  const bar = $signal(0);
+</script>
+
+<div>
+  {{ foo() }}{{ bar() }}
+</div>
+

package/tests/Counter.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import Counter from "./Counter.thyn";
+
+describe("Counter component", () => {
+  it("increments on click", async () => {
+    const root = Counter();
+    expect(root.textContent).toBe("Count: 0");
+    root.click();
+    await Promise.resolve();
+    expect(root.textContent).toBe("Count: 1");
+  });
+});

package/tests/Counter.thyn

@@ -0,0 +1,7 @@
+<script>
+  const count = $signal(0);
+</script>
+
+<button onclick={() => count(c => c + 1)}>
+  Count: {{ count() }}
+</button>

package/tests/DoubleQuotes.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import DoubleQuotes from "./DoubleQuotes.thyn";
+
+describe("DoubleQuotes component", () => {
+  it("handles double quotes in bound js expression", async () => {
+    const root = DoubleQuotes();
+    expect(root.textContent).toBe("abc");
+  });
+});

package/tests/DoubleQuotes.thyn

@@ -0,0 +1,3 @@
+<div #for={char in ["a", "b", "c"]}>
+  {{ char }}
+</div>

package/tests/Escape.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import Escape from "./Escape.thyn";
+
+describe("Escape component", () => {
+  it("escapes curly braces", async () => {
+    const root = Escape();
+    expect(root.textContent).toBe("{{ foo }}");
+  });
+});

package/tests/Escape.thyn

@@ -0,0 +1,3 @@
+<div>
+  \{{ foo \}}
+</div>

package/tests/EscapeDollar.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import EscapeDollar from "./EscapeDollar.thyn";
+
+describe("EscapeDollar component", () => {
+  it("escapes dollar sign", async () => {
+    const root = EscapeDollar();
+    expect(root.textContent).toBe("$foo");
+  });
+});

package/tests/EscapeDollar.thyn

@@ -0,0 +1,5 @@
+<script>
+  const foo = $signal("foo");
+</script>
+
+<div>${{ foo() }}</div>

package/tests/EventPipes.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import EventPipes from "./EventPipes.thyn";
+
+describe("EventPipes component", () => {
+  it("pipes event handlers", async () => {
+    const root = EventPipes();
+    expect(root.textContent).toBe("00");
+    root.querySelector(".inner").click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(root.textContent).toBe("10");
+  });
+});

package/tests/EventPipes.thyn

@@ -0,0 +1,11 @@
+<script>
+  const foo = $signal(0);
+  const bar = $signal(0);
+</script>
+
+<div onclick={() => bar(c => c + 1)}>
+  <div class="inner" onclick.stop={() => foo(c => c + 1)}>
+    <span>{{ foo() }}</span><span>{{ bar() }}</span>
+  </div>
+</div>
+

package/tests/List.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import List from "./List.thyn";
+
+describe("List component", () => {
+  it("appends on click", async () => {
+    const root = List();
+    expect(root.textContent).toBe("start012end");
+    root.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(root.textContent).toBe("start0123end");
+    root.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(root.textContent).toBe("startend");
+    root.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(root.textContent).toBe("start0end");
+  });
+});

package/tests/List.thyn

@@ -0,0 +1,15 @@
+<script>
+  const items = $signal([0, 1, 2]);
+</script>
+
+<div onclick={() => items(v => v.length === 4 ? [] : [...v, v.length])}>
+  <p>
+    start 
+  </p>
+  <p #for={item in items()}>
+    {{ item }}
+  </p>
+  <p>
+    end
+  </p>
+</div>

package/tests/ListV2.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import List from "./ListV2.thyn";
+
+describe("List component", () => {
+  it("appends on click", async () => {
+    const root = List();
+    expect(root.textContent).toBe("start012end");
+    expect(root.querySelector(".selected").id).toBe("1");
+    root.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(root.textContent).toBe("start0123end");
+    expect(root.querySelector(".selected").id).toBe("1");
+    root.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(root.textContent).toBe("startend");
+    expect(root.querySelector(".selected")).toBeFalsy();
+  });
+});

package/tests/ListV2.thyn

@@ -0,0 +1,16 @@
+<script>
+  const items = $signal([$signal(0), $signal(1), $signal(2)]);
+  const selected = $signal(1);
+</script>
+
+<div onclick={() => items(v => v.length === 4 ? [] : [...v, $signal(v.length)])}>
+  <p>
+    start 
+  </p>
+  <p #for={item in items()} class={selected() === item() ? 'selected' : undefined} id={item()}>
+    {{ item() }}
+  </p>
+  <p>
+    end
+  </p>
+</div>

package/tests/MixElemAndText.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import MixElemAndText from "./MixElemAndText.thyn";
+
+describe("MixElemAndText component", () => {
+  it("renders", async () => {
+    const root = MixElemAndText();
+    expect(root.textContent).toBe("00");
+  });
+});

package/tests/MixElemAndText.thyn

@@ -0,0 +1,12 @@
+<script>
+  const foo = $signal(0);
+  const bar = $signal(0);
+</script>
+
+<div>
+  {{ foo() }}
+  <span>
+    {{ bar() }}
+  </span>
+</div>
+

package/tests/Show.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import Show from "./Show.thyn";
+
+describe("Show component", () => {
+  it("swaps on click", async () => {
+    const root = Show();
+    expect(root.textContent).toBe("foo");
+    root.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(root.textContent).toBe("bar");
+  });
+});

package/tests/Show.thyn

@@ -0,0 +1,8 @@
+<script>
+  const show = $signal(true);
+</script>
+
+<div onclick={() => show(c => !c)}>
+  <p #if={show()}>foo</p>
+  <p #else>bar</p>
+</div>

package/tests/Template.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import Template from "./Template.thyn";
+
+describe("Template component", () => {
+  it("finds nested reactive node", async () => {
+    const root = Template();
+    expect(root.textContent).toBe("foo0");
+  });
+});

package/tests/Template.thyn

@@ -0,0 +1,8 @@
+<script>
+  const foo = $signal(0);
+</script>
+
+<div>
+  <h1>foo</h1>
+  <p>{{ foo() }}</p>
+</div>