@npm-questionpro/wick-ui-i18n 0.1.0

package/README.md

@@ -0,0 +1,90 @@
+Here is the stripped-down, one-liner style README with the logic map included.
+
+# Wick UI Auto I18n
+
+**Build-time extractor that wraps static strings in `<WuTranslate>` and generates a JSON dictionary.**
+
+---
+
+### Quick Start
+
+```javascript
+import wickuiI18nPlugin from "./plugins/wickui-i18n";
+export default {
+  plugins: [wickuiI18nPlugin({ debug: true })],
+};
+```
+
+---
+
+### 🛠 Attributes
+
+- **`data-i18n-wrapper`**: Forces extraction on non-Wu components (e.g., `<div data-i18n-wrapper>Text</div>`).
+- **`data-i18n-key="custom.key"`**: Overrides the default "text-as-key" behavior.
+- **`data-i18n-skip`**: Prevents the plugin from touching the element or its children.
+
+---
+
+### 📖 Rules & Logic
+
+- **Auto-Detection**: Targets all `Wu*` prefixed components by default.
+- **Supported**: Static `JSXText`, `{"Strings"}`, and non-dynamic `{`Template Literals`}`.
+- **Ignored**: Any expression containing variables (e.g., `{`Hello ${name}`}`).
+- **Output**: Generates `dist/wick_extracted_strings.json` during bundle phase.
+
+---
+
+### ⚙️ Config Options
+
+| Option             | Type       | Default         | Description                                  |
+| ------------------ | ---------- | --------------- | -------------------------------------------- | ----------------- |
+| `components`       | `string[]` | `[]`            | Component names to scan (empty = all `Wu*`). |
+| `ignoreComponents` | `string[]` | `["WuIcon"...]` | Component names to explicitly skip.          |
+| `include`          | `RegExp[]` | `[/\.(jsx       | tsx)$/]`                                     | Files to process. |
+
+---
+
+### 🔄 Logic Map (Pseudo-code)
+
+```text
+FOR each File in the Project:
+    IF File matches IncludeFilter AND contains "Wu":
+        PARSE File into an AST (Abstract Syntax Tree)
+        INITIALIZE MagicString (for non-destructive editing)
+
+        TRAVERSE the AST:
+
+            // 1. IMPORT CHECK
+            IF Node is an Import from '@wick-ui-lib':
+                MARK 'WuTranslate' as already imported if found
+
+            // 2. STRING DISCOVERY
+            IF Node is JSXText OR (JSXExpressionContainer WITH StaticString):
+                SET CandidateText = Node.Value
+
+                // 3. HIERARCHY EVALUATION (The "shouldTranslate" logic)
+                WALK UP from Node to Parents:
+                    IF Parent has [data-skip] attribute:
+                        ABORT (Don't translate this node)
+
+                    IF Parent has [data-i18n-wrapper] attribute:
+                        MARK as "Valid Target" and STOP walking up
+
+                    IF Parent.Name starts with "Wu" OR is in CustomList:
+                        IF Parent.Name is NOT in IgnoreList:
+                            MARK as "Valid Target" and STOP walking up
+
+                // 4. TRANSFORMATION
+                IF "Valid Target" was found:
+                    GET ExplicitKey from [data-i18n-key] OR USE CandidateText
+                    STORE { Key, CandidateText } in GlobalDictionary
+                    OVERWRITE original code with:
+                        `<WuTranslate __i18nKey="Key">OriginalText</WuTranslate>`
+                    SET NeedsImport = True
+
+        // 5. FINAL ASSEMBLY
+        IF NeedsImport AND NOT 'WuTranslate' Imported:
+            PREPEND import statement to top of file
+
+        RETURN Modified Code + Source Maps
+```

package/index.d.ts

@@ -0,0 +1,23 @@
+export interface AutoTranslateOptions {
+  /**
+   * List of components to extract text from.
+   * If empty, matches all Wu* components automatically.
+   */
+  components?: string[];
+
+  /**
+   * Files to include in the transformation.
+   * Can be string, RegExp, or array of string/RegExp.
+   */
+  include?: any;
+
+  /**
+   * Enable debug logging for extraction process.
+   */
+  debug?: boolean;
+}
+
+/**
+ * Vite plugin that extracts text from Wick UI components and wraps them in WuTranslate.
+ */
+export default function autoTranslate(options?: AutoTranslateOptions): any;

package/index.js

@@ -0,0 +1,172 @@
+import { createFilter } from "vite";
+import MagicString from "magic-string";
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+
+const traverse = _traverse.default || _traverse;
+
+class TranslationProcessor {
+  constructor(options) {
+    this.components = new Set(options.components || ["WuButton"]);
+    this.ignoreComponents = new Set(
+      options.ignoreComponents || ["WuIcon", "WuTranslateProvider"],
+    );
+    this.dictionary = new Map();
+    this.debugEnabled = options.debug || false;
+  }
+
+  log(...args) {
+    if (this.debugEnabled) console.log("[wick-i18n]", ...args);
+  }
+
+  record(key, text, file) {
+    if (this.dictionary.has(key) && this.dictionary.get(key) !== text) {
+      console.warn(
+        `[wick-i18n] Collision in ${file}\nKey: "${key}"\nNew: "${text}"`,
+      );
+      return;
+    }
+    this.dictionary.set(key, text);
+  }
+
+  shouldTranslate(path) {
+    let isIgnored = false;
+    let targetFound = 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 || [];
+
+      if (
+        attrs.some((a) =>
+          ["data-skip", "data-i18n-skip"].includes(a.name?.name),
+        )
+      ) {
+        isIgnored = true;
+        return true;
+      }
+
+      if (this.ignoreComponents.has(name)) {
+        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 isTarget = this.components.has(name);
+
+      if (hasWrapper || isTarget) {
+        targetFound = true;
+        return true;
+      }
+
+      return false;
+    });
+
+    return targetFound && !isIgnored;
+  }
+
+  getExplicitKey(path) {
+    const parent = path.findParent((p) => p.isJSXElement());
+    const attr = parent?.node.openingElement.attributes.find(
+      (a) => a.name?.name === "data-i18n-key",
+    );
+    if (!attr) return null;
+    return attr.value.type === "StringLiteral"
+      ? attr.value.value
+      : attr.value.expression?.value;
+  }
+}
+
+export default function wickuiI18nPlugin(options = {}) {
+  const processor = new TranslationProcessor(options);
+  const filter = createFilter(options.include || [/\.(jsx|tsx)$/]);
+
+  return {
+    name: "wick-ui-i18n",
+    enforce: "pre",
+
+    transform(code, id) {
+      if (!filter(id) || !code.includes("Wu")) return null;
+
+      const ast = parse(code, {
+        sourceType: "module",
+        plugins: ["jsx", "typescript"],
+      });
+      const ms = new MagicString(code);
+      let [needsImport, hasImport] = [false, false];
+
+      const handleCapture = (path, text, start, end) => {
+        const cleanText = text.trim();
+        if (!cleanText || !processor.shouldTranslate(path)) return;
+
+        const key = processor.getExplicitKey(path) || cleanText;
+        processor.record(key, cleanText, id);
+
+        const original = ms.slice(start, end);
+        ms.overwrite(
+          start,
+          end,
+          `<WuTranslate __i18nKey=${JSON.stringify(key)}>${original}</WuTranslate>`,
+        );
+        needsImport = true;
+      };
+
+      traverse(ast, {
+        ImportDeclaration(path) {
+          if (path.node.source.value.includes("wick-ui-lib")) {
+            hasImport = path.node.specifiers.some(
+              (s) => s.imported?.name === "WuTranslate",
+            );
+          }
+        },
+        JSXText(path) {
+          const text = path.node.value;
+          const trimmed = text.trim();
+          const start = path.node.start + text.indexOf(trimmed);
+          handleCapture(path, trimmed, start, start + trimmed.length);
+        },
+        JSXExpressionContainer(path) {
+          const expr = path.node.expression;
+          let text = null;
+          if (expr.type === "StringLiteral") text = expr.value;
+          else if (
+            expr.type === "TemplateLiteral" &&
+            !expr.expressions.length
+          ) {
+            text = expr.quasis[0].value.cooked;
+          }
+          if (text) handleCapture(path, text, path.node.start, path.node.end);
+        },
+      });
+
+      if (needsImport && !hasImport) {
+        ms.prepend(
+          `import { WuTranslate } from '@npm-questionpro/wick-ui-lib';\n`,
+        );
+      }
+
+      return needsImport
+        ? { code: ms.toString(), map: ms.generateMap({ hires: true }) }
+        : null;
+    },
+
+    generateBundle() {
+      this.emitFile({
+        type: "asset",
+        fileName: "wick_extracted_strings.json",
+        source: JSON.stringify(
+          Object.fromEntries(processor.dictionary),
+          null,
+          2,
+        ),
+      });
+    },
+  };
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@npm-questionpro/wick-ui-i18n",
+  "version": "0.1.0",
+  "license": "ISC",
+  "description": "Auto-translation AST wrapper for Wick UI",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "scripts": {
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "@types/babel__traverse": "^7.28.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.29.0",
+    "@babel/traverse": "^7.29.0",
+    "magic-string": "^0.30.21"
+  }
+}

package/wickuii18n.test.js

@@ -0,0 +1,83 @@
+import { describe, it, expect } from "vitest";
+import wickuiI18nPlugin from "./index.js";
+
+// Helper to simulate Vite running the transform hook
+function transform(code, options = {}) {
+  const plugin = wickuiI18nPlugin(options);
+  const result = plugin.transform(code, "TestFile.jsx");
+  return result ? result.code : code;
+}
+
+describe("Wick UI i18n Vite Plugin", () => {
+  it("1. Translates basic Wu* components and injects import", () => {
+    const code = `<WuButton>Submit</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`import { WuTranslate }`);
+    expect(result).toContain(
+      `<WuTranslate __i18nKey="Submit">Submit</WuTranslate>`,
+    );
+  });
+
+  it("2. Ignores components in the ignoreComponents list", () => {
+    const code = `<WuIcon>star</WuIcon>`;
+    const result = transform(code);
+    expect(result).toBe(code);
+  });
+
+  it("3. Handles smart nested ignored components (Ignored inside Target)", () => {
+    const code = `<WuButton>Click <WuIcon>star</WuIcon></WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(
+      `<WuTranslate __i18nKey="Click">Click</WuTranslate>`,
+    );
+    expect(result).toContain(`<WuIcon>star</WuIcon>`);
+  });
+
+  it("4. Handles smart nested target components (Target inside regular HTML)", () => {
+    const code = `<WuProvider><div><WuButton>Save</WuButton></div></WuProvider>`;
+    const result = transform(code);
+    expect(result).toContain(
+      `<WuTranslate __i18nKey="Save">Save</WuTranslate>`,
+    );
+  });
+
+  it("5. Respects data-skip and data-i18n-skip flags", () => {
+    const code1 = `<WuButton data-skip>Ignored</WuButton>`;
+    const code2 = `<WuButton data-i18n-skip>Ignored</WuButton>`;
+    expect(transform(code1)).toBe(code1);
+    expect(transform(code2)).toBe(code2);
+  });
+
+  it("6. Uses explicit keys when data-i18n-key is provided", () => {
+    const code = `<WuButton data-i18n-key="btn_login">Log In</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(
+      `<WuTranslate __i18nKey="btn_login">Log In</WuTranslate>`,
+    );
+  });
+
+  it("7. Translates JSX Expression Containers (Strings in braces)", () => {
+    const code = `<WuButton>{"Hello World"}</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(
+      `<WuTranslate __i18nKey="Hello World">{"Hello World"}</WuTranslate>`,
+    );
+  });
+
+  // it("8. Supports custom components via options", () => {
+  //   const code = `<CustomCard>Welcome</CustomCard>`;
+  //   const result = transform(code, { components: ["CustomCard"] });
+  //   expect(result).toContain(
+  //     `<WuTranslate __i18nKey="Welcome">Welcome</WuTranslate>`,
+  //   );
+  // });
+  //
+  it("9. Supports data-i18n-wrapper on non-target tags", () => {
+    const code = `<span data-i18n-wrapper>Wrapped Text</span>`;
+    const triggerCode = `import { WuPlaceholder } from 'lib';\n` + code;
+    const result = transform(triggerCode);
+    expect(result).toContain(
+      `<WuTranslate __i18nKey="Wrapped Text">Wrapped Text</WuTranslate>`,
+    );
+  });
+});