@npm-questionpro/wick-ui-i18n 2.13.0 → 2.14.0

package/README.md

@@ -1,6 +1,6 @@
 # wick-ui-i18n
 
-Vite plugin — wraps JSX text in Wu\* components with `<WuTranslate>`, rewrites translatable props to `{useWt()("...")}`,
+Vite plugin — wraps JSX text in Wu\* components with `<WuTranslate>`, rewrites translatable props to `{wt("...")}`,
 records `wt()` / `useWt()()` calls, and emits `wick-ui-i18n.json`.
 
 > Full docs and examples: Storybook → **i18n/Overview**
@@ -22,7 +22,7 @@ export default defineConfig({plugins: [react(), wickI18n()]})
 | Source                                    | Output                                        |
 | ----------------------------------------- | --------------------------------------------- |
 | `<WuButton>Save</WuButton>`               | `<WuTranslate __i18nKey="Save" />`            |
-| `<WuInput Label="First name" />`          | `Label={useWt()("First name")}`               |
+| `<WuInput Label="First name" />`          | `Label={wt("First name")}`                    |
 | ``<WuButton>{`${n} results`}</WuButton>`` | `<><WuTranslate __i18nKey="results" />{n}</>` |
 | `wt("Hello")`                             | recorded in dictionary                        |
 | ``wt(`Hello ${name}`)``                   | `` `${wt("Hello")} ${name}` ``                |
@@ -37,7 +37,7 @@ export default defineConfig({plugins: [react(), wickI18n()]})
 | ------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
 | `components`        | `[]`                                                              | Extra components treated like Wu\*                                                      |
 | `ignoreComponents`  | `[]`                                                              | Extra components never translated                                                       |
-| `translatableProps` | `['Label','placeholder','title','aria-label','aria-placeholder']` | Props rewritten to `useWt()()`                                                          |
+| `translatableProps` | `['Label','placeholder','title','aria-label','aria-placeholder']` | Props rewritten to `wt()`                                                               |
 | `dataLabelKeys`     | `[]`                                                              | Property names whose values are labels in mixed data files                              |
 | `dictionaryFiles`   | —                                                                 | Globs (project files via Vite) or exact paths (anywhere, incl. `node_modules` via `fs`) |
 | `excludeFiles`      | —                                                                 | Files skipped entirely                                                                  |

package/index.d.ts

@@ -9,7 +9,7 @@ export interface WickI18nOptions {
   ignoreComponents?: string[]
 
   /**
-   * Extra JSX prop names rewritten to `{useWt()("...")}` on Wu* components.
+   * Extra JSX prop names rewritten to `{wt("...")}` on Wu* components.
    * Appended to the defaults — defaults are always kept:
    * `['Label', 'placeholder', 'title', 'aria-label', 'aria-placeholder']`.
    */
@@ -67,7 +67,7 @@ export interface WickI18nOptions {
  * Vite plugin that automatically translates Wick UI components.
  *
  * - JSX text content inside Wu* → `<WuTranslate __i18nKey="..." />`
- * - Translatable props (`Label`, `placeholder`, `title`, …) → `{useWt()("...")}`
+ * - Translatable props (`Label`, `placeholder`, `title`, …) → `{wt("...")}`
  * - `wt("literal")` and `useWt()("literal")` calls → keys recorded in dictionary
  * - `wt(\`Hello ${name}\`)` and `useWt()(\`Hello ${name}\`)` → each static quasi extracted and rewritten
  * - Emits `wick-ui-i18n.json` at build time / serves it at `GET /wick-ui-i18n.json` in dev

package/index.js

@@ -31,7 +31,7 @@ import {extractStringsFromFile} from './src/extractStrings.js'
  * @typedef {object} WickI18nOptions
  * @property {string[]}  [components]        - Extra component names that trigger translation.
  * @property {string[]}  [ignoreComponents]  - Component names to exclude from translation.
- * @property {string[]}  [translatableProps] - JSX prop names rewritten to `{useWt()("...")}`. Defaults to `['Label','placeholder','title','aria-label','aria-placeholder']`.
+ * @property {string[]}  [translatableProps] - JSX prop names rewritten to `{wt("...")}`. Defaults to `['Label','placeholder','title','aria-label','aria-placeholder']`.
  * @property {string[]}  [dataLabelKeys]     - Object property names whose string values are labels in mixed data
  *                                             files (e.g. `['label', 'title']` in nav config arrays). No code rewrite;
  *                                             keys are recorded into `wick-ui-i18n.json` for the translation API.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm-questionpro/wick-ui-i18n",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "private": false,
   "license": "ISC",
   "description": "Auto-translation AST wrapper for Wick UI",

package/src/processor.js

@@ -27,7 +27,7 @@ export class TranslationProcessor {
    * @param {object}   options
    * @param {string[]} options.components          - Component names that trigger translation.
    * @param {string[]} [options.ignoreComponents]  - Extra components to exclude.
-   * @param {string[]} [options.translatableProps] - Extra JSX prop names to rewrite to useWt()(). Appended to defaults.
+   * @param {string[]} [options.translatableProps] - Extra JSX prop names to rewrite to wt(). Appended to defaults.
    * @param {string[]} [options.dataLabelKeys]     - Object property names whose string values are labels in mixed
    *                                                 data files (e.g. ['label', 'title'] in nav config arrays).
    * @param {boolean}  [options.debug]             - Enable verbose logging.
@@ -121,7 +121,7 @@ export class TranslationProcessor {
   /**
    * Return `true` when `propName` is in the translatable-props set and the
    * immediate parent JSX element is a Wu* component or in `components`, and
-   * is not in `ignoreComponents`. Matched props are rewritten to `{useWt()("...")}` by the transform.
+   * is not in `ignoreComponents`. Matched props are rewritten to `{wt("...")}` by the transform.
    *
    * @param {string} propName
    * @param {import('@babel/traverse').NodePath} path - JSXAttribute path.

package/src/transform.js

@@ -1,7 +1,7 @@
 /**
  * @fileoverview AST transform — parses a JSX/TSX/TS file and:
  *   - Rewrites JSX text content inside Wu* components to `<WuTranslate>`
- *   - Rewrites translatable props (placeholder, title, …) to `{useWt()("…")}`
+ *   - Rewrites translatable props (placeholder, title, …) to `{wt("…")}`
  *   - Prepends the necessary imports when added.
  *   - Optionally records Wu* component usages into a TelemetryCollector.
  */
@@ -75,12 +75,12 @@ function handleCapture(path, text, start, end, ms, processor, id, skipExplicitKe
 }
 
 /**
- * Transform a JSX prop value that is a TemplateLiteral into a useWt()() call
- * (or a new template literal with useWt()() for each static quasi).
+ * Transform a JSX prop value that is a TemplateLiteral into a wt() call
+ * (or a new template literal with wt() for each static quasi).
  *
- * Static:  Label={`hello`}              → Label={useWt()("hello")}
- * Dynamic: Label={`${name} hello`}       → Label={`${name} ${useWt()("hello")}`}
- * Dynamic: Label={`${a} and ${b}`}       → Label={`${a} ${useWt()("and")} ${b}`}
+ * Static:  Label={`hello`}              → Label={wt("hello")}
+ * Dynamic: Label={`${name} hello`}       → Label={`${name} ${wt("hello")}`}
+ * Dynamic: Label={`${a} and ${b}`}       → Label={`${a} ${wt("and")} ${b}`}
  *
  * @param {import('@babel/traverse').NodePath} path - JSXAttribute path.
  * @param {import('@babel/types').TemplateLiteral} expr
@@ -102,11 +102,11 @@ function transformPropTemplateLiteral(path, expr, code, ms, processor, id) {
     if (!text || HTML_ENTITY_RE.test(text)) return false
     processor.record(text, text, id, componentTree)
     // Overwrite the entire JSXExpressionContainer
-    ms.overwrite(path.node.value.start, path.node.value.end, `{useWt()(${JSON.stringify(text)})}`)
+    ms.overwrite(path.node.value.start, path.node.value.end, `{wt(${JSON.stringify(text)})}`)
     return true
   }
 
-  // Dynamic template literal: walk quasis, replace static parts with useWt()()
+  // Dynamic template literal: walk quasis, replace static parts with wt()
   const parts = ['`']
   let hasTranslatable = false
 
@@ -116,7 +116,7 @@ function transformPropTemplateLiteral(path, expr, code, ms, processor, id) {
 
     if (text && !HTML_ENTITY_RE.test(text)) {
       processor.record(text, text, id, componentTree)
-      parts.push(`${leading}\${useWt()(${JSON.stringify(text)})}${trailing}`)
+      parts.push(`${leading}\${wt(${JSON.stringify(text)})}${trailing}`)
       hasTranslatable = true
     } else {
       parts.push(cooked)
@@ -157,8 +157,11 @@ export function transformFile(code, id, processor, {telemetry} = {}) {
   const ms = new MagicString(code)
   let needsImport = false
   let hasImport = false
-  let needsUseWtImport = false
-  let hasUseWtImport = false
+  let needsWtImport = false
+  let hasWtImport = false
+  // Offset just before the closing `}` of an existing named import from wick-ui-lib,
+  // used to splice in extra names instead of prepending a second import statement.
+  let wickUiLibImportInsertPos = null
   // Local names of components actually imported from @npm-questionpro/* — telemetry only
   // counts these, so a same-named Wu* component from an unrelated package (e.g. a legacy
   // internal UI lib) never pollutes the @npm-questionpro/wick-ui-* usage stats.
@@ -178,9 +181,13 @@ export function transformFile(code, id, processor, {telemetry} = {}) {
     /** Track whether WuTranslate / wt are already imported so we don't duplicate them. */
     ImportDeclaration(path) {
       if (path.node.source.value.includes('wick-ui-lib')) {
+        const namedSpecifiers = path.node.specifiers.filter(s => s.type === 'ImportSpecifier')
+        if (namedSpecifiers.length) {
+          wickUiLibImportInsertPos = namedSpecifiers[namedSpecifiers.length - 1].end
+        }
         for (const s of path.node.specifiers) {
           if (s.imported?.name === 'WuTranslate') hasImport = true
-          if (s.imported?.name === 'useWt') hasUseWtImport = true
+          if (s.imported?.name === 'wt') hasWtImport = true
         }
       }
       if (path.node.source.value.startsWith('@npm-questionpro/')) {
@@ -210,12 +217,12 @@ export function transformFile(code, id, processor, {telemetry} = {}) {
 
     /**
      * Translatable props (Label, placeholder, title, aria-label, ...)
-     * rewritten to `{useWt()("foo")}` on Wu* components.
+     * rewritten to `{wt("foo")}` on Wu* components.
      *
      * Handles all three value shapes:
-     *   Label="hello"              → Label={useWt()("hello")}
-     *   Label={`hello`}            → Label={useWt()("hello")}
-     *   Label={`${name} hello`}    → Label={`${name} ${useWt()("hello")}`}
+     *   Label="hello"              → Label={wt("hello")}
+     *   Label={`hello`}            → Label={wt("hello")}
+     *   Label={`${name} hello`}    → Label={`${name} ${wt("hello")}`}
      */
     JSXAttribute(path) {
       const propName = path.node.name.name
@@ -231,8 +238,8 @@ export function transformFile(code, id, processor, {telemetry} = {}) {
         if (!text) return
         if (!processor.shouldTranslateProp(propName, path)) return
         processor.record(text, text, id, getComponentTree(path))
-        ms.overwrite(value.start, value.end, `{useWt()(${JSON.stringify(text)})}`)
-        needsUseWtImport = true
+        ms.overwrite(value.start, value.end, `{wt(${JSON.stringify(text)})}`)
+        needsWtImport = true
         return
       }
 
@@ -240,7 +247,7 @@ export function transformFile(code, id, processor, {telemetry} = {}) {
       //   Label={`hello`}  or  Label={`${name} hello`}
       if (value.type === 'JSXExpressionContainer' && value.expression.type === 'TemplateLiteral') {
         if (transformPropTemplateLiteral(path, value.expression, code, ms, processor, id)) {
-          needsUseWtImport = true
+          needsWtImport = true
         }
       }
     },
@@ -315,12 +322,18 @@ export function transformFile(code, id, processor, {telemetry} = {}) {
 
   if (!ms.hasChanged()) return null
 
-  if (needsUseWtImport && !hasUseWtImport) {
-    ms.prepend(`import { useWt } from '@npm-questionpro/wick-ui-lib';\n`)
-  }
+  // Merge into one statement — either spliced into an existing wick-ui-lib import or a
+  // single new prepended import — never two separate `import ... from 'wick-ui-lib'` lines.
+  const namesToImport = []
+  if (needsWtImport && !hasWtImport) namesToImport.push('wt')
+  if (needsImport && !hasImport) namesToImport.push('WuTranslate')
 
-  if (needsImport && !hasImport) {
-    ms.prepend(`import { WuTranslate } from '@npm-questionpro/wick-ui-lib';\n`)
+  if (namesToImport.length) {
+    if (wickUiLibImportInsertPos !== null) {
+      ms.appendLeft(wickUiLibImportInsertPos, `, ${namesToImport.join(', ')}`)
+    } else {
+      ms.prepend(`import { ${namesToImport.join(', ')} } from '@npm-questionpro/wick-ui-lib';\n`)
+    }
   }
 
   return {code: ms.toString(), map: ms.generateMap({hires: true})}