lingo.dev 0.117.4 → 0.117.5

package/build/cli.mjs

@@ -3410,8 +3410,8 @@ function serializeElement(node) {
   const attrString = Object.entries(attributes).map(([key, value]) => ` ${key}="${escapeAttributeValue(String(value))}"`).join("");
   const children = Array.isArray(node.$$) ? node.$$ : [];
   if (children.length === 0) {
-    const textContent = node._ ?? "";
-    return `<${name}${attrString}>${textContent}</${name}>`;
+    const textContent2 = node._ ?? "";
+    return `<${name}${attrString}>${textContent2}</${name}>`;
   }
   const childContent = children.map(serializeElement).join("");
   return `<${name}${attrString}>${childContent}</${name}>`;
@@ -3500,135 +3500,335 @@ function createPullOutputCleaner() {
 }
 
 // src/cli/loaders/html.ts
-import { JSDOM } from "jsdom";
-function normalizeTextContent(text, isStandalone) {
-  const trimmed = text.trim();
-  if (!trimmed) return "";
-  return trimmed;
-}
+import * as htmlparser2 from "htmlparser2";
+import { DomHandler } from "domhandler";
+import * as domutils from "domutils";
+import * as DomSerializer from "dom-serializer";
 function createHtmlLoader() {
+  const PHRASING_ELEMENTS = /* @__PURE__ */ new Set([
+    // Text-level semantics
+    "a",
+    "abbr",
+    "b",
+    "bdi",
+    "bdo",
+    "br",
+    "cite",
+    "code",
+    "data",
+    "dfn",
+    "em",
+    "i",
+    "kbd",
+    "mark",
+    "q",
+    "ruby",
+    "s",
+    "samp",
+    "small",
+    "span",
+    "strong",
+    "sub",
+    "sup",
+    "time",
+    "u",
+    "var",
+    "wbr",
+    // Media
+    "audio",
+    "img",
+    "video",
+    "picture",
+    // Interactive
+    "button",
+    "input",
+    "label",
+    "select",
+    "textarea",
+    // Embedded
+    "canvas",
+    "iframe",
+    "object",
+    "svg",
+    "math",
+    // Other
+    "del",
+    "ins",
+    "map",
+    "area"
+  ]);
+  const BLOCK_ELEMENTS = /* @__PURE__ */ new Set([
+    "div",
+    "p",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "ul",
+    "ol",
+    "li",
+    "dl",
+    "dt",
+    "dd",
+    "blockquote",
+    "pre",
+    "article",
+    "aside",
+    "nav",
+    "section",
+    "header",
+    "footer",
+    "main",
+    "figure",
+    "figcaption",
+    "table",
+    "thead",
+    "tbody",
+    "tfoot",
+    "tr",
+    "td",
+    "th",
+    "caption",
+    "form",
+    "fieldset",
+    "legend",
+    "details",
+    "summary",
+    "address",
+    "hr",
+    "search",
+    "dialog",
+    "noscript",
+    "title"
+    // <title> should be treated as a block element for translation
+  ]);
+  const UNLOCALIZABLE_TAGS = /* @__PURE__ */ new Set(["script", "style"]);
   const LOCALIZABLE_ATTRIBUTES = {
     meta: ["content"],
-    img: ["alt"],
-    input: ["placeholder"],
-    a: ["title"]
+    img: ["alt", "title"],
+    input: ["placeholder", "title"],
+    textarea: ["placeholder", "title"],
+    a: ["title"],
+    abbr: ["title"],
+    button: ["title"],
+    link: ["title"]
   };
-  const UNLOCALIZABLE_TAGS = ["script", "style"];
   return createLoader({
     async pull(locale, input2) {
       const result = {};
-      const dom = new JSDOM(input2);
-      const document = dom.window.document;
-      const getPath = (node, attribute) => {
-        const indices = [];
-        let current = node;
-        let rootParent = "";
-        while (current) {
-          const parent = current.parentElement;
-          if (!parent) break;
-          if (parent === document.documentElement) {
-            rootParent = current.nodeName.toLowerCase();
-            break;
+      const handler = new DomHandler();
+      const parser = new htmlparser2.Parser(handler, {
+        lowerCaseTags: false,
+        lowerCaseAttributeNames: false
+      });
+      parser.write(input2);
+      parser.end();
+      const dom = handler.dom;
+      function isInsideUnlocalizableTag(element) {
+        let current = element.parent;
+        while (current && current.type === "tag") {
+          if (UNLOCALIZABLE_TAGS.has(current.name.toLowerCase())) {
+            return true;
           }
-          const siblings = Array.from(parent.childNodes).filter(
-            (n) => n.nodeType === 1 || n.nodeType === 3 && n.textContent?.trim()
-          );
-          const index = siblings.indexOf(current);
-          if (index !== -1) {
-            indices.unshift(index);
+          current = current.parent;
+        }
+        return false;
+      }
+      function hasTranslatableContent(element) {
+        const text = domutils.textContent(element);
+        return text.trim().length > 0;
+      }
+      function isLeafBlock(element) {
+        const childElements = element.children.filter(
+          (child) => child.type === "tag"
+        );
+        for (const child of childElements) {
+          if (BLOCK_ELEMENTS.has(child.name.toLowerCase())) {
+            return false;
           }
-          current = parent;
         }
-        const basePath = rootParent ? `${rootParent}/${indices.join("/")}` : indices.join("/");
-        return attribute ? `${basePath}#${attribute}` : basePath;
-      };
-      const processNode = (node) => {
-        let parent = node.parentElement;
-        while (parent) {
-          if (UNLOCALIZABLE_TAGS.includes(parent.tagName.toLowerCase())) {
-            return;
+        return hasTranslatableContent(element);
+      }
+      function getInnerHTML(element) {
+        return element.children.map((child) => DomSerializer.default(child, { encodeEntities: false })).join("");
+      }
+      function extractAttributes(element, path19) {
+        const tagName = element.name.toLowerCase();
+        const attrs = LOCALIZABLE_ATTRIBUTES[tagName];
+        if (!attrs) return;
+        for (const attr of attrs) {
+          const value = element.attribs?.[attr];
+          if (value && value.trim()) {
+            result[`${path19}#${attr}`] = value.trim();
           }
-          parent = parent.parentElement;
         }
-        if (node.nodeType === 3) {
-          const text = node.textContent || "";
-          const normalizedText = normalizeTextContent(text, true);
-          if (normalizedText) {
-            result[getPath(node)] = normalizedText;
+      }
+      function extractFromElement(element, pathParts) {
+        const path19 = pathParts.join("/");
+        if (isInsideUnlocalizableTag(element)) {
+          return;
+        }
+        extractAttributes(element, path19);
+        const tagName = element.name.toLowerCase();
+        if (BLOCK_ELEMENTS.has(tagName) && isLeafBlock(element)) {
+          const content = getInnerHTML(element).trim();
+          if (content) {
+            result[path19] = content;
           }
-        } else if (node.nodeType === 1) {
-          const element = node;
-          const tagName = element.tagName.toLowerCase();
-          const attributes = LOCALIZABLE_ATTRIBUTES[tagName] || [];
-          attributes.forEach((attr) => {
-            const value = element.getAttribute(attr);
-            if (value) {
-              result[getPath(element, attr)] = value;
-            }
-          });
-          Array.from(element.childNodes).filter(
-            (n) => n.nodeType === 1 || n.nodeType === 3 && n.textContent?.trim()
-          ).forEach(processNode);
+          return;
         }
-      };
-      Array.from(document.head.childNodes).filter(
-        (n) => n.nodeType === 1 || n.nodeType === 3 && n.textContent?.trim()
-      ).forEach(processNode);
-      Array.from(document.body.childNodes).filter(
-        (n) => n.nodeType === 1 || n.nodeType === 3 && n.textContent?.trim()
-      ).forEach(processNode);
+        if (PHRASING_ELEMENTS.has(tagName) && hasTranslatableContent(element)) {
+          const content = getInnerHTML(element).trim();
+          if (content) {
+            result[path19] = content;
+          }
+          return;
+        }
+        let childIndex = 0;
+        const childElements = element.children.filter(
+          (child) => child.type === "tag"
+        );
+        for (const child of childElements) {
+          extractFromElement(child, [...pathParts, childIndex++]);
+        }
+      }
+      const html = domutils.findOne(
+        (elem) => elem.type === "tag" && elem.name.toLowerCase() === "html",
+        dom,
+        true
+      );
+      if (html) {
+        const head = domutils.findOne(
+          (elem) => elem.type === "tag" && elem.name.toLowerCase() === "head",
+          html.children,
+          true
+        );
+        const body = domutils.findOne(
+          (elem) => elem.type === "tag" && elem.name.toLowerCase() === "body",
+          html.children,
+          true
+        );
+        if (head) {
+          let headIndex = 0;
+          const headChildren = head.children.filter(
+            (child) => child.type === "tag"
+          );
+          for (const child of headChildren) {
+            extractFromElement(child, ["head", headIndex++]);
+          }
+        }
+        if (body) {
+          let bodyIndex = 0;
+          const bodyChildren = body.children.filter(
+            (child) => child.type === "tag"
+          );
+          for (const child of bodyChildren) {
+            extractFromElement(child, ["body", bodyIndex++]);
+          }
+        }
+      } else {
+        let rootIndex = 0;
+        const rootElements = dom.filter(
+          (child) => child.type === "tag"
+        );
+        for (const child of rootElements) {
+          extractFromElement(child, [rootIndex++]);
+        }
+      }
       return result;
     },
     async push(locale, data, originalInput) {
-      const dom = new JSDOM(
+      const handler = new DomHandler();
+      const parser = new htmlparser2.Parser(handler, {
+        lowerCaseTags: false,
+        lowerCaseAttributeNames: false
+      });
+      parser.write(
         originalInput ?? "<!DOCTYPE html><html><head></head><body></body></html>"
       );
-      const document = dom.window.document;
-      const htmlElement = document.documentElement;
-      htmlElement.setAttribute("lang", locale);
-      const paths = Object.keys(data).sort((a, b) => {
-        const aDepth = a.split("/").length;
-        const bDepth = b.split("/").length;
-        return aDepth - bDepth;
-      });
-      paths.forEach((path19) => {
-        const value = data[path19];
-        const [nodePath, attribute] = path19.split("#");
-        const [rootTag, ...indices] = nodePath.split("/");
-        let parent = rootTag === "head" ? document.head : document.body;
-        let current = parent;
-        for (let i = 0; i < indices.length; i++) {
-          const index = parseInt(indices[i]);
-          const siblings = Array.from(parent.childNodes).filter(
-            (n) => n.nodeType === 1 || n.nodeType === 3 && n.textContent?.trim()
+      parser.end();
+      const dom = handler.dom;
+      const html = domutils.findOne(
+        (elem) => elem.type === "tag" && elem.name.toLowerCase() === "html",
+        dom,
+        true
+      );
+      if (html) {
+        html.attribs = html.attribs || {};
+        html.attribs.lang = locale;
+      }
+      function traverseByIndices(element, indices) {
+        let current = element;
+        for (const indexStr of indices) {
+          if (!current) return null;
+          const index = parseInt(indexStr, 10);
+          const children = current.children.filter(
+            (child) => child.type === "tag"
           );
-          if (index >= siblings.length) {
-            if (i === indices.length - 1) {
-              const textNode = document.createTextNode("");
-              parent.appendChild(textNode);
-              current = textNode;
-            } else {
-              const element = document.createElement("div");
-              parent.appendChild(element);
-              current = element;
-              parent = element;
-            }
-          } else {
-            current = siblings[index];
-            if (current.nodeType === 1) {
-              parent = current;
-            }
+          if (index >= children.length) {
+            return null;
           }
+          current = children[index];
+        }
+        return current;
+      }
+      function resolvePathToElement(path19) {
+        const parts = path19.split("/");
+        const [rootTag, ...indices] = parts;
+        let current = null;
+        if (html) {
+          if (rootTag === "head") {
+            current = domutils.findOne(
+              (elem) => elem.type === "tag" && elem.name.toLowerCase() === "head",
+              html.children,
+              true
+            );
+          } else if (rootTag === "body") {
+            current = domutils.findOne(
+              (elem) => elem.type === "tag" && elem.name.toLowerCase() === "body",
+              html.children,
+              true
+            );
+          }
+          if (!current) return null;
+          return traverseByIndices(current, indices);
+        } else {
+          const rootElements = dom.filter(
+            (child) => child.type === "tag"
+          );
+          const rootIndex = parseInt(rootTag, 10);
+          if (rootIndex >= rootElements.length) {
+            return null;
+          }
+          current = rootElements[rootIndex];
+          return traverseByIndices(current, indices);
         }
-        if (current) {
-          if (attribute) {
-            current.setAttribute(attribute, value);
+      }
+      for (const [path19, value] of Object.entries(data)) {
+        const [nodePath, attribute] = path19.split("#");
+        const element = resolvePathToElement(nodePath);
+        if (!element) {
+          console.warn(`Path not found in original HTML: ${nodePath}`);
+          continue;
+        }
+        if (attribute) {
+          element.attribs = element.attribs || {};
+          element.attribs[attribute] = value;
+        } else {
+          if (value) {
+            const valueHandler = new DomHandler();
+            const valueParser = new htmlparser2.Parser(valueHandler);
+            valueParser.write(value);
+            valueParser.end();
+            element.children = valueHandler.dom;
           } else {
-            current.textContent = value;
+            element.children = [];
           }
         }
-      });
-      return dom.serialize();
+      }
+      return DomSerializer.default(dom, { encodeEntities: false });
     }
   });
 }
@@ -4074,7 +4274,7 @@ function escapeString(str) {
 }
 
 // src/cli/loaders/xcode-strings/parser.ts
-var Parser = class {
+var Parser2 = class {
   tokens;
   pos;
   constructor(tokens) {
@@ -4147,7 +4347,7 @@ function createXcodeStringsLoader() {
     async pull(locale, input2) {
       const tokenizer = new Tokenizer(input2);
       const tokens = tokenizer.tokenize();
-      const parser = new Parser(tokens);
+      const parser = new Parser2(tokens);
       const result = parser.parse();
       return result;
     },
@@ -5011,7 +5211,7 @@ function preserveCommentOrder(section, originalSection) {
 }
 
 // src/cli/loaders/xliff.ts
-import { JSDOM as JSDOM2 } from "jsdom";
+import { JSDOM } from "jsdom";
 function createXliffLoader() {
   return createLoader({
     async pull(locale, input2, _ctx, originalLocale) {
@@ -5020,7 +5220,7 @@ function createXliffLoader() {
         return createEmptyResult(originalLocale, locale);
       }
       try {
-        const dom = new JSDOM2(trimmedInput, { contentType: "text/xml" });
+        const dom = new JSDOM(trimmedInput, { contentType: "text/xml" });
         const document = dom.window.document;
         const parserError = document.querySelector("parsererror");
         if (parserError) {
@@ -5046,7 +5246,7 @@ function createXliffLoader() {
         return pushNewFile(locale, translations, originalLocale);
       }
       try {
-        const dom = new JSDOM2(originalInput, { contentType: "text/xml" });
+        const dom = new JSDOM(originalInput, { contentType: "text/xml" });
         const document = dom.window.document;
         const xliffElement = document.documentElement;
         const version = xliffElement.getAttribute("version") || "1.2";
@@ -5346,7 +5546,7 @@ ${serialized}`;
   return serialized;
 }
 function formatXml(xml) {
-  const dom = new JSDOM2(xml, { contentType: "text/xml" });
+  const dom = new JSDOM(xml, { contentType: "text/xml" });
   const doc = dom.window.document;
   function formatElement(element, depth = 0) {
     const indent2 = "  ".repeat(depth);
@@ -5359,10 +5559,10 @@ function formatXml(xml) {
     if (cdataNode) {
       return `${indent2}${openTag}<![CDATA[${cdataNode.nodeValue}]]></${tagName}>`;
     }
-    const textContent = element.textContent?.trim() || "";
+    const textContent2 = element.textContent?.trim() || "";
     const hasOnlyText = element.childNodes.length === 1 && element.childNodes[0].nodeType === 3;
-    if (hasOnlyText && textContent) {
-      return `${indent2}${openTag}${textContent}</${tagName}>`;
+    if (hasOnlyText && textContent2) {
+      return `${indent2}${openTag}${textContent2}</${tagName}>`;
     }
     const children = Array.from(element.children);
     if (children.length === 0) {
@@ -5389,7 +5589,7 @@ function pushNewFile(locale, translations, originalLocale) {
     <body></body>
   </file>
 </xliff>`;
-  const dom = new JSDOM2(skeleton, { contentType: "text/xml" });
+  const dom = new JSDOM(skeleton, { contentType: "text/xml" });
   const document = dom.window.document;
   const bodyElement = document.querySelector("body");
   Object.entries(translations).forEach(([key, value]) => {
@@ -8682,14 +8882,14 @@ function parseEjsForTranslation(input2) {
     if (part.type === "ejs") {
       template += part.content;
     } else {
-      const textContent = part.content;
+      const textContent2 = part.content;
       const htmlTagRegex = /<[^>]+>/g;
       const textParts = [];
       let lastTextIndex = 0;
       let htmlMatch;
-      while ((htmlMatch = htmlTagRegex.exec(textContent)) !== null) {
+      while ((htmlMatch = htmlTagRegex.exec(textContent2)) !== null) {
         if (htmlMatch.index > lastTextIndex) {
-          const textBefore = textContent.slice(lastTextIndex, htmlMatch.index);
+          const textBefore = textContent2.slice(lastTextIndex, htmlMatch.index);
           if (textBefore.trim()) {
             textParts.push({ type: "text", content: textBefore });
           } else {
@@ -8699,8 +8899,8 @@ function parseEjsForTranslation(input2) {
         textParts.push({ type: "html", content: htmlMatch[0] });
         lastTextIndex = htmlMatch.index + htmlMatch[0].length;
       }
-      if (lastTextIndex < textContent.length) {
-        const remainingText = textContent.slice(lastTextIndex);
+      if (lastTextIndex < textContent2.length) {
+        const remainingText = textContent2.slice(lastTextIndex);
         if (remainingText.trim()) {
           textParts.push({ type: "text", content: remainingText });
         } else {
@@ -8708,11 +8908,11 @@ function parseEjsForTranslation(input2) {
         }
       }
       if (textParts.length === 0) {
-        const trimmedContent = textContent.trim();
+        const trimmedContent = textContent2.trim();
         if (trimmedContent) {
-          textParts.push({ type: "text", content: textContent });
+          textParts.push({ type: "text", content: textContent2 });
         } else {
-          textParts.push({ type: "html", content: textContent });
+          textParts.push({ type: "html", content: textContent2 });
         }
       }
       for (const textPart of textParts) {
@@ -13639,7 +13839,7 @@ async function renderHero2() {
 // package.json
 var package_default = {
   name: "lingo.dev",
-  version: "0.117.4",
+  version: "0.117.5",
   description: "Lingo.dev CLI",
   private: false,
   publishConfig: {
@@ -13797,6 +13997,9 @@ var package_default = {
     "date-fns": "4.1.0",
     dedent: "1.7.0",
     diff: "7.0.0",
+    "dom-serializer": "2.0.0",
+    domhandler: "5.0.3",
+    domutils: "3.2.2",
     dotenv: "16.4.7",
     ejs: "3.1.10",
     express: "5.1.0",
@@ -13807,6 +14010,7 @@ var package_default = {
     glob: "11.1.0",
     "gradient-string": "3.0.0",
     "gray-matter": "4.0.3",
+    htmlparser2: "10.0.0",
     ini: "5.0.0",
     ink: "4.2.0",
     "ink-progress-bar": "3.0.0",