fix: support for more input components (#15)

assets/example/components/user-form.svelte

@@ -1,4 +1,7 @@
 <Form>
     <Input name="firstName"/>
     <Input name="lastName"/>
+    <Select name="countryCode"/>
+    <BubbleSelect name="amenities"/>
+    <LocalizedInput name="text"/>
 </Form>

assets/translations/de.csv

@@ -1,8 +1,11 @@
 components.auth.firstName;xxxTODOxxx
 components.auth.lastName;xxxTODOxxx
 components.auth.password;xxxTODOxxx
+components.user-form.amenities;xxxTODOxxx
+components.user-form.countryCode;xxxTODOxxx
 components.user-form.firstName;xxxTODOxxx
 components.user-form.lastName;xxxTODOxxx
+components.user-form.text;xxxTODOxxx
 routes.about.page.intro;xxxTODOxxx
 routes.layout.header;xxxTODOxxx
 routes.page.intro;xxxTODOxxx

assets/translations/en.csv

@@ -1,8 +1,11 @@
 components.auth.firstName;xxxTODOxxx
 components.auth.lastName;xxxTODOxxx
 components.auth.password;xxxTODOxxx
+components.user-form.amenities;xxxTODOxxx
+components.user-form.countryCode;xxxTODOxxx
 components.user-form.firstName;xxxTODOxxx
 components.user-form.lastName;xxxTODOxxx
+components.user-form.text;xxxTODOxxx
 routes.about.page.intro;xxxTODOxxx
 routes.layout.header;xxxTODOxxx
 routes.page.intro;xxxTODOxxx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vardario/svelte-i18next",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "",
   "license": "MIT",
   "author": "Sahin Vardar",

src/extract-i18n-keys.test.ts

@@ -8,15 +8,18 @@ describe('extract-i18n-keys', () => {
     const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
     const exampleDir = path.resolve(__dirname, '../assets/example');
 
-    const keys = await extractI18NextKeys([exampleDir]);
+    const keys = await extractI18NextKeys([exampleDir]);    
 
     expect(keys.sort()).toStrictEqual(
       [
         'components.auth.firstName',
         'components.auth.lastName',
         'components.auth.password',
+        'components.user-form.amenities',
+        'components.user-form.countryCode',
         'components.user-form.firstName',
         'components.user-form.lastName',
+        'components.user-form.text',
         'routes.about.page.intro',
         'routes.layout.header',
         'routes.page.intro',

src/extract-i18n-keys.ts

@@ -9,14 +9,14 @@ import * as compiler from 'svelte/compiler';
 import { Ast } from 'svelte/types/compiler/interfaces.js';
 import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
 import { extractKeyPathFromFile, stripScriptTag } from './string-utils.js';
-import { scanDir } from './utils.js';
+import { SUPPORTED_COMPONENTS, scanDir } from './utils.js';
 
 function extractI18nKeys(ast: Ast | Node, callIdentifier: string): string[] {
   const result: string[] = [];
 
   compiler.walk(ast, {
     enter: (node: any) => {
-      if (node.type === 'CallExpression') {        
+      if (node.type === 'CallExpression') {
         const callExpressionNode = node as CallExpression;
         const { callee } = callExpressionNode;
         if (callee.type === 'Identifier' && callee.name === callIdentifier) {
@@ -27,7 +27,7 @@ function extractI18nKeys(ast: Ast | Node, callIdentifier: string): string[] {
         }
       }
 
-      if (node.type === 'InlineComponent' && ['Input', 'Checkbox'].includes(node.name)) {
+      if (node.type === 'InlineComponent' && SUPPORTED_COMPONENTS.includes(node.name)) {
         const nameAttribute = node.attributes?.find((attr: any) => attr.name === 'name');
         if (nameAttribute) {
           result.push(nameAttribute.value[0].data);
@@ -57,7 +57,7 @@ export async function processSvelteFile(
         return { code: content };
       },
       async script({ content, filename }) {
-        const ast = acorn.parse(content, { ecmaVersion: 'latest', sourceType:'module' }) as Node;
+        const ast = acorn.parse(content, { ecmaVersion: 'latest', sourceType: 'module' }) as Node;
         keys.push(...extractI18nKeys(ast, callIdentifier));
         return { code: content };
       }

src/i18n-preprocessor.test.ts

@@ -33,6 +33,9 @@ describe('i18n-preprocessor', () => {
       `<Form>
     <Input name="firstName" label={$i18n("components.user-form.firstName")}/>
     <Input name="lastName" label={$i18n("components.user-form.lastName")}/>
+    <Select name="countryCode" label={$i18n("components.user-form.countryCode")}/>
+    <BubbleSelect name="amenities" label={$i18n("components.user-form.amenities")}/>
+    <LocalizedInput name="text" label={$i18n("components.user-form.text")}/>
 </Form>`
     );
   });

src/i18n-preprocessor.ts

@@ -6,6 +6,7 @@ import * as compiler from 'svelte/compiler';
 import { Ast, TemplateNode } from 'svelte/types/compiler/interfaces';
 import type { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
 import { extractKeyPathFromFile, stripScriptTag } from './string-utils.js';
+import { SUPPORTED_COMPONENTS } from './utils.js';
 
 export function create18nCallLabelAttribute(callIdentifier: string, i18nKey: string) {
   const expression = parse(`${callIdentifier}("${i18nKey}")`, { ecmaVersion: 'latest' });
@@ -51,7 +52,7 @@ export function adjustI18nCall(ast: Ast | Node, prefix: string, callIdentifier:
 export function adjustInputElementLabels(ast: Ast, prefix: string, callIdentifier: string = '$i18n') {
   compiler.walk(ast.html, {
     enter: (node: TemplateNode) => {
-      if (node.type === 'InlineComponent' && ['Input', 'Checkbox'].includes(node.name)) {
+      if (node.type === 'InlineComponent' && SUPPORTED_COMPONENTS.includes(node.name)) {
         const nameAttribute = node.attributes?.find((attr: any) => attr.name === 'name');
         const labelAttribute = node.attributes?.find((attr: any) => attr.name === 'label');
 
@@ -129,7 +130,7 @@ export const i18nProcessor = (options?: I18nProcessorOptions): PreprocessorGroup
     },
     async script({ content, filename }) {
       return preprocess(content, filename, async () => {
-        const program = parse(content, { ecmaVersion: 'latest', sourceType:'module' }) as Node;
+        const program = parse(content, { ecmaVersion: 'latest', sourceType: 'module' }) as Node;
         const keyPath = extractKeyPathFromFile(filename!);
         adjustI18nCall(program, keyPath, callIdentifier);
         return { code: generate(program) };

src/utils.ts

@@ -25,10 +25,9 @@ export async function scanDir(dir: string, filter?: (file: string) => boolean) {
   return result.sort();
 }
 
-
-
 export function __dirname(meta: ImportMeta) {
   const __filename = url.fileURLToPath(import.meta.url);
   return path.dirname(__filename);
 }
 
+export const SUPPORTED_COMPONENTS = ['Input', 'Checkbox', 'Select', 'BubbleSelect', 'LocalizedInput'];