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

package/src/recordWtCalls.js

@@ -0,0 +1,166 @@
+/**
+ * @fileoverview recordWtCalls — handles wt() and useWt()() call expressions:
+ *
+ *  1. recordWtCall   — records static string args into the translation dictionary.
+ *                      No code rewrite; wt/useWt handle runtime lookup.
+ *
+ *  2. transformWtTemplateLiteral — rewrites template literals with expressions
+ *                      so each static quasi becomes its own wt/useWt call:
+ *
+ *                        wt(`Hello ${name}`)
+ *                        → `${wt("Hello")} ${name}`
+ *
+ *                        useWt()(`Hello ${name}`)
+ *                        → `${useWt()("Hello")} ${name}`
+ *
+ * Both functions handle the same two call shapes:
+ *   wt(...)       — bare identifier callee
+ *   useWt()(...)  — call expression callee (useWt() returns the translate fn)
+ *
+ * Supported static arg forms:
+ *   wt("hello")        — StringLiteral → recorded, not rewritten
+ *   wt(`hello`)        — TemplateLiteral, no expressions → recorded, not rewritten
+ *   wt(`hello ${n}`)   — TemplateLiteral with expressions → each quasi recorded + rewritten
+ *
+ * Ignored:
+ *   wt(variable)       — dynamic, cannot be statically analysed
+ *   wt()  /  wt(a, b)  — wrong arity
+ */
+
+import {splitQuasi, normalise} from './utils.js'
+
+// ─── shared helper ────────────────────────────────────────────────────────────
+
+/**
+ * Detect whether `node` is a `wt(...)` or `useWt()(...)` call and return
+ * the wrapper string used to reconstruct translated quasis in the output.
+ *
+ * Returns `null` when the node is neither shape.
+ *
+ * @param {import('@babel/types').CallExpression} node
+ * @returns {{ wrapper: (text: string) => string, args: import('@babel/types').Node[] } | null}
+ */
+function getWtInfo(node) {
+  const {callee, arguments: args} = node
+
+  // wt(...)
+  if (callee.type === 'Identifier' && callee.name === 'wt') {
+    return {wrapper: text => `wt(${JSON.stringify(text)})`, args}
+  }
+
+  // useWt()(...)
+  if (
+    callee.type === 'CallExpression' &&
+    callee.callee.type === 'Identifier' &&
+    callee.callee.name === 'useWt' &&
+    callee.arguments.length === 0
+  ) {
+    return {wrapper: text => `useWt()(${JSON.stringify(text)})`, args}
+  }
+
+  return null
+}
+
+// ─── recordWtCall ─────────────────────────────────────────────────────────────
+
+/**
+ * If `path` is a `wt(staticString)` or `useWt()(staticString)` call, record
+ * the key in the processor dictionary. Returns `true` when a key was recorded.
+ *
+ * No code transformation is performed — wt/useWt handle runtime lookup.
+ *
+ * @param {import('@babel/traverse').NodePath} path  - CallExpression path.
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string} id - Source file path (for collision warnings).
+ * @returns {boolean}
+ */
+export function recordWtCall(path, processor, id) {
+  const info = getWtInfo(path.node)
+  if (!info) return false
+
+  const {args} = info
+  if (args.length !== 1) return false
+
+  const arg = args[0]
+  let text = null
+
+  if (arg.type === 'StringLiteral') {
+    text = arg.value
+  } else if (arg.type === 'TemplateLiteral' && arg.expressions.length === 0) {
+    text = arg.quasis[0].value.cooked ?? arg.quasis[0].value.raw
+  }
+
+  if (text === null) return false
+
+  const cleanText = normalise(text)
+  if (!cleanText) return false
+
+  processor.record(cleanText, cleanText, id, '(wt)')
+  return true
+}
+
+// ─── transformWtTemplateLiteral ───────────────────────────────────────────────
+
+/**
+ * Transform a `wt(...)` or `useWt()(...)` call whose argument is a TemplateLiteral
+ * with one or more dynamic expressions.
+ *
+ * Each static quasi is independently extracted and replaced with a nested
+ * `wt("text")` / `useWt()("text")` call; dynamic expressions are preserved in
+ * place. The whole call is replaced with a plain template literal:
+ *
+ *   wt(`Hello ${name}`)            →  `${wt("Hello")} ${name}`
+ *   wt(`${a} and ${b}`)            →  `${a} ${wt("and")} ${b}`
+ *   useWt()(`Hello ${name}`)       →  `${useWt()("Hello")} ${name}`
+ *   useWt()(`${a} and ${b}`)       →  `${a} ${useWt()("and")} ${b}`
+ *
+ * If no quasi contains translatable text the call is left untouched and the
+ * function returns `false`.
+ *
+ * @param {import('@babel/traverse').NodePath} path - CallExpression path.
+ * @param {string} code   - Original source (for slicing expression text).
+ * @param {import('magic-string').default} ms
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string} id     - Source file path.
+ * @returns {boolean} `true` when the call was rewritten.
+ */
+export function transformWtTemplateLiteral(path, code, ms, processor, id) {
+  const info = getWtInfo(path.node)
+  if (!info) return false
+
+  const {wrapper, args} = info
+  if (args.length !== 1) return false
+
+  const arg = args[0]
+  if (arg.type !== 'TemplateLiteral' || arg.expressions.length === 0) return false
+
+  const {quasis, expressions} = arg
+  const parts = ['`']
+  let hasTranslatable = false
+
+  for (let i = 0; i < quasis.length; i++) {
+    const cooked = quasis[i].value.cooked ?? quasis[i].value.raw
+    const {leading, text, trailing} = splitQuasi(cooked)
+
+    if (text) {
+      processor.record(text, text, id, '(wt)')
+      parts.push(`${leading}\${${wrapper(text)}}${trailing}`)
+      hasTranslatable = true
+    } else {
+      // empty or whitespace-only quasi — preserve as literal template text
+      parts.push(cooked)
+    }
+
+    if (i < expressions.length) {
+      const exprSrc = code.slice(expressions[i].start, expressions[i].end)
+      parts.push(`\${${exprSrc}}`)
+    }
+  }
+
+  parts.push('`')
+
+  if (!hasTranslatable) return false
+
+  ms.overwrite(path.node.start, path.node.end, parts.join(''))
+  return true
+}

package/src/telemetry.js

@@ -0,0 +1,106 @@
+/**
+ * @fileoverview Telemetry collector — scans consumer node_modules for
+ * @npm-questionpro/wick-ui-* versions and counts Wu* JSX component usages
+ * across the entire build. Emitted as `telemetry.json` at build time and
+ * served at `GET /telemetry.json` in dev.
+ *
+ * Intentionally isolated from i18n logic — no imports from other src/ files
+ * except shared utilities (no domain objects).
+ *
+ * Wu* component recording is done inside transformFile's existing traversal
+ * (via the `telemetry` option) so no second parse is needed per file.
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+
+export class TelemetryCollector {
+  constructor() {
+    /** @type {Record<string, string>} short name → version e.g. { lib: '2.0.0-next.29' } */
+    this.versions = {}
+    /** @type {Map<string, number>} PascalCase component name → total usage count */
+    this.counts = new Map()
+  }
+
+  /** Clear component counts — called on every buildStart so watch-mode rebuilds are clean. */
+  reset() {
+    this.counts.clear()
+  }
+
+  /**
+   * Increment the usage count for a Wu* component and record its prop names.
+   * @param {string}   name  - e.g. 'WuButton'
+   * @param {string[]} props - Prop names present on this usage e.g. ['variant', 'disabled']
+   */
+  record(name, props = []) {
+    if (!this.counts.has(name)) this.counts.set(name, {count: 0, props: new Map()})
+    const entry = this.counts.get(name)
+    entry.count++
+    for (const prop of props) {
+      entry.props.set(prop, (entry.props.get(prop) ?? 0) + 1)
+    }
+  }
+
+  /**
+   * Scan the consumer's node_modules for all @npm-questionpro/wick-ui-* packages
+   * and record their versions. Called once in configResolved when root is known.
+   *
+   * @param {string} root - Vite project root
+   */
+  scanVersions(root) {
+    const scopeDir = path.join(root, 'node_modules', '@npm-questionpro')
+    let entries
+    try {
+      entries = fs.readdirSync(scopeDir)
+    } catch {
+      // @npm-questionpro scope not present — skip silently
+      return
+    }
+    for (const name of entries) {
+      if (!name.startsWith('wick-ui-')) continue
+      try {
+        const pkg = JSON.parse(fs.readFileSync(path.join(scopeDir, name, 'package.json'), 'utf8'))
+        const shortKey = name.replace('wick-ui-', '')
+        this.versions[shortKey] = pkg.version
+      } catch {
+        // malformed or missing package.json — skip
+      }
+    }
+
+    // Also capture react and react-dom versions from the consumer's node_modules
+    for (const dep of ['react', 'react-dom']) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(path.join(root, 'node_modules', dep, 'package.json'), 'utf8'))
+        this.versions[dep] = pkg.version
+      } catch {
+        // not installed — skip
+      }
+    }
+  }
+
+  /**
+   * Produce the final telemetry payload as two clearly separated sections:
+   *  - `versions`: package version map (sorted alphabetically)
+   *  - `components`: Wu* usage counts with per-prop tallies (sorted alphabetically)
+   *
+   * Keeping the two sections distinct prevents a component named "react" or
+   * "lib" from silently shadowing a version entry.
+   *
+   * @returns {{ versions: Record<string, string>, components: Record<string, object> }}
+   */
+  toJSON() {
+    const versions = Object.fromEntries(Object.entries(this.versions).sort(([a], [b]) => a.localeCompare(b)))
+    const components = Object.fromEntries(
+      [...this.counts.entries()]
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([name, {count, props}]) => [
+          name,
+          {
+            count,
+            props: Object.fromEntries([...props.entries()].sort(([a], [b]) => a.localeCompare(b))),
+          },
+        ]),
+    )
+    return {versions, components}
+  }
+}

package/src/transform.js

@@ -1,36 +1,23 @@
 /**
  * @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 `{wt("…")}`
+ *   - Rewrites translatable props (placeholder, title, …) to `{useWt()("…")}`
  *   - Prepends the necessary imports when added.
+ *   - Optionally records Wu* component usages into a TelemetryCollector.
  */
 
 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
-
-/** Babel parser plugins applied to every file. */
-const BABEL_PLUGINS = ['jsx', 'typescript']
-
-/**
- * Matches any HTML entity: named (&amp;), decimal (&#169;), or hex (&#x00A9;).
- * Used to skip text segments that contain entities — they must be left as-is.
- * Note: for JSXText this must be tested against the RAW source, not the Babel
- * decoded .value (Babel turns &amp; → "&", &nbsp; → "\u00a0", etc.).
- */
-const HTML_ENTITY_RE = /&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);/
+import {transformJsxTextWithEntities} from './transformReactTextWithEntities.js'
+import {recordWtCall, transformWtTemplateLiteral} from './recordWtCalls.js'
+import {traverse, BABEL_PLUGINS, HTML_ENTITY_RE, normalise, splitQuasi} from './utils.js'
 
 /** @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
+  if (node.type === 'TemplateLiteral' && !node.expressions.length) return node.quasis[0].value.cooked
   return null
 }
 
@@ -51,17 +38,7 @@ function handleConditional(expr, path, ms, processor, id) {
   for (const branch of [expr.consequent, expr.alternate]) {
     const text = getStaticString(branch)
     if (text !== null) {
-      changed =
-        handleCapture(
-          path,
-          text,
-          branch.start,
-          branch.end,
-          ms,
-          processor,
-          id,
-          true,
-        ) || changed
+      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
     }
@@ -83,20 +60,8 @@ function handleConditional(expr, path, ms, processor, id) {
  * @param {string}       id         - File path (for collision warnings).
  * @returns {boolean} `true` when replacement was made.
  */
-function handleCapture(
-  path,
-  text,
-  start,
-  end,
-  ms,
-  processor,
-  id,
-  skipExplicitKey = false,
-) {
-  const cleanText = text
-    .trim()
-    .replace(/\n/g, ' ')
-    .replace(/\s{2,}/g, ' ')
+function handleCapture(path, text, start, end, ms, processor, id, skipExplicitKey = false) {
+  const cleanText = normalise(text)
   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 "&amp;" etc.
@@ -105,11 +70,67 @@ function handleCapture(
   const key = (!skipExplicitKey && processor.getExplicitKey(path)) || cleanText
   processor.record(key, cleanText, id, getComponentTree(path))
 
-  ms.overwrite(
-    start,
-    end,
-    `<WuTranslate __i18nKey=${JSON.stringify(key)}></WuTranslate>`,
-  )
+  ms.overwrite(start, end, `<WuTranslate __i18nKey=${JSON.stringify(key)}></WuTranslate>`)
+  return true
+}
+
+/**
+ * Transform a JSX prop value that is a TemplateLiteral into a useWt()() call
+ * (or a new template literal with useWt()() 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}`}
+ *
+ * @param {import('@babel/traverse').NodePath} path - JSXAttribute path.
+ * @param {import('@babel/types').TemplateLiteral} expr
+ * @param {string} code
+ * @param {import('magic-string').default} ms
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string} id
+ * @returns {boolean} `true` when a replacement was written.
+ */
+function transformPropTemplateLiteral(path, expr, code, ms, processor, id) {
+  if (!processor.shouldTranslateProp(path.node.name.name, path)) return false
+
+  const {quasis, expressions} = expr
+  const componentTree = getComponentTree(path)
+
+  // Static template literal: no expressions
+  if (expressions.length === 0) {
+    const text = normalise(quasis[0].value.cooked ?? quasis[0].value.raw)
+    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)})}`)
+    return true
+  }
+
+  // Dynamic template literal: walk quasis, replace static parts with useWt()()
+  const parts = ['`']
+  let hasTranslatable = false
+
+  for (let i = 0; i < quasis.length; i++) {
+    const cooked = quasis[i].value.cooked ?? quasis[i].value.raw
+    const {leading, text, trailing} = splitQuasi(cooked)
+
+    if (text && !HTML_ENTITY_RE.test(text)) {
+      processor.record(text, text, id, componentTree)
+      parts.push(`${leading}\${useWt()(${JSON.stringify(text)})}${trailing}`)
+      hasTranslatable = true
+    } else {
+      parts.push(cooked)
+    }
+
+    if (i < expressions.length) {
+      parts.push(`\${${code.slice(expressions[i].start, expressions[i].end)}}`)
+    }
+  }
+
+  parts.push('`')
+  if (!hasTranslatable) return false
+
+  ms.overwrite(path.node.value.start, path.node.value.end, `{${parts.join('')}}`)
   return true
 }
 
@@ -120,10 +141,14 @@ function handleCapture(
  * @param {string} code - Raw source of the file.
  * @param {string} id   - File path.
  * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {object} [options]
+ * @param {import('./telemetry.js').TelemetryCollector|null} [options.telemetry]
+ *   When provided, Wu* JSX component usages are recorded into this collector
+ *   inside the same traversal — avoiding a second parse of the file.
  * @returns {{ code: string, map: object } | null} Transformed result, or
  *   `null` when no changes were made.
  */
-export function transformFile(code, id, processor) {
+export function transformFile(code, id, processor, {telemetry} = {}) {
   const ast = parse(code, {
     sourceType: 'module',
     plugins: BABEL_PLUGINS,
@@ -132,19 +157,18 @@ export function transformFile(code, id, processor) {
   const ms = new MagicString(code)
   let needsImport = false
   let hasImport = false
-  let hasWtTransform = false
-  let needsWtImport = false
-  let hasWtImport = false
+  let needsUseWtImport = false
+  let hasUseWtImport = false
 
   traverse(ast, {
-    /** wt("static string") call — record the key in the dictionary.
-     * No code transformation; wt() handles runtime lookup.
+    /**
+     * wt("static string") / useWt()("static string") — record the key.
+     * wt(`quasi ${expr}`) / useWt()(`quasi ${expr}`) — rewrite each static
+     * quasi to its own wt/useWt call and record it.
      */
     CallExpression(path) {
       if (recordWtCall(path, processor, id)) return
-      if (transformWtTemplateLiteral(path, code, ms, processor, id)) {
-        hasWtTransform = true
-      }
+      transformWtTemplateLiteral(path, code, ms, processor, id)
     },
 
     /** Track whether WuTranslate / wt are already imported so we don't duplicate them. */
@@ -152,7 +176,7 @@ export function transformFile(code, id, processor) {
       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 === 'useWt') hasUseWtImport = true
         }
       }
     },
@@ -160,7 +184,7 @@ export function transformFile(code, id, processor) {
     /**
      * Data-file key extraction: records string values of configured object
      * property names (e.g. `label: 'Analytics'`) without rewriting code.
-     * Enabled via `extractFromKeys` option.
+     * Enabled via the `dataLabelKeys` plugin option.
      */
     ObjectProperty(path) {
       if (!processor.extractFromKeys.size) return
@@ -169,10 +193,7 @@ export function transformFile(code, id, processor) {
       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, ' ')
+      const text = normalise(value.value)
       if (!text) return
       if (HTML_ENTITY_RE.test(text)) return
       processor.record(text, text, id, '(data)')
@@ -180,28 +201,39 @@ export function transformFile(code, id, processor) {
 
     /**
      * Translatable props (Label, placeholder, title, aria-label, ...)
-     * rewritten to `{wt("foo")}` on Wu* components.
+     * rewritten to `{useWt()("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")}`}
      */
     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 rawValue = code.slice(value.start, value.end)
-      if (HTML_ENTITY_RE.test(rawValue)) return
+      if (!value) return
 
-      const text = value.value
-        .trim()
-        .replace(/\n/g, ' ')
-        .replace(/\s{2,}/g, ' ')
-      if (!text) return
-
-      if (!processor.shouldTranslateProp(propName, path)) return
+      // Shape 1: StringLiteral  —  Label="hello"
+      if (value.type === 'StringLiteral') {
+        const rawValue = code.slice(value.start, value.end)
+        if (HTML_ENTITY_RE.test(rawValue)) return
+        const text = normalise(value.value)
+        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
+        return
+      }
 
-      processor.record(text, text, id, getComponentTree(path))
-      ms.overwrite(value.start, value.end, `{wt(${JSON.stringify(text)})}`)
-      needsWtImport = true
+      // Shape 2 & 3: JSXExpressionContainer wrapping a TemplateLiteral
+      //   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
+        }
+      }
     },
 
     /** Plain JSX text: `<Foo>Hello world</Foo>` */
@@ -213,23 +245,13 @@ export function transformFile(code, id, processor) {
       // translatable text segments are still wrapped while entities stay put.
       const rawSource = code.slice(path.node.start, path.node.end)
       if (HTML_ENTITY_RE.test(rawSource)) {
-        if (transformJSXTextWithEntities(path, rawSource, ms, processor, id)) {
+        if (transformJsxTextWithEntities(path, rawSource, ms, processor, id)) {
           needsImport = true
         }
         return
       }
       const start = path.node.start + text.indexOf(trimmed)
-      if (
-        handleCapture(
-          path,
-          trimmed,
-          start,
-          start + trimmed.length,
-          ms,
-          processor,
-          id,
-        )
-      ) {
+      if (handleCapture(path, trimmed, start, start + trimmed.length, ms, processor, id)) {
         needsImport = true
       }
     },
@@ -249,10 +271,7 @@ export function transformFile(code, id, processor) {
 
       if (expr.type === 'StringLiteral') {
         text = expr.value
-      } else if (
-        expr.type === 'TemplateLiteral' &&
-        expr.expressions.length > 0
-      ) {
+      } else if (expr.type === 'TemplateLiteral' && expr.expressions.length > 0) {
         if (transformTemplateLiteralExpression(path, code, ms, processor, id)) {
           needsImport = true
         }
@@ -264,27 +283,30 @@ export function transformFile(code, id, processor) {
         return
       }
 
-      if (
-        text &&
-        handleCapture(
-          path,
-          text,
-          path.node.start,
-          path.node.end,
-          ms,
-          processor,
-          id,
-        )
-      ) {
+      if (text && handleCapture(path, text, path.node.start, path.node.end, ms, processor, id)) {
         needsImport = true
       }
     },
+
+    /**
+     * Telemetry: record Wu* component usages when a collector is provided.
+     * Runs in the same traversal to avoid parsing the file a second time.
+     */
+    JSXOpeningElement(path) {
+      if (!telemetry) return
+      const name = path.node.name.name
+      if (typeof name !== 'string' || !name.startsWith('Wu')) return
+      const props = path.node.attributes
+        .filter(a => a.type === 'JSXAttribute' && typeof a.name?.name === 'string')
+        .map(a => a.name.name)
+      telemetry.record(name, props)
+    },
   })
 
-  if (!needsImport && !hasWtTransform && !needsWtImport) return null
+  if (!ms.hasChanged()) return null
 
-  if (needsWtImport && !hasWtImport) {
-    ms.prepend(`import { wt } from '@npm-questionpro/wick-ui-lib';\n`)
+  if (needsUseWtImport && !hasUseWtImport) {
+    ms.prepend(`import { useWt } from '@npm-questionpro/wick-ui-lib';\n`)
   }
 
   if (needsImport && !hasImport) {