feat: add i18next-cli extractor plugin

build.ts

@@ -3,7 +3,10 @@ import solid from "vite-plugin-solid";
 import packageJson from "./package.json" with { type: "json" };
 
 await build({
-	entry: "./src/index.ts",
+	entry: {
+		index: "./src/index.ts",
+		plugin: "./src/plugin.ts",
+	},
 	platform: "browser",
 	outDir: "./dist",
 	dts: true,
@@ -25,6 +28,10 @@ const distPackageJson = {
 			types: "./index.d.ts",
 			default: "./index.js",
 		},
+		"./plugin": {
+			types: "./plugin.d.ts",
+			default: "./plugin.js",
+		},
 	},
 
 	peerDependencies: {

example/app.tsx

@@ -24,9 +24,7 @@ const getName = () => names[Math.floor(Math.random() * names.length)];
 export const App = () => {
 	const [name, setName] = createSignal(getName());
 
-	const [namespaces, setNamespaces] = createSignal(["translation"]);
-
-	const [t, i18n] = useTranslation(namespaces);
+	const [t, i18n] = useTranslation(["translation"]);
 
 	const [currentLanguage, requestedLanguage] = useLanguage();
 
@@ -89,13 +87,6 @@ export const App = () => {
 							t={t}
 						/>
 					</button>
-					<button
-						class="p-2 bg-blue-500 text-white rounded-xl"
-						type="button"
-						onClick={() => setNamespaces((prev) => [...prev, "lang"])}
-					>
-						Add lang namespace dynamically
-					</button>
 				</div>
 			</div>
 		</Suspense>

i18next.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "i18next-cli";
+import solidPlugin from "./src/plugin.ts";
+
+export default defineConfig({
+	locales: ["en", "de"],
+	extract: {
+		input: "./example/**/*.{ts,tsx}",
+		output: "./example/locale/{{language}}/{{namespace}}.json",
+	},
+	plugins: [solidPlugin()],
+});

package.json

@@ -17,13 +17,27 @@
 	"dependencies": {},
 	"peerDependencies": {
 		"i18next": "^25.8.13",
+		"i18next-cli": "^1.49.3",
 		"solid-js": "^1.9.11"
 	},
+	"peerDependenciesMeta": {
+		"i18next": {
+			"optional": false
+		},
+
+		"i18next-cli": {
+			"optional": true
+		},
+		"solid-js": {
+			"optional": false
+		}
+	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.6",
 		"@tailwindcss/vite": "^4.2.1",
 		"@types/bun": "^1.3.10",
 		"i18next": "^25.8.14",
+		"i18next-cli": "^1.49.3",
 		"i18next-resources-to-backend": "^1.2.1",
 		"solid-js": "^1.9.11",
 		"tailwindcss": "^4.2.1",

src/plugin.ts

@@ -0,0 +1,123 @@
+import type {
+	Expression,
+	Identifier,
+	JSXAttribute,
+	JSXAttrValue,
+	JSXOpeningElement,
+} from "@swc/types";
+import type { Plugin } from "i18next-cli";
+
+export type SolidI18nextOptions = {
+	transComponent: string[];
+};
+
+const getAttribute = (jsx: JSXOpeningElement, name: string) => {
+	const attribute = jsx.attributes.find(
+		(attr) =>
+			attr.type === "JSXAttribute" &&
+			attr.name.type === "Identifier" &&
+			attr.name.value === name,
+	) as JSXAttribute | undefined;
+
+	if (!attribute) return undefined;
+
+	return {
+		name: (attribute.name as Identifier).value,
+		value: attribute.value,
+	};
+};
+
+const getAttributeString = (value?: JSXAttrValue): string | undefined => {
+	if (value?.type !== "StringLiteral") return;
+	return value.value;
+};
+
+const getAttributeNumber = (value?: JSXAttrValue): number | undefined => {
+	if (value?.type !== "NumericLiteral") return;
+	return value.value;
+};
+
+const getAttributeExpression = (
+	value?: JSXAttrValue,
+): Expression | undefined => {
+	if (value?.type !== "JSXExpressionContainer") return;
+	if (value.expression.type === "JSXEmptyExpression") return;
+
+	return value.expression as Expression;
+};
+
+export default (
+	options: SolidI18nextOptions = {
+		transComponent: ["Trans"],
+	},
+): Plugin => ({
+	name: "solid-i18next",
+
+	onVisitNode: (node, ctx) => {
+		if (node.type !== "JSXOpeningElement") return;
+		const jsx: JSXOpeningElement = node as JSXOpeningElement;
+
+		if (jsx.name.type !== "Identifier") return;
+		if (!options.transComponent.includes(jsx.name.value)) return;
+
+		const keyAttr = getAttribute(jsx, "key");
+		const defaultValueAttr = getAttribute(jsx, "defaultValue");
+		const countAttr = getAttribute(jsx, "count");
+		const contextAttr = getAttribute(jsx, "context");
+		// const replaceAttr = getAttribute(jsx, "replace");
+
+		const nsAttr = getAttribute(jsx, "ns");
+		const tAttr = getAttribute(jsx, "t");
+		// const tOptionsAttr = getAttribute(jsx, "tOptions");
+
+		let tScope: ReturnType<typeof ctx.getVarFromScope>;
+
+		if (
+			tAttr?.value?.type === "JSXExpressionContainer" &&
+			tAttr.value.expression.type === "Identifier"
+		) {
+			tScope = ctx.getVarFromScope(tAttr.value.expression.value);
+		}
+
+		let key = getAttributeString(keyAttr?.value);
+		const defaultValue = getAttributeString(defaultValueAttr?.value);
+
+		if (!key) return;
+
+		// Default namespace to t scope ns
+		let ns = tScope?.defaultNs;
+
+		// Check for ns prop
+		if (nsAttr?.value) {
+			const innerNs = getAttributeString(nsAttr?.value);
+			if (innerNs !== undefined) ns = innerNs;
+		}
+
+		// TODO add tOptions ns check
+
+		// Check for inline namespace in key
+		const nsSeparator = ctx.config.extract.nsSeparator || ":";
+
+		if (key.includes(nsSeparator)) {
+			const [innerNs, ...parts] = key.split(nsSeparator);
+
+			ns = innerNs;
+			key = parts.join(nsSeparator);
+		}
+
+		// Finally add key
+		ctx.addKey({
+			key,
+			ns,
+			defaultValue,
+			contextExpression: getAttributeExpression(contextAttr?.value),
+			hasCount: getAttributeNumber(countAttr?.value) !== undefined,
+			// solid-i18next only supports explicit defaults
+			explicitDefault: true,
+			nsIsImplicit: ns === undefined,
+
+			// TODO
+			// optionsNode
+		});
+	},
+});