@dualkit/convert 0.2.0-beta.0 → 0.3.0-beta.0

package/README.md

@@ -84,7 +84,8 @@ Convert reads a `convert` block from `dualkit.config.json`, or from the file `--
 
 Convert flags these in the report instead of guessing:
 
-- Text that shares an element with other elements, such as `Hello <b>{name}</b>`, or a plural built in code. These need rich text or a plural message, by hand. Rich text is not converted in this version.
+- A word built by a ternary, such as `item{n === 1 ? '' : 's'}`. This needs a plural message, by hand.
+- A sentence with a block element or a custom component inside it. Convert splits the text at that element, so each part is its own message.
 - Text outside any component, such as a module-level constant or a Next.js `metadata` title, and the `<title>` in a Vite app's `index.html`.
 - A `className` built at run time, which it cannot read in full.
 - Classes with no logical form, inline SVG icons and files it cannot parse.
@@ -99,6 +100,7 @@ It refuses, with a one-line reason, when:
 
 ## Known gaps
 
+- next-intl needs TypeScript 5. An app on an older version will fail its type check after converting.
 - If the app has its own middleware or proxy file, convert moves it to `app-middleware` and runs it first, on the path without its locale. We tested this with a hand-written login check on Next.js 15. Clerk and other auth libraries are untested, so check your login after converting.
 - Convert does not place the language switch, because that would change the English look. It writes `components/dualkit-language-switch.tsx` and tells you to add it.
 - Next.js sends a visitor whose browser asks for Arabic from an English URL to the Arabic page. That is next-intl's locale detection, and convert leaves it on.

package/dist/index.cjs

@@ -392,6 +392,8 @@ function mergeLedger(existing, added) {
   }
   return [...existing, ...fresh].sort(byKey);
 }
+var marks = (text) => [...text.matchAll(/\{[^}]*\}|<\/?[a-z0-9]+>/gi)].map((m) => m[0]).sort().join(" ");
+var brokenMarks = (entries) => entries.filter((e) => e.status !== "pending" && e.ar !== "" && marks(e.ar) !== marks(e.en));
 var textFor = (entry, locale) => locale === "en" || entry.status === "pending" || entry.ar === "" ? entry.en : entry.ar;
 var group = () => /* @__PURE__ */ Object.create(null);
 function messagesFor(entries, locale) {
@@ -944,7 +946,25 @@ var tInScope = (ancestors) => ancestors.some((node) => scopeNames(node).includes
 
 // src/transforms/strings.ts
 var SKIP = /* @__PURE__ */ new Set(["loc", "leadingComments", "trailingComments", "innerComments", "extra"]);
-var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set(["alt", "title", "placeholder", "aria-label", "label"]);
+var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "alt",
+  "title",
+  "placeholder",
+  "aria-label",
+  "label",
+  "aria-description",
+  "aria-placeholder",
+  "aria-roledescription",
+  "description",
+  "subtitle",
+  "heading",
+  "caption",
+  "hint",
+  "tooltip",
+  "helperText",
+  "pageTitle"
+]);
+var INLINE = /* @__PURE__ */ new Set(["a", "abbr", "b", "bdi", "cite", "code", "del", "em", "i", "ins", "kbd", "Link", "mark", "q", "s", "small", "span", "strong", "sub", "sup", "u"]);
 var LETTER = /\p{L}/u;
 var PROSE = /^\p{Lu}\p{Ll}/u;
 var NOT_PROSE = /[/\\_=<>{}@#|]/;
@@ -962,7 +982,7 @@ function stemOf(path) {
   if (!ROUTE_STEMS.has(stem)) return kebab(stem) || "file";
   return kebab(routeDirs(parts).join("-")) || "home";
 }
-var keyWords = (en) => ascii(en.replace(/\{[^}]*\}/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
+var keyWords = (en) => ascii(en.replace(/\{[^}]*\}|<[^>]*>/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
 function flag(ctx, offset, kind, message, suggestion) {
   ctx.flags.push({ file: ctx.file.path, line: lineOf(ctx.file.text, offset), kind, message, suggestion });
 }
@@ -976,7 +996,7 @@ function keyFor(ctx, en) {
   ctx.byText.set(en, key);
   return key;
 }
-function place(ctx, ancestors, start2, end, en, values) {
+function place(ctx, ancestors, { start: start2, end, en, code, hookless }) {
   const component = componentOf(ancestors);
   if (!component) {
     flag(
@@ -1011,8 +1031,8 @@ function place(ctx, ancestors, start2, end, en, values) {
   const isNew = !ctx.byText.has(en);
   const key = keyFor(ctx, en);
   if (isNew) ctx.entries.push({ key, en, ar: "", status: "pending", file: ctx.file.path, line: lineOf(ctx.file.text, start2) });
-  ctx.edits.push({ start: start2, end, text: `{t('${key}'${values ? `, { ${values} }` : ""})}` });
-  ctx.components.add(component);
+  ctx.edits.push({ start: start2, end, text: code(key) });
+  if (!hookless) ctx.components.add(component);
 }
 var TEXT_METHODS = /^(toLocale(Date|Time)?String|toFixed|toPrecision|toString|toUpperCase|toLowerCase|trim(Start|End)?|padStart|padEnd)$/;
 function textMethodTarget(expression) {
@@ -1032,6 +1052,21 @@ function placeholderName(expression) {
   }
   return null;
 }
+function holdsJsx(node) {
+  if (Array.isArray(node)) return node.some(holdsJsx);
+  if (!node || typeof node !== "object") return false;
+  const n = node;
+  if (n.type === "JSXElement" || n.type === "JSXFragment") return true;
+  return Object.entries(n).some(([key, child]) => !SKIP.has(key) && holdsJsx(child));
+}
+function callName(expression) {
+  if (expression.type !== "CallExpression" && expression.type !== "OptionalCallExpression") return null;
+  if (holdsJsx(expression)) return null;
+  const callee = expression.callee;
+  if (callee.type === "Identifier") return callee.name === "t" ? null : callee.name;
+  if ((callee.type === "MemberExpression" || callee.type === "OptionalMemberExpression") && !callee.computed) return placeholderName(callee);
+  return null;
+}
 function hasText(element) {
   return (element.children ?? []).some((c) => c.type === "JSXText" ? /\S/.test(String(c.value)) : c.type === "JSXExpressionContainer" ? c.expression.type !== "JSXEmptyExpression" : c.type === "JSXSpreadChild" || hasText(c));
 }
@@ -1040,30 +1075,33 @@ function pieceOf(child, ctx) {
   const end = ctx.base + child.end;
   if (child.type === "JSXText") {
     const raw = ctx.file.text.slice(start2, end);
-    if (!/\S/.test(raw)) return { kind: "space", start: start2, end };
+    if (!/\S/.test(raw)) return { kind: "space", value: raw.includes("\n") ? "" : " ", start: start2, end };
     const lead = raw.length - raw.trimStart().length;
     const trail = raw.length - raw.trimEnd().length;
-    return { kind: "text", value: String(child.value), start: start2 + lead, end: end - trail };
+    return { kind: "text", value: jsxText(String(child.value)), start: start2 + lead, end: end - trail };
   }
-  if (child.type === "JSXSpreadChild") return { kind: "other", start: start2, end };
-  if (child.type !== "JSXExpressionContainer") return { kind: "element", texty: hasText(child), start: start2, end };
+  if (child.type === "JSXSpreadChild") return { kind: "other", node: child, start: start2, end };
+  if (child.type !== "JSXExpressionContainer") return { kind: "element", node: child, start: start2, end };
   const expression = child.expression;
   if (expression.type === "JSXEmptyExpression") return { kind: "comment", start: start2, end };
   if (expression.type === "StringLiteral") {
     const value = String(expression.value);
-    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", start: start2, end };
+    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", value, start: start2, end };
   }
-  const name = placeholderName(expression);
-  if (!name) return { kind: "other", start: start2, end };
+  const name = placeholderName(expression) ?? callName(expression);
+  if (!name || NODE_NAMES.test(name)) return { kind: "other", node: expression, start: start2, end };
   const source = ctx.file.text.slice(ctx.base + expression.start, ctx.base + expression.end);
-  return { kind: "value", name, source, start: start2, end };
+  return { kind: "value", name, source: mayBeEmpty(expression) ? `${source} ?? ''` : source, start: start2, end };
 }
+var NODE_NAMES = /^(children|icon|avatar|logo|image|element|node)$/i;
+var mayBeEmpty = (expression) => /^Optional/.test(expression.type) || expression.type === "CallExpression" && !textMethodTarget(expression);
+var jsxText = (value) => value.replace(/^\s*\n\s*/, "").replace(/\s*\n\s*$/, "");
 var mixed = (ctx, offset) => flag(
   ctx,
   offset,
   "mixed-text",
-  "This text shares its element with other elements or expressions, so it was left as it is.",
-  "Translate the whole sentence with rich text or a plural message, by hand."
+  "This text shares its element with an expression convert cannot read as one sentence, so it was left as it is.",
+  "Translate the whole sentence with a plural message, by hand."
 );
 function valuesOf(pieces) {
   const seen = /* @__PURE__ */ new Map();
@@ -1074,67 +1112,139 @@ function valuesOf(pieces) {
   }
   return [...seen].map(([name, source]) => name === source ? name : `${name}: ${source}`).join(", ");
 }
-function unitsOf(pieces) {
-  const units = [];
+var tagName = (element) => {
+  const name = element.openingElement?.name;
+  return name?.type === "JSXIdentifier" ? name.name : null;
+};
+var childPieces = (element, ctx) => (element.children ?? []).map((c) => pieceOf(c, ctx));
+function isInline(element, ctx) {
+  if (!INLINE.has(tagName(element) ?? "") || !hasText(element)) return false;
+  return childPieces(element, ctx).every((p) => p.kind === "text" || p.kind === "value" || p.kind === "space");
+}
+function runsOf(pieces, ctx) {
+  const runs = [];
   let run2 = [];
-  let before;
-  for (const piece of [...pieces, void 0]) {
-    if (piece && piece.kind !== "element") {
-      run2.push(piece);
-      continue;
-    }
-    const texty = (p) => p?.kind === "element" && p.texty;
-    if (run2.length) units.push({ run: run2, touchesText: texty(before) || texty(piece) });
-    run2 = [];
-    before = piece;
+  for (const piece of pieces) {
+    if (piece.kind === "other" || piece.kind === "element" && !isInline(piece.node, ctx)) {
+      if (run2.length) runs.push(run2);
+      run2 = [];
+    } else run2 = [...run2, piece];
+  }
+  return run2.length ? [...runs, run2] : runs;
+}
+var gluedTo = (piece, next, previous) => piece.kind === "other" && piece.node.type === "ConditionalExpression" && branchStrings(piece.node).some((n) => String(n.value).length < 3) && (previous?.kind === "text" && /\S$/.test(previous.value) || next?.kind === "text" && /^\S/.test(next.value));
+function tagsOf(run2, ctx) {
+  const counts = /* @__PURE__ */ new Map();
+  const tags = /* @__PURE__ */ new Map();
+  for (const piece of run2) {
+    if (piece.kind !== "element") continue;
+    const name = tagName(piece.node);
+    const base = name === "Link" ? "navlink" : name.toLowerCase();
+    const count = (counts.get(base) ?? 0) + 1;
+    counts.set(base, count);
+    const open = piece.node.openingElement;
+    const close = piece.node.closingElement;
+    tags.set(piece, {
+      tag: count === 1 ? base : `${base}${count}`,
+      open: ctx.file.text.slice(ctx.base + open.start, ctx.base + open.end),
+      close: ctx.file.text.slice(ctx.base + close.start, ctx.base + close.end),
+      inner: childPieces(piece.node, ctx)
+    });
   }
-  return units;
+  return tags;
 }
-function messageOf(pieces) {
-  if (pieces.some((p) => p.kind === "other")) return null;
+var plainText = (pieces) => pieces.map((p) => p.kind === "text" || p.kind === "space" ? p.value : p.kind === "value" ? `{${p.name}}` : "").join("");
+var nextIntlCode = (key, values, tags) => {
+  if (!tags.length) return `{t('${key}'${values ? `, { ${values} }` : ""})}`;
+  const parts = [...values ? [values] : [], ...tags.map((t) => `${t.tag}: (chunks) => ${t.open}{chunks}${t.close}`)];
+  return `{t.rich('${key}', { ${parts.join(", ")} })}`;
+};
+var reactI18nextCode = (key, values, tags) => {
+  if (!tags.length) return nextIntlCode(key, values, tags);
+  const components = tags.map((t) => `${t.tag}: ${t.open.replace(/>$/, " />")}`).join(", ");
+  return `<Trans i18nKey="${key}"${values ? ` values={{ ${values} }}` : ""} components={{ ${components} }} />`;
+};
+function messageOf(pieces, ctx) {
   const edge = (p) => p.kind !== "space" && p.kind !== "comment";
   const first = pieces.findIndex(edge);
   const last = pieces.length - 1 - [...pieces].reverse().findIndex(edge);
   const run2 = pieces.slice(first, last + 1);
-  const values = valuesOf(run2);
-  if (values === null || run2.some((p) => p.kind === "comment")) return null;
-  const en = run2.map((p) => p.kind === "text" ? p.value : p.kind === "value" ? `{${p.name}}` : " ").join("").replace(/\s+/g, " ").trim();
-  return { start: run2[0].start, end: run2[run2.length - 1].end, en, values };
+  if (run2.some((p) => p.kind === "comment")) return null;
+  const tags = tagsOf(run2, ctx);
+  const values = valuesOf([...run2, ...[...tags.values()].flatMap((t) => t.inner)]);
+  if (values === null) return null;
+  const en = run2.map((p) => {
+    const tag = tags.get(p);
+    return tag ? `<${tag.tag}>${plainText(tag.inner)}</${tag.tag}>` : plainText([p]);
+  }).join("").replace(/\s+/g, " ").trim();
+  const list = [...tags.values()];
+  const code = (key) => (ctx.lib === "react-i18next" ? reactI18nextCode : nextIntlCode)(key, values, list);
+  return { start: run2[0].start, end: run2[run2.length - 1].end, en, code, tags: list, hookless: ctx.lib === "react-i18next" && list.length > 0 };
 }
 function visitChildren(element, ctx, ancestors) {
-  const pieces = (element.children ?? []).map((c) => pieceOf(c, ctx));
-  const messages = [];
-  for (const { run: run2, touchesText } of unitsOf(pieces)) {
+  const pieces = childPieces(element, ctx);
+  pieces.forEach((piece, i) => {
+    if (!gluedTo(piece, pieces[i + 1], pieces[i - 1])) return;
+    ctx.consumed.add(piece.node);
+  });
+  const glued = pieces.filter((p, i) => p.kind === "other" && gluedTo(p, pieces[i + 1], pieces[i - 1]));
+  for (const run2 of runsOf(pieces, ctx)) {
     const lettered = run2.find((p) => p.kind === "text" && LETTER.test(p.value));
     if (!lettered) continue;
-    const message = touchesText ? null : messageOf(run2);
+    const touchesGlue = glued.some((g) => run2.some((p) => p.end === g.start || p.start === g.end || ctx.file.text.slice(p.end, g.start).trim() === "" || ctx.file.text.slice(g.end, p.start).trim() === ""));
+    const message = touchesGlue ? null : messageOf(run2, ctx);
     if (!message) {
       mixed(ctx, lettered.start);
-      return false;
+      continue;
     }
-    messages.push(message);
+    if (message.tags.length) {
+      run2.forEach((p) => {
+        if (p.kind === "element") ctx.consumed.add(p.node);
+      });
+      if (ctx.lib === "react-i18next") ctx.usedTrans = true;
+    }
+    place(ctx, ancestors, message);
   }
-  for (const m of messages) place(ctx, ancestors, m.start, m.end, m.en, m.values);
-  return true;
 }
+var bracedCall = (values) => (key) => `{t('${key}'${values ? `, { ${values} }` : ""})}`;
 function visitAttribute(attribute, ctx, ancestors) {
   const name = attribute.name;
   if (name.type !== "JSXIdentifier" || !TEXT_ATTRIBUTES.has(name.name)) return;
   const value = attribute.value;
   const literal = value?.type === "JSXExpressionContainer" ? value.expression : value;
   if (literal?.type !== "StringLiteral" || !LETTER.test(String(literal.value))) return;
+  if (name.name === "placeholder" && /^(blur|empty)$/.test(String(literal.value))) return;
   const en = String(literal.value).replace(/\s+/g, " ").trim();
-  place(ctx, ancestors, ctx.base + value.start, ctx.base + value.end, en, "");
+  place(ctx, ancestors, { start: ctx.base + value.start, end: ctx.base + value.end, en, code: bracedCall("") });
+}
+function branchStrings(node) {
+  if (node.type === "StringLiteral") return [node];
+  if (node.type === "ConditionalExpression") return [...branchStrings(node.consequent), ...branchStrings(node.alternate)];
+  if (node.type === "LogicalExpression") return branchStrings(node.right);
+  return [];
+}
+function visitBranches(container, ctx, ancestors) {
+  const parent = ancestors.at(-1);
+  const expression = container.expression;
+  const shown = parent?.type === "JSXElement" || parent?.type === "JSXFragment" || parent?.type === "JSXAttribute" && TEXT_ATTRIBUTES.has(parent.name.name);
+  if (!shown || expression.type === "StringLiteral" || ctx.consumed.has(expression)) return;
+  for (const literal of branchStrings(expression)) {
+    const en = String(literal.value).replace(/\s+/g, " ").trim();
+    if (!LETTER.test(en) || NOT_PROSE.test(en)) continue;
+    place(ctx, ancestors, { start: ctx.base + literal.start, end: ctx.base + literal.end, en, code: (key) => `t('${key}')` });
+  }
 }
 function walk(node, ctx, ancestors) {
   if (Array.isArray(node)) return node.forEach((child) => walk(child, ctx, ancestors));
   if (!node || typeof node !== "object") return;
   const n = node;
+  if (ctx.consumed.has(n)) return;
   if (n.type === "JSXElement" || n.type === "JSXFragment") {
     ctx.sawJsx = true;
-    if (!visitChildren(n, ctx, ancestors)) return;
+    visitChildren(n, ctx, ancestors);
   }
   if (n.type === "JSXAttribute") visitAttribute(n, ctx, ancestors);
+  if (n.type === "JSXExpressionContainer") visitBranches(n, ctx, ancestors);
   const next = typeof n.type === "string" ? [...ancestors, n] : ancestors;
   for (const [key, child] of Object.entries(n)) if (!SKIP.has(key)) walk(child, ctx, next);
 }
@@ -1232,13 +1342,14 @@ function extractStrings(file, lib, taken) {
   for (const block of file.js) {
     const program = block.ast.program;
     if (isServerFile(program)) continue;
-    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false };
+    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false, consumed: /* @__PURE__ */ new Set(), usedTrans: false };
     walk(program, ctx, []);
     if (ctx.sawJsx) flagModuleStrings(program, ctx);
     const style = styleOf(program, file.text, ctx.base);
     const hooks = [...ctx.components].map((fn) => hookEdits(fn, lib, file.text, ctx.base, style));
     edits2.push(...hooks.flatMap((h) => h.edits));
-    edits2.push(...importEdits(program, hooks.flatMap((h) => h.imports), ctx.base, style));
+    const trans = ctx.usedTrans ? [{ name: "Trans", source: "react-i18next" }] : [];
+    edits2.push(...importEdits(program, [...hooks.flatMap((h) => h.imports), ...trans], ctx.base, style));
   }
   return { edits: edits2, flags, entries };
 }
@@ -1933,7 +2044,7 @@ function wireNextIntl(project, mode, files, paths) {
 var import_lint6 = require("@dualkit/lint");
 var import_node_path14 = require("path");
 var DEPS2 = { "react-i18next": "17.1.6", i18next: "26.5.8" };
-var INIT_PATH = "src/i18n.ts";
+var INIT_PATH = "src/dualkit-i18n.ts";
 var HTML_PATH = "index.html";
 var COOKIE_PATTERN = `/(?:^|; )${LOCALE_COOKIE}=([^;]*)/`;
 var messagesImport = (locale) => `import ${locale} from '${import_node_path14.posix.relative(import_node_path14.posix.dirname(INIT_PATH), `messages/${locale}.json`)}'`;
@@ -2503,7 +2614,7 @@ function iconImports(program) {
   return found;
 }
 var isMirrored = (imported) => MIRROR_ICON.test(imported) && !NEVER_MIRROR.test(imported);
-var tagName = (opening) => {
+var tagName2 = (opening) => {
   const name = opening.name;
   return name.type === "JSXIdentifier" ? name.name : null;
 };
@@ -2545,7 +2656,7 @@ function alreadyMirrored(opening, ctx) {
   });
 }
 function visitOpening(opening, ctx, ancestors) {
-  const name = tagName(opening);
+  const name = tagName2(opening);
   if (!name) return;
   const after = ctx.base + opening.name.end;
   if (ctx.icons.has(name) && isMirrored(ctx.icons.get(name)) && !alreadyMirrored(opening, ctx)) {
@@ -2558,7 +2669,7 @@ function visitOpening(opening, ctx, ancestors) {
 }
 function flagSvg(opening, ctx, ancestors) {
   if (alreadyMirrored(opening, ctx)) return;
-  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName(a.openingElement) ?? ""));
+  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName2(a.openingElement) ?? ""));
   if (!control || !DIRECTION_LABEL.test(labelOf(control))) return;
   ctx.flags.push({
     file: ctx.file.path,
@@ -2570,7 +2681,7 @@ function flagSvg(opening, ctx, ancestors) {
 }
 var isolates = (element) => {
   const opening = element.openingElement;
-  return tagName(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
+  return tagName2(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
 };
 function visitExpression(container, ancestors, ctx) {
   const parent = ancestors[ancestors.length - 1];
@@ -3219,6 +3330,10 @@ async function guard(root) {
   return state;
 }
 function pendingCheck(ledger, force) {
+  const broken = brokenMarks(ledger);
+  if (broken.length > 0) {
+    throw new RefusedError(`${broken.length} Arabic ${broken.length === 1 ? "string has" : "strings have"} different placeholders or tags from the English, starting with ${broken[0].key}. Keep each one exactly as written.`);
+  }
   const pending = ledger.filter((e) => e.status === "pending").length;
   if (pending > 0 && !force) {
     throw new RefusedError(`${pending} ${pending === 1 ? "string is" : "strings are"} still pending in ${LEDGER_FILE}. Fill in the Arabic and set each status to drafted, or run with --force to use English for those strings.`);

package/dist/index.js

@@ -357,6 +357,8 @@ function mergeLedger(existing, added) {
   }
   return [...existing, ...fresh].sort(byKey);
 }
+var marks = (text) => [...text.matchAll(/\{[^}]*\}|<\/?[a-z0-9]+>/gi)].map((m) => m[0]).sort().join(" ");
+var brokenMarks = (entries) => entries.filter((e) => e.status !== "pending" && e.ar !== "" && marks(e.ar) !== marks(e.en));
 var textFor = (entry, locale) => locale === "en" || entry.status === "pending" || entry.ar === "" ? entry.en : entry.ar;
 var group = () => /* @__PURE__ */ Object.create(null);
 function messagesFor(entries, locale) {
@@ -909,7 +911,25 @@ var tInScope = (ancestors) => ancestors.some((node) => scopeNames(node).includes
 
 // src/transforms/strings.ts
 var SKIP = /* @__PURE__ */ new Set(["loc", "leadingComments", "trailingComments", "innerComments", "extra"]);
-var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set(["alt", "title", "placeholder", "aria-label", "label"]);
+var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "alt",
+  "title",
+  "placeholder",
+  "aria-label",
+  "label",
+  "aria-description",
+  "aria-placeholder",
+  "aria-roledescription",
+  "description",
+  "subtitle",
+  "heading",
+  "caption",
+  "hint",
+  "tooltip",
+  "helperText",
+  "pageTitle"
+]);
+var INLINE = /* @__PURE__ */ new Set(["a", "abbr", "b", "bdi", "cite", "code", "del", "em", "i", "ins", "kbd", "Link", "mark", "q", "s", "small", "span", "strong", "sub", "sup", "u"]);
 var LETTER = /\p{L}/u;
 var PROSE = /^\p{Lu}\p{Ll}/u;
 var NOT_PROSE = /[/\\_=<>{}@#|]/;
@@ -927,7 +947,7 @@ function stemOf(path) {
   if (!ROUTE_STEMS.has(stem)) return kebab(stem) || "file";
   return kebab(routeDirs(parts).join("-")) || "home";
 }
-var keyWords = (en) => ascii(en.replace(/\{[^}]*\}/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
+var keyWords = (en) => ascii(en.replace(/\{[^}]*\}|<[^>]*>/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
 function flag(ctx, offset, kind, message, suggestion) {
   ctx.flags.push({ file: ctx.file.path, line: lineOf(ctx.file.text, offset), kind, message, suggestion });
 }
@@ -941,7 +961,7 @@ function keyFor(ctx, en) {
   ctx.byText.set(en, key);
   return key;
 }
-function place(ctx, ancestors, start2, end, en, values) {
+function place(ctx, ancestors, { start: start2, end, en, code, hookless }) {
   const component = componentOf(ancestors);
   if (!component) {
     flag(
@@ -976,8 +996,8 @@ function place(ctx, ancestors, start2, end, en, values) {
   const isNew = !ctx.byText.has(en);
   const key = keyFor(ctx, en);
   if (isNew) ctx.entries.push({ key, en, ar: "", status: "pending", file: ctx.file.path, line: lineOf(ctx.file.text, start2) });
-  ctx.edits.push({ start: start2, end, text: `{t('${key}'${values ? `, { ${values} }` : ""})}` });
-  ctx.components.add(component);
+  ctx.edits.push({ start: start2, end, text: code(key) });
+  if (!hookless) ctx.components.add(component);
 }
 var TEXT_METHODS = /^(toLocale(Date|Time)?String|toFixed|toPrecision|toString|toUpperCase|toLowerCase|trim(Start|End)?|padStart|padEnd)$/;
 function textMethodTarget(expression) {
@@ -997,6 +1017,21 @@ function placeholderName(expression) {
   }
   return null;
 }
+function holdsJsx(node) {
+  if (Array.isArray(node)) return node.some(holdsJsx);
+  if (!node || typeof node !== "object") return false;
+  const n = node;
+  if (n.type === "JSXElement" || n.type === "JSXFragment") return true;
+  return Object.entries(n).some(([key, child]) => !SKIP.has(key) && holdsJsx(child));
+}
+function callName(expression) {
+  if (expression.type !== "CallExpression" && expression.type !== "OptionalCallExpression") return null;
+  if (holdsJsx(expression)) return null;
+  const callee = expression.callee;
+  if (callee.type === "Identifier") return callee.name === "t" ? null : callee.name;
+  if ((callee.type === "MemberExpression" || callee.type === "OptionalMemberExpression") && !callee.computed) return placeholderName(callee);
+  return null;
+}
 function hasText(element) {
   return (element.children ?? []).some((c) => c.type === "JSXText" ? /\S/.test(String(c.value)) : c.type === "JSXExpressionContainer" ? c.expression.type !== "JSXEmptyExpression" : c.type === "JSXSpreadChild" || hasText(c));
 }
@@ -1005,30 +1040,33 @@ function pieceOf(child, ctx) {
   const end = ctx.base + child.end;
   if (child.type === "JSXText") {
     const raw = ctx.file.text.slice(start2, end);
-    if (!/\S/.test(raw)) return { kind: "space", start: start2, end };
+    if (!/\S/.test(raw)) return { kind: "space", value: raw.includes("\n") ? "" : " ", start: start2, end };
     const lead = raw.length - raw.trimStart().length;
     const trail = raw.length - raw.trimEnd().length;
-    return { kind: "text", value: String(child.value), start: start2 + lead, end: end - trail };
+    return { kind: "text", value: jsxText(String(child.value)), start: start2 + lead, end: end - trail };
   }
-  if (child.type === "JSXSpreadChild") return { kind: "other", start: start2, end };
-  if (child.type !== "JSXExpressionContainer") return { kind: "element", texty: hasText(child), start: start2, end };
+  if (child.type === "JSXSpreadChild") return { kind: "other", node: child, start: start2, end };
+  if (child.type !== "JSXExpressionContainer") return { kind: "element", node: child, start: start2, end };
   const expression = child.expression;
   if (expression.type === "JSXEmptyExpression") return { kind: "comment", start: start2, end };
   if (expression.type === "StringLiteral") {
     const value = String(expression.value);
-    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", start: start2, end };
+    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", value, start: start2, end };
   }
-  const name = placeholderName(expression);
-  if (!name) return { kind: "other", start: start2, end };
+  const name = placeholderName(expression) ?? callName(expression);
+  if (!name || NODE_NAMES.test(name)) return { kind: "other", node: expression, start: start2, end };
   const source = ctx.file.text.slice(ctx.base + expression.start, ctx.base + expression.end);
-  return { kind: "value", name, source, start: start2, end };
+  return { kind: "value", name, source: mayBeEmpty(expression) ? `${source} ?? ''` : source, start: start2, end };
 }
+var NODE_NAMES = /^(children|icon|avatar|logo|image|element|node)$/i;
+var mayBeEmpty = (expression) => /^Optional/.test(expression.type) || expression.type === "CallExpression" && !textMethodTarget(expression);
+var jsxText = (value) => value.replace(/^\s*\n\s*/, "").replace(/\s*\n\s*$/, "");
 var mixed = (ctx, offset) => flag(
   ctx,
   offset,
   "mixed-text",
-  "This text shares its element with other elements or expressions, so it was left as it is.",
-  "Translate the whole sentence with rich text or a plural message, by hand."
+  "This text shares its element with an expression convert cannot read as one sentence, so it was left as it is.",
+  "Translate the whole sentence with a plural message, by hand."
 );
 function valuesOf(pieces) {
   const seen = /* @__PURE__ */ new Map();
@@ -1039,67 +1077,139 @@ function valuesOf(pieces) {
   }
   return [...seen].map(([name, source]) => name === source ? name : `${name}: ${source}`).join(", ");
 }
-function unitsOf(pieces) {
-  const units = [];
+var tagName = (element) => {
+  const name = element.openingElement?.name;
+  return name?.type === "JSXIdentifier" ? name.name : null;
+};
+var childPieces = (element, ctx) => (element.children ?? []).map((c) => pieceOf(c, ctx));
+function isInline(element, ctx) {
+  if (!INLINE.has(tagName(element) ?? "") || !hasText(element)) return false;
+  return childPieces(element, ctx).every((p) => p.kind === "text" || p.kind === "value" || p.kind === "space");
+}
+function runsOf(pieces, ctx) {
+  const runs = [];
   let run2 = [];
-  let before;
-  for (const piece of [...pieces, void 0]) {
-    if (piece && piece.kind !== "element") {
-      run2.push(piece);
-      continue;
-    }
-    const texty = (p) => p?.kind === "element" && p.texty;
-    if (run2.length) units.push({ run: run2, touchesText: texty(before) || texty(piece) });
-    run2 = [];
-    before = piece;
+  for (const piece of pieces) {
+    if (piece.kind === "other" || piece.kind === "element" && !isInline(piece.node, ctx)) {
+      if (run2.length) runs.push(run2);
+      run2 = [];
+    } else run2 = [...run2, piece];
+  }
+  return run2.length ? [...runs, run2] : runs;
+}
+var gluedTo = (piece, next, previous) => piece.kind === "other" && piece.node.type === "ConditionalExpression" && branchStrings(piece.node).some((n) => String(n.value).length < 3) && (previous?.kind === "text" && /\S$/.test(previous.value) || next?.kind === "text" && /^\S/.test(next.value));
+function tagsOf(run2, ctx) {
+  const counts = /* @__PURE__ */ new Map();
+  const tags = /* @__PURE__ */ new Map();
+  for (const piece of run2) {
+    if (piece.kind !== "element") continue;
+    const name = tagName(piece.node);
+    const base = name === "Link" ? "navlink" : name.toLowerCase();
+    const count = (counts.get(base) ?? 0) + 1;
+    counts.set(base, count);
+    const open = piece.node.openingElement;
+    const close = piece.node.closingElement;
+    tags.set(piece, {
+      tag: count === 1 ? base : `${base}${count}`,
+      open: ctx.file.text.slice(ctx.base + open.start, ctx.base + open.end),
+      close: ctx.file.text.slice(ctx.base + close.start, ctx.base + close.end),
+      inner: childPieces(piece.node, ctx)
+    });
   }
-  return units;
+  return tags;
 }
-function messageOf(pieces) {
-  if (pieces.some((p) => p.kind === "other")) return null;
+var plainText = (pieces) => pieces.map((p) => p.kind === "text" || p.kind === "space" ? p.value : p.kind === "value" ? `{${p.name}}` : "").join("");
+var nextIntlCode = (key, values, tags) => {
+  if (!tags.length) return `{t('${key}'${values ? `, { ${values} }` : ""})}`;
+  const parts = [...values ? [values] : [], ...tags.map((t) => `${t.tag}: (chunks) => ${t.open}{chunks}${t.close}`)];
+  return `{t.rich('${key}', { ${parts.join(", ")} })}`;
+};
+var reactI18nextCode = (key, values, tags) => {
+  if (!tags.length) return nextIntlCode(key, values, tags);
+  const components = tags.map((t) => `${t.tag}: ${t.open.replace(/>$/, " />")}`).join(", ");
+  return `<Trans i18nKey="${key}"${values ? ` values={{ ${values} }}` : ""} components={{ ${components} }} />`;
+};
+function messageOf(pieces, ctx) {
   const edge = (p) => p.kind !== "space" && p.kind !== "comment";
   const first = pieces.findIndex(edge);
   const last = pieces.length - 1 - [...pieces].reverse().findIndex(edge);
   const run2 = pieces.slice(first, last + 1);
-  const values = valuesOf(run2);
-  if (values === null || run2.some((p) => p.kind === "comment")) return null;
-  const en = run2.map((p) => p.kind === "text" ? p.value : p.kind === "value" ? `{${p.name}}` : " ").join("").replace(/\s+/g, " ").trim();
-  return { start: run2[0].start, end: run2[run2.length - 1].end, en, values };
+  if (run2.some((p) => p.kind === "comment")) return null;
+  const tags = tagsOf(run2, ctx);
+  const values = valuesOf([...run2, ...[...tags.values()].flatMap((t) => t.inner)]);
+  if (values === null) return null;
+  const en = run2.map((p) => {
+    const tag = tags.get(p);
+    return tag ? `<${tag.tag}>${plainText(tag.inner)}</${tag.tag}>` : plainText([p]);
+  }).join("").replace(/\s+/g, " ").trim();
+  const list = [...tags.values()];
+  const code = (key) => (ctx.lib === "react-i18next" ? reactI18nextCode : nextIntlCode)(key, values, list);
+  return { start: run2[0].start, end: run2[run2.length - 1].end, en, code, tags: list, hookless: ctx.lib === "react-i18next" && list.length > 0 };
 }
 function visitChildren(element, ctx, ancestors) {
-  const pieces = (element.children ?? []).map((c) => pieceOf(c, ctx));
-  const messages = [];
-  for (const { run: run2, touchesText } of unitsOf(pieces)) {
+  const pieces = childPieces(element, ctx);
+  pieces.forEach((piece, i) => {
+    if (!gluedTo(piece, pieces[i + 1], pieces[i - 1])) return;
+    ctx.consumed.add(piece.node);
+  });
+  const glued = pieces.filter((p, i) => p.kind === "other" && gluedTo(p, pieces[i + 1], pieces[i - 1]));
+  for (const run2 of runsOf(pieces, ctx)) {
     const lettered = run2.find((p) => p.kind === "text" && LETTER.test(p.value));
     if (!lettered) continue;
-    const message = touchesText ? null : messageOf(run2);
+    const touchesGlue = glued.some((g) => run2.some((p) => p.end === g.start || p.start === g.end || ctx.file.text.slice(p.end, g.start).trim() === "" || ctx.file.text.slice(g.end, p.start).trim() === ""));
+    const message = touchesGlue ? null : messageOf(run2, ctx);
     if (!message) {
       mixed(ctx, lettered.start);
-      return false;
+      continue;
     }
-    messages.push(message);
+    if (message.tags.length) {
+      run2.forEach((p) => {
+        if (p.kind === "element") ctx.consumed.add(p.node);
+      });
+      if (ctx.lib === "react-i18next") ctx.usedTrans = true;
+    }
+    place(ctx, ancestors, message);
   }
-  for (const m of messages) place(ctx, ancestors, m.start, m.end, m.en, m.values);
-  return true;
 }
+var bracedCall = (values) => (key) => `{t('${key}'${values ? `, { ${values} }` : ""})}`;
 function visitAttribute(attribute, ctx, ancestors) {
   const name = attribute.name;
   if (name.type !== "JSXIdentifier" || !TEXT_ATTRIBUTES.has(name.name)) return;
   const value = attribute.value;
   const literal = value?.type === "JSXExpressionContainer" ? value.expression : value;
   if (literal?.type !== "StringLiteral" || !LETTER.test(String(literal.value))) return;
+  if (name.name === "placeholder" && /^(blur|empty)$/.test(String(literal.value))) return;
   const en = String(literal.value).replace(/\s+/g, " ").trim();
-  place(ctx, ancestors, ctx.base + value.start, ctx.base + value.end, en, "");
+  place(ctx, ancestors, { start: ctx.base + value.start, end: ctx.base + value.end, en, code: bracedCall("") });
+}
+function branchStrings(node) {
+  if (node.type === "StringLiteral") return [node];
+  if (node.type === "ConditionalExpression") return [...branchStrings(node.consequent), ...branchStrings(node.alternate)];
+  if (node.type === "LogicalExpression") return branchStrings(node.right);
+  return [];
+}
+function visitBranches(container, ctx, ancestors) {
+  const parent = ancestors.at(-1);
+  const expression = container.expression;
+  const shown = parent?.type === "JSXElement" || parent?.type === "JSXFragment" || parent?.type === "JSXAttribute" && TEXT_ATTRIBUTES.has(parent.name.name);
+  if (!shown || expression.type === "StringLiteral" || ctx.consumed.has(expression)) return;
+  for (const literal of branchStrings(expression)) {
+    const en = String(literal.value).replace(/\s+/g, " ").trim();
+    if (!LETTER.test(en) || NOT_PROSE.test(en)) continue;
+    place(ctx, ancestors, { start: ctx.base + literal.start, end: ctx.base + literal.end, en, code: (key) => `t('${key}')` });
+  }
 }
 function walk(node, ctx, ancestors) {
   if (Array.isArray(node)) return node.forEach((child) => walk(child, ctx, ancestors));
   if (!node || typeof node !== "object") return;
   const n = node;
+  if (ctx.consumed.has(n)) return;
   if (n.type === "JSXElement" || n.type === "JSXFragment") {
     ctx.sawJsx = true;
-    if (!visitChildren(n, ctx, ancestors)) return;
+    visitChildren(n, ctx, ancestors);
   }
   if (n.type === "JSXAttribute") visitAttribute(n, ctx, ancestors);
+  if (n.type === "JSXExpressionContainer") visitBranches(n, ctx, ancestors);
   const next = typeof n.type === "string" ? [...ancestors, n] : ancestors;
   for (const [key, child] of Object.entries(n)) if (!SKIP.has(key)) walk(child, ctx, next);
 }
@@ -1197,13 +1307,14 @@ function extractStrings(file, lib, taken) {
   for (const block of file.js) {
     const program = block.ast.program;
     if (isServerFile(program)) continue;
-    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false };
+    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false, consumed: /* @__PURE__ */ new Set(), usedTrans: false };
     walk(program, ctx, []);
     if (ctx.sawJsx) flagModuleStrings(program, ctx);
     const style = styleOf(program, file.text, ctx.base);
     const hooks = [...ctx.components].map((fn) => hookEdits(fn, lib, file.text, ctx.base, style));
     edits2.push(...hooks.flatMap((h) => h.edits));
-    edits2.push(...importEdits(program, hooks.flatMap((h) => h.imports), ctx.base, style));
+    const trans = ctx.usedTrans ? [{ name: "Trans", source: "react-i18next" }] : [];
+    edits2.push(...importEdits(program, [...hooks.flatMap((h) => h.imports), ...trans], ctx.base, style));
   }
   return { edits: edits2, flags, entries };
 }
@@ -1898,7 +2009,7 @@ function wireNextIntl(project, mode, files, paths) {
 import { parseSourceOutcome as parseSourceOutcome5 } from "@dualkit/lint";
 import { posix as posix6 } from "path";
 var DEPS2 = { "react-i18next": "17.1.6", i18next: "26.5.8" };
-var INIT_PATH = "src/i18n.ts";
+var INIT_PATH = "src/dualkit-i18n.ts";
 var HTML_PATH = "index.html";
 var COOKIE_PATTERN = `/(?:^|; )${LOCALE_COOKIE}=([^;]*)/`;
 var messagesImport = (locale) => `import ${locale} from '${posix6.relative(posix6.dirname(INIT_PATH), `messages/${locale}.json`)}'`;
@@ -2468,7 +2579,7 @@ function iconImports(program) {
   return found;
 }
 var isMirrored = (imported) => MIRROR_ICON.test(imported) && !NEVER_MIRROR.test(imported);
-var tagName = (opening) => {
+var tagName2 = (opening) => {
   const name = opening.name;
   return name.type === "JSXIdentifier" ? name.name : null;
 };
@@ -2510,7 +2621,7 @@ function alreadyMirrored(opening, ctx) {
   });
 }
 function visitOpening(opening, ctx, ancestors) {
-  const name = tagName(opening);
+  const name = tagName2(opening);
   if (!name) return;
   const after = ctx.base + opening.name.end;
   if (ctx.icons.has(name) && isMirrored(ctx.icons.get(name)) && !alreadyMirrored(opening, ctx)) {
@@ -2523,7 +2634,7 @@ function visitOpening(opening, ctx, ancestors) {
 }
 function flagSvg(opening, ctx, ancestors) {
   if (alreadyMirrored(opening, ctx)) return;
-  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName(a.openingElement) ?? ""));
+  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName2(a.openingElement) ?? ""));
   if (!control || !DIRECTION_LABEL.test(labelOf(control))) return;
   ctx.flags.push({
     file: ctx.file.path,
@@ -2535,7 +2646,7 @@ function flagSvg(opening, ctx, ancestors) {
 }
 var isolates = (element) => {
   const opening = element.openingElement;
-  return tagName(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
+  return tagName2(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
 };
 function visitExpression(container, ancestors, ctx) {
   const parent = ancestors[ancestors.length - 1];
@@ -3184,6 +3295,10 @@ async function guard(root) {
   return state;
 }
 function pendingCheck(ledger, force) {
+  const broken = brokenMarks(ledger);
+  if (broken.length > 0) {
+    throw new RefusedError(`${broken.length} Arabic ${broken.length === 1 ? "string has" : "strings have"} different placeholders or tags from the English, starting with ${broken[0].key}. Keep each one exactly as written.`);
+  }
   const pending = ledger.filter((e) => e.status === "pending").length;
   if (pending > 0 && !force) {
     throw new RefusedError(`${pending} ${pending === 1 ? "string is" : "strings are"} still pending in ${LEDGER_FILE}. Fill in the Arabic and set each status to drafted, or run with --force to use English for those strings.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dualkit/convert",
-  "version": "0.2.0-beta.0",
+  "version": "0.3.0-beta.0",
   "description": "Converts an English React or Next.js app to Arabic on a new git branch.",
   "license": "MIT",
   "type": "module",