@npm-questionpro/wick-ui-i18n 0.14.0 → 2.0.0-next.4

package/src/processor.js

@@ -4,23 +4,29 @@
  */
 
 /** Prop names translated by default on Wu* components. Pass `translatableProps` to override. */
-const DEFAULT_TRANSLATABLE_PROPS = ['Label', 'placeholder', 'title', 'aria-label', 'aria-placeholder']
+const DEFAULT_TRANSLATABLE_PROPS = [
+  'Label',
+  'placeholder',
+  'title',
+  'aria-label',
+  'aria-placeholder',
+]
 
 /** Components always excluded from translation regardless of user config. */
 const DEFAULT_IGNORE = [
-  "WuIcon",
-  "WuTranslateProvider",
-  "WuHelpButton",
-  "WuActivityLog",
-  "WuAppHeader",
-  "WuAPpHeadeMenu",
-  "WuCopyToClipboard",
-  "WuMenuIcon",
-  "WuScrollArea",
-  "WuDrawer",
-  "WuLoader",
-  "WuContentEditor",
-];
+  'WuIcon',
+  'WuTranslateProvider',
+  'WuHelpButton',
+  'WuActivityLog',
+  'WuAppHeader',
+  'WuAPpHeadeMenu',
+  'WuCopyToClipboard',
+  'WuMenuIcon',
+  'WuScrollArea',
+  'WuDrawer',
+  'WuLoader',
+  'WuContentEditor',
+]
 
 export class TranslationProcessor {
   /**
@@ -32,21 +38,21 @@ export class TranslationProcessor {
    * @param {boolean}  [options.debug]             - Enable verbose logging.
    */
   constructor(options) {
-    this.components = new Set(options.components);
+    this.components = new Set(options.components)
     this.ignoreComponents = new Set(
       DEFAULT_IGNORE.concat(options.ignoreComponents || []),
-    );
+    )
     /** @type {Set<string>} JSX prop names that should be translated. */
     this.translatableProps = new Set(
       options.translatableProps ?? DEFAULT_TRANSLATABLE_PROPS,
-    );
+    )
     /** @type {Set<string>} Object property key names whose string values are extracted (e.g. 'label'). */
-    this.extractFromKeys = new Set(options.extractFromKeys || []);
+    this.extractFromKeys = new Set(options.extractFromKeys || [])
     /** @type {Map<string, string>} key → original text */
-    this.dictionary = new Map();
+    this.dictionary = new Map()
     /** @type {import('./debug.js').DebugEntry[]} */
-    this.entries = [];
-    this.debugEnabled = options.debug || false;
+    this.entries = []
+    this.debugEnabled = options.debug || false
   }
 
   /**
@@ -54,7 +60,7 @@ export class TranslationProcessor {
    * @param {...unknown} args
    */
   log(...args) {
-    if (this.debugEnabled) console.log("[wick-i18n]", ...args);
+    if (this.debugEnabled) console.log('[wick-i18n]', ...args)
   }
 
   /**
@@ -70,11 +76,11 @@ export class TranslationProcessor {
     if (this.dictionary.has(key) && this.dictionary.get(key) !== text) {
       console.warn(
         `[wick-i18n] Collision in ${file}\nKey: "${key}"\nNew: "${text}"`,
-      );
-      return;
+      )
+      return
     }
-    this.dictionary.set(key, text);
-    this.entries.push({ key, text, file, componentTree });
+    this.dictionary.set(key, text)
+    this.entries.push({key, text, file, componentTree})
   }
 
   /**
@@ -90,45 +96,41 @@ export class TranslationProcessor {
    * @returns {boolean}
    */
   shouldTranslate(path) {
-    let isIgnored = false;
-    let targetFound = false;
+    let isIgnored = false
+    let targetFound = false
 
-    path.findParent((p) => {
-      if (!p.isJSXElement()) return false;
+    path.findParent(p => {
+      if (!p.isJSXElement()) return false
 
       const name =
         p.node.openingElement.name.name ||
-        p.node.openingElement.name.property?.name;
-      const attrs = p.node.openingElement.attributes || [];
+        p.node.openingElement.name.property?.name
+      const attrs = p.node.openingElement.attributes || []
 
       if (
-        attrs.some((a) =>
-          ["data-skip", "data-i18n-skip"].includes(a.name?.name),
-        )
+        attrs.some(a => ['data-skip', 'data-i18n-skip'].includes(a.name?.name))
       ) {
-        isIgnored = true;
-        return true;
+        isIgnored = true
+        return true
       }
 
       if (this.ignoreComponents.has(name)) {
-        isIgnored = true;
-        return true;
+        isIgnored = true
+        return true
       }
 
-      const hasWrapper = attrs.some(
-        (a) => a.name?.name === "data-i18n-wrapper",
-      );
-      const isTarget = this.components.has(name) || name?.startsWith("Wu");
+      const hasWrapper = attrs.some(a => a.name?.name === 'data-i18n-wrapper')
+      const isTarget = this.components.has(name) || name?.startsWith('Wu')
 
       if (hasWrapper || isTarget) {
-        targetFound = true;
-        return true;
+        targetFound = true
+        return true
       }
 
-      return false;
-    });
+      return false
+    })
 
-    return targetFound && !isIgnored;
+    return targetFound && !isIgnored
   }
 
   /**
@@ -140,16 +142,17 @@ export class TranslationProcessor {
    * @returns {boolean}
    */
   shouldTranslateProp(propName, path) {
-    if (!this.translatableProps.has(propName)) return false;
+    if (!this.translatableProps.has(propName)) return false
     // path.parent is the JSXOpeningElement node
-    const openingEl = path.parent;
-    const name = openingEl.name?.name || openingEl.name?.property?.name;
-    if (!name) return false;
-    if (this.ignoreComponents.has(name)) return false;
+    const openingEl = path.parent
+    const name = openingEl.name?.name || openingEl.name?.property?.name
+    if (!name) return false
+    if (this.ignoreComponents.has(name)) return false
     // Respect data-skip / data-i18n-skip on the same element
-    const attrs = openingEl.attributes || [];
-    if (attrs.some(a => ['data-skip', 'data-i18n-skip'].includes(a.name?.name))) return false;
-    return name.startsWith('Wu') || this.components.has(name);
+    const attrs = openingEl.attributes || []
+    if (attrs.some(a => ['data-skip', 'data-i18n-skip'].includes(a.name?.name)))
+      return false
+    return name.startsWith('Wu') || this.components.has(name)
   }
 
   /**
@@ -160,26 +163,26 @@ export class TranslationProcessor {
    * @returns {string|null}
    */
   getExplicitKey(path) {
-    let result = null;
-    path.findParent((p) => {
-      if (!p.isJSXElement()) return false;
+    let result = null
+    path.findParent(p => {
+      if (!p.isJSXElement()) return false
       const attr = p.node.openingElement.attributes.find(
-        (a) => a.name?.name === "data-i18n-key",
-      );
-      if (!attr) return false;
+        a => a.name?.name === 'data-i18n-key',
+      )
+      if (!attr) return false
       const val =
-        attr.value.type === "StringLiteral"
+        attr.value.type === 'StringLiteral'
           ? attr.value.value
-          : attr.value.expression?.value;
+          : attr.value.expression?.value
       if (!val) {
         console.warn(
           `[wick-i18n] data-i18n-key on <${p.node.openingElement.name.name}> is dynamic or empty — falling back to text content.`,
-        );
-        return true;
+        )
+        return true
       }
-      result = val;
-      return true;
-    });
-    return result;
+      result = val
+      return true
+    })
+    return result
   }
 }

package/src/transform.js

@@ -5,21 +5,18 @@
  *   - Prepends the necessary imports when added.
  */
 
-import MagicString from "magic-string";
-import { parse } from "@babel/parser";
-import _traverse from "@babel/traverse";
-import { getComponentTree } from "./debug.js";
-import { transformTemplateLiteralExpression } from "./transformTemplateLiteral.js";
-import { transformJSXTextWithEntities } from "./transformJSXTextWithEntities.js";
-import {
-  recordWtCall,
-  transformWtTemplateLiteral,
-} from "./transformWtCalls.js";
+import MagicString from 'magic-string'
+import {parse} from '@babel/parser'
+import _traverse from '@babel/traverse'
+import {getComponentTree} from './debug.js'
+import {transformTemplateLiteralExpression} from './transformTemplateLiteral.js'
+import {transformJSXTextWithEntities} from './transformJSXTextWithEntities.js'
+import {recordWtCall, transformWtTemplateLiteral} from './transformWtCalls.js'
 
-const traverse = _traverse.default || _traverse;
+const traverse = _traverse.default || _traverse
 
 /** Babel parser plugins applied to every file. */
-const BABEL_PLUGINS = ["jsx", "typescript"];
+const BABEL_PLUGINS = ['jsx', 'typescript']
 
 /**
  * Matches any HTML entity: named (&), decimal (©), or hex (©).
@@ -27,14 +24,14 @@ const BABEL_PLUGINS = ["jsx", "typescript"];
  * Note: for JSXText this must be tested against the RAW source, not the Babel
  * decoded .value (Babel turns & → "&",   → "\u00a0", etc.).
  */
-const HTML_ENTITY_RE = /&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);/;
+const HTML_ENTITY_RE = /&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);/
 
 /** @param {import('@babel/types').Node} node @returns {string|null} */
 function getStaticString(node) {
-  if (node.type === "StringLiteral") return node.value;
-  if (node.type === "TemplateLiteral" && !node.expressions.length)
-    return node.quasis[0].value.cooked;
-  return null;
+  if (node.type === 'StringLiteral') return node.value
+  if (node.type === 'TemplateLiteral' && !node.expressions.length)
+    return node.quasis[0].value.cooked
+  return null
 }
 
 /**
@@ -49,20 +46,28 @@ function getStaticString(node) {
  * @returns {boolean} true when at least one branch was captured
  */
 function handleConditional(expr, path, ms, processor, id) {
-  let changed = false;
+  let changed = false
 
   for (const branch of [expr.consequent, expr.alternate]) {
-    const text = getStaticString(branch);
+    const text = getStaticString(branch)
     if (text !== null) {
       changed =
-        handleCapture(path, text, branch.start, branch.end, ms, processor, id, true) ||
-        changed;
-    } else if (branch.type === "ConditionalExpression") {
-      changed = handleConditional(branch, path, ms, processor, id) || changed;
+        handleCapture(
+          path,
+          text,
+          branch.start,
+          branch.end,
+          ms,
+          processor,
+          id,
+          true,
+        ) || changed
+    } else if (branch.type === 'ConditionalExpression') {
+      changed = handleConditional(branch, path, ms, processor, id) || changed
     }
   }
 
-  return changed;
+  return changed
 }
 
 /**
@@ -90,18 +95,22 @@ function handleCapture(
 ) {
   const cleanText = text
     .trim()
-    .replace(/\n/g, " ")
-    .replace(/\s{2,}/g, " ");
-  if (!cleanText || !processor.shouldTranslate(path)) return false;
+    .replace(/\n/g, ' ')
+    .replace(/\s{2,}/g, ' ')
+  if (!cleanText || !processor.shouldTranslate(path)) return false
   // For StringLiteral / TemplateLiteral quasis / ternary branches: entities are
   // not decoded by the JS parser, so cleanText still contains "&" etc.
-  if (HTML_ENTITY_RE.test(cleanText)) return false;
+  if (HTML_ENTITY_RE.test(cleanText)) return false
 
-  const key = (!skipExplicitKey && processor.getExplicitKey(path)) || cleanText;
-  processor.record(key, cleanText, id, getComponentTree(path));
+  const key = (!skipExplicitKey && processor.getExplicitKey(path)) || cleanText
+  processor.record(key, cleanText, id, getComponentTree(path))
 
-  ms.overwrite(start, end, `<WuTranslate __i18nKey=${JSON.stringify(key)}></WuTranslate>`);
-  return true;
+  ms.overwrite(
+    start,
+    end,
+    `<WuTranslate __i18nKey=${JSON.stringify(key)}></WuTranslate>`,
+  )
+  return true
 }
 
 /**
@@ -116,34 +125,34 @@ function handleCapture(
  */
 export function transformFile(code, id, processor) {
   const ast = parse(code, {
-    sourceType: "module",
+    sourceType: 'module',
     plugins: BABEL_PLUGINS,
-  });
+  })
 
-  const ms = new MagicString(code);
-  let needsImport = false;
-  let hasImport = false;
-  let hasWtTransform = false;
-  let needsWtImport = false;
-  let hasWtImport = false;
+  const ms = new MagicString(code)
+  let needsImport = false
+  let hasImport = false
+  let hasWtTransform = false
+  let needsWtImport = false
+  let hasWtImport = false
 
   traverse(ast, {
     /** wt("static string") call — record the key in the dictionary.
      * No code transformation; wt() handles runtime lookup.
      */
     CallExpression(path) {
-      if (recordWtCall(path, processor, id)) return;
+      if (recordWtCall(path, processor, id)) return
       if (transformWtTemplateLiteral(path, code, ms, processor, id)) {
-        hasWtTransform = true;
+        hasWtTransform = true
       }
     },
 
     /** Track whether WuTranslate / wt are already imported so we don't duplicate them. */
     ImportDeclaration(path) {
-      if (path.node.source.value.includes("wick-ui-lib")) {
+      if (path.node.source.value.includes('wick-ui-lib')) {
         for (const s of path.node.specifiers) {
-          if (s.imported?.name === "WuTranslate") hasImport = true;
-          if (s.imported?.name === "wt") hasWtImport = true;
+          if (s.imported?.name === 'WuTranslate') hasImport = true
+          if (s.imported?.name === 'wt') hasWtImport = true
         }
       }
     },
@@ -154,19 +163,19 @@ export function transformFile(code, id, processor) {
      * Enabled via `extractFromKeys` option.
      */
     ObjectProperty(path) {
-      if (!processor.extractFromKeys.size) return;
-      const keyNode = path.node.key;
-      const keyName = keyNode.name ?? keyNode.value;
-      if (!keyName || !processor.extractFromKeys.has(keyName)) return;
-      const value = path.node.value;
-      if (value.type !== "StringLiteral") return;
+      if (!processor.extractFromKeys.size) return
+      const keyNode = path.node.key
+      const keyName = keyNode.name ?? keyNode.value
+      if (!keyName || !processor.extractFromKeys.has(keyName)) return
+      const value = path.node.value
+      if (value.type !== 'StringLiteral') return
       const text = value.value
         .trim()
-        .replace(/\n/g, " ")
-        .replace(/\s{2,}/g, " ");
-      if (!text) return;
-      if (HTML_ENTITY_RE.test(text)) return;
-      processor.record(text, text, id, "(data)");
+        .replace(/\n/g, ' ')
+        .replace(/\s{2,}/g, ' ')
+      if (!text) return
+      if (HTML_ENTITY_RE.test(text)) return
+      processor.record(text, text, id, '(data)')
     },
 
     /**
@@ -174,42 +183,42 @@ export function transformFile(code, id, processor) {
      * rewritten to `{wt("foo")}` on Wu* components.
      */
     JSXAttribute(path) {
-      const propName = path.node.name.name;
-      if (typeof propName !== "string") return;
-      const value = path.node.value;
-      if (!value || value.type !== "StringLiteral") return;
+      const propName = path.node.name.name
+      if (typeof propName !== 'string') return
+      const value = path.node.value
+      if (!value || value.type !== 'StringLiteral') return
 
-      const rawValue = code.slice(value.start, value.end);
-      if (HTML_ENTITY_RE.test(rawValue)) return;
+      const rawValue = code.slice(value.start, value.end)
+      if (HTML_ENTITY_RE.test(rawValue)) return
 
       const text = value.value
         .trim()
-        .replace(/\n/g, " ")
-        .replace(/\s{2,}/g, " ");
-      if (!text) return;
+        .replace(/\n/g, ' ')
+        .replace(/\s{2,}/g, ' ')
+      if (!text) return
 
-      if (!processor.shouldTranslateProp(propName, path)) return;
+      if (!processor.shouldTranslateProp(propName, path)) return
 
-      processor.record(text, text, id, getComponentTree(path));
-      ms.overwrite(value.start, value.end, `{wt(${JSON.stringify(text)})}`);
-      needsWtImport = true;
+      processor.record(text, text, id, getComponentTree(path))
+      ms.overwrite(value.start, value.end, `{wt(${JSON.stringify(text)})}`)
+      needsWtImport = true
     },
 
     /** Plain JSX text: `<Foo>Hello world</Foo>` */
     JSXText(path) {
-      const text = path.node.value;
-      const trimmed = text.trim();
+      const text = path.node.value
+      const trimmed = text.trim()
       // Babel decodes entities in JSXText.value (&amp; → "&", &#169; → "©").
       // Check the raw source slice — if entities found, split around them so
       // translatable text segments are still wrapped while entities stay put.
-      const rawSource = code.slice(path.node.start, path.node.end);
+      const rawSource = code.slice(path.node.start, path.node.end)
       if (HTML_ENTITY_RE.test(rawSource)) {
         if (transformJSXTextWithEntities(path, rawSource, ms, processor, id)) {
-          needsImport = true;
+          needsImport = true
         }
-        return;
+        return
       }
-      const start = path.node.start + text.indexOf(trimmed);
+      const start = path.node.start + text.indexOf(trimmed)
       if (
         handleCapture(
           path,
@@ -221,7 +230,7 @@ export function transformFile(code, id, processor) {
           id,
         )
       ) {
-        needsImport = true;
+        needsImport = true
       }
     },
 
@@ -233,26 +242,26 @@ export function transformFile(code, id, processor) {
      * a JSXAttribute, not a JSXElement child position.
      */
     JSXExpressionContainer(path) {
-      if (path.parent.type === "JSXAttribute") return;
+      if (path.parent.type === 'JSXAttribute') return
 
-      const expr = path.node.expression;
-      let text = null;
+      const expr = path.node.expression
+      let text = null
 
-      if (expr.type === "StringLiteral") {
-        text = expr.value;
+      if (expr.type === 'StringLiteral') {
+        text = expr.value
       } else if (
-        expr.type === "TemplateLiteral" &&
+        expr.type === 'TemplateLiteral' &&
         expr.expressions.length > 0
       ) {
         if (transformTemplateLiteralExpression(path, code, ms, processor, id)) {
-          needsImport = true;
+          needsImport = true
         }
-        return;
-      } else if (expr.type === "TemplateLiteral" && !expr.expressions.length) {
-        text = expr.quasis[0].value.cooked;
-      } else if (expr.type === "ConditionalExpression") {
-        if (handleConditional(expr, path, ms, processor, id)) needsImport = true;
-        return;
+        return
+      } else if (expr.type === 'TemplateLiteral' && !expr.expressions.length) {
+        text = expr.quasis[0].value.cooked
+      } else if (expr.type === 'ConditionalExpression') {
+        if (handleConditional(expr, path, ms, processor, id)) needsImport = true
+        return
       }
 
       if (
@@ -267,20 +276,20 @@ export function transformFile(code, id, processor) {
           id,
         )
       ) {
-        needsImport = true;
+        needsImport = true
       }
     },
-  });
+  })
 
-  if (!needsImport && !hasWtTransform && !needsWtImport) return null;
+  if (!needsImport && !hasWtTransform && !needsWtImport) return null
 
   if (needsWtImport && !hasWtImport) {
-    ms.prepend(`import { wt } from '@npm-questionpro/wick-ui-lib';\n`);
+    ms.prepend(`import { wt } from '@npm-questionpro/wick-ui-lib';\n`)
   }
 
   if (needsImport && !hasImport) {
-    ms.prepend(`import { WuTranslate } from '@npm-questionpro/wick-ui-lib';\n`);
+    ms.prepend(`import { WuTranslate } from '@npm-questionpro/wick-ui-lib';\n`)
   }
 
-  return { code: ms.toString(), map: ms.generateMap({ hires: true }) };
+  return {code: ms.toString(), map: ms.generateMap({hires: true})}
 }

package/src/transformJSXTextWithEntities.js

@@ -17,7 +17,7 @@
  * <WuButton>&lt;<WuTranslate __i18nKey="Tag" />&gt;</WuButton>
  */
 
-import { getComponentTree } from "./debug.js";
+import {getComponentTree} from './debug.js'
 
 /**
  * Splits the raw source around HTML entities (capturing group keeps entities
@@ -27,13 +27,13 @@ import { getComponentTree } from "./debug.js";
  * "&lt;Tag&gt;"        →  ["", "&lt;", "Tag", "&gt;", ""]
  */
 const HTML_ENTITY_SPLIT_RE =
-  /(&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);)/g;
+  /(&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);)/g
 
 /**
  * Tests whether a single segment (from the split above) is itself an entity.
  */
 const HTML_ENTITY_SEGMENT_RE =
-  /^&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);$/;
+  /^&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);$/
 
 /**
  * Given a text segment, extract leading whitespace, the translatable core,
@@ -43,15 +43,15 @@ const HTML_ENTITY_SEGMENT_RE =
  * @returns {{ leading: string, text: string, trailing: string }}
  */
 function splitSegment(raw) {
-  const leading = raw.match(/^\s*/)[0];
-  const trailing = raw.match(/\s*$/)[0];
+  const leading = raw.match(/^\s*/)[0]
+  const trailing = raw.match(/\s*$/)[0]
   // Normalise internal whitespace to match handleCapture behaviour:
   // newlines → single space, consecutive spaces → single space.
   const text = raw
     .slice(leading.length, raw.length - trailing.length)
-    .replace(/\n/g, " ")
-    .replace(/\s{2,}/g, " ");
-  return { leading, text, trailing };
+    .replace(/\n/g, ' ')
+    .replace(/\s{2,}/g, ' ')
+  return {leading, text, trailing}
 }
 
 /**
@@ -80,48 +80,48 @@ export function transformJSXTextWithEntities(
   processor,
   id,
 ) {
-  if (!processor.shouldTranslate(path)) return false;
+  if (!processor.shouldTranslate(path)) return false
 
   // data-i18n-key cannot span multiple split segments — warn and ignore it.
-  const explicitKey = processor.getExplicitKey(path);
+  const explicitKey = processor.getExplicitKey(path)
   if (explicitKey) {
     console.warn(
       `[wick-i18n] data-i18n-key="${explicitKey}" is set on a node whose text ` +
         `contains HTML entities. The key cannot apply across multiple segments ` +
         `— splitting without it.`,
-    );
+    )
   }
 
-  const segments = rawSource.split(HTML_ENTITY_SPLIT_RE);
-  const componentTree = getComponentTree(path);
+  const segments = rawSource.split(HTML_ENTITY_SPLIT_RE)
+  const componentTree = getComponentTree(path)
 
-  const parts = [];
-  let hasTranslatable = false;
+  const parts = []
+  let hasTranslatable = false
 
   for (const seg of segments) {
-    if (!seg) continue; // empty strings produced by split at boundaries
+    if (!seg) continue // empty strings produced by split at boundaries
 
     if (HTML_ENTITY_SEGMENT_RE.test(seg)) {
       // Raw entity — emit as-is, no translation key
-      parts.push(seg);
+      parts.push(seg)
     } else {
-      const { leading, text, trailing } = splitSegment(seg);
+      const {leading, text, trailing} = splitSegment(seg)
 
       if (text) {
-        processor.record(text, text, id, componentTree);
+        processor.record(text, text, id, componentTree)
         parts.push(
           `${leading}<WuTranslate __i18nKey=${JSON.stringify(text)}></WuTranslate>${trailing}`,
-        );
-        hasTranslatable = true;
+        )
+        hasTranslatable = true
       } else {
         // Pure whitespace between / around entities — preserve as JSX text
-        parts.push(seg);
+        parts.push(seg)
       }
     }
   }
 
-  if (!hasTranslatable) return false;
+  if (!hasTranslatable) return false
 
-  ms.overwrite(path.node.start, path.node.end, parts.join(""));
-  return true;
+  ms.overwrite(path.node.start, path.node.end, parts.join(''))
+  return true
 }