Fix: params type & parsing

README.md

@@ -131,16 +131,16 @@ and optionally contains:
 
 ### Functions
 #### Translate
-- `$translate(keys: string | string[], params?: any, lang?: string)`
+- `$translate(keys: string | string[], params?: Record<string, any>, lang?: string)`
 Translates a key or an array of keys. The syntax of the string is `key@@[default value]`
 
-- `$inlineTranslate(keys: string | string[], ctx: SpeakState, params?: any, lang?: string)`
+- `$inlineTranslate(keys: string | string[], ctx: SpeakState, params?: Record<string, any>, lang?: string)`
 Translates a key or an array of keys outside the component$. The syntax of the string is `key@@[default value]`
 
 - `useTranslate$()`
-Returns the translate functions as QRL
+Returns the translate function as QRL
 
-- `$plural(value: number | string, key?: string, params?: any, options?: Intl.PluralRulesOptions, lang?: string)`
+- `$plural(value: number | string, key?: string, params?: Record<string, any>, options?: Intl.PluralRulesOptions, lang?: string)`
 Gets the plural by a number using [Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) API
 
 #### Localize

packages/qwik-speak/src/core.ts

@@ -83,7 +83,7 @@ export const loadTranslations = async (
 export const translate = (
   key: string | string[],
   data: Translation,
-  params?: any,
+  params?: Record<string, any>,
   keySeparator = '.',
   keyValueSeparator = '@@',
 ): any => {
@@ -126,7 +126,7 @@ export const separateKeyValue = (key: string, keyValueSeparator: string): [strin
 /**
  * Replace params in the value
  */
-export const transpileParams = (value: string, params: any): string => {
+export const transpileParams = (value: string, params: Record<string, any>): string => {
   const replacedValue = value.replace(/{{\s?([^{}\s]*)\s?}}/g, (substring: string, parsedKey: string) => {
     const replacer = params[parsedKey];
     return replacer !== undefined ? replacer : substring;

packages/qwik-speak/src/inline-translate.ts

@@ -11,8 +11,8 @@ export type InlineTranslateFn = {
    * @param lang Optional language if different from the current one
    * @returns The translation or the key if not found
    */
-  (key: string, ctx: SpeakState, params?: any, lang?: string): string;
-  <T>(key: string, ctx: SpeakState, params?: any, lang?: string): T;
+  (key: string, ctx: SpeakState, params?: Record<string, any>, lang?: string): string;
+  <T>(key: string, ctx: SpeakState, params?: Record<string, any>, lang?: string): T;
   /**
    * Translate an array of keys outside the component$.
    * The syntax of the strings is 'key@@[default value]'
@@ -22,14 +22,14 @@ export type InlineTranslateFn = {
    * @param lang Optional language if different from the current one
    * @returns The translations or the keys if not found
    */
-  (keys: string[], ctx: SpeakState, params?: any, lang?: string): string[];
-  <T>(keys: string[], ctx: SpeakState, params?: any, lang?: string): T[];
+  (keys: string[], ctx: SpeakState, params?: Record<string, any>, lang?: string): string[];
+  <T>(keys: string[], ctx: SpeakState, params?: Record<string, any>, lang?: string): T[];
 };
 
 export const $inlineTranslate: InlineTranslateFn = (
   keys: string | string[],
   ctx: SpeakState,
-  params?: any,
+  params?: Record<string, any>,
   lang?: string
 ) => {
   const { locale, translation, config } = ctx;

packages/qwik-speak/src/types.ts

@@ -25,7 +25,7 @@ export interface SpeakLocale {
   /**
    * Key value pairs of unit identifiers
    */
-  units?: { [key: string]: string };
+  units?: Record<string, string>;
 }
 
 /**

packages/qwik-speak/src/use-plural.ts

@@ -12,13 +12,17 @@ export type PluralFn = {
    * @param lang Optional language if different from the current one
    * @returns The translation for the plural
    */
-  (value: number | string, key?: string, params?: any, options?: Intl.PluralRulesOptions, lang?: string): string;
+  (value: number | string,
+    key?: string,
+    params?: Record<string, any>,
+    options?: Intl.PluralRulesOptions,
+    lang?: string): string;
 };
 
 export const usePlural: PluralFn = (
   value: number | string,
   key?: string,
-  params?: any,
+  params?: Record<string, any>,
   options?: Intl.PluralRulesOptions,
   lang?: string
 ) => {

packages/qwik-speak/src/use-translate.ts

@@ -13,8 +13,8 @@ export type TranslateFn = {
    * @param lang Optional language if different from the current one
    * @returns The translation or the key if not found
    */
-  (key: string, params?: any, lang?: string): string;
-  <T>(key: string, params?: any, lang?: string): T;
+  (key: string, params?: Record<string, any>, lang?: string): string;
+  <T>(key: string, params?: Record<string, any>, lang?: string): T;
   /**
    * Translate an array of keys.
    * The syntax of the strings is 'key@@[default value]'
@@ -23,11 +23,11 @@ export type TranslateFn = {
    * @param lang Optional language if different from the current one
    * @returns The translations or the keys if not found
    */
-  (keys: string[], params?: any, lang?: string): string[];
-  <T>(keys: string[], params?: any, lang?: string): T[];
+  (keys: string[], params?: Record<string, any>, lang?: string): string[];
+  <T>(keys: string[], params?: Record<string, any>, lang?: string): T[];
 };
 
-export const useTranslate: TranslateFn = (keys: string | string[], params?: any, lang?: string) => {
+export const useTranslate: TranslateFn = (keys: string | string[], params?: Record<string, any>, lang?: string) => {
   const ctx = useSpeakContext();
   const { locale, translation, config } = ctx;
 
@@ -45,8 +45,8 @@ export interface TranslateQrl extends QRL<() => any> {
    * @param lang Optional language if different from the current one
    * @returns The translation or the key if not found
    */
-  (key: string, params?: any, lang?: string): Promise<string>;
-  <T>(key: string, params?: any, lang?: string): Promise<T>;
+  (key: string, params?: Record<string, any>, lang?: string): Promise<string>;
+  <T>(key: string, params?: Record<string, any>, lang?: string): Promise<T>;
   /**
    * Translate an array of keys.
    * The syntax of the strings is 'key@@[default value]'
@@ -55,15 +55,15 @@ export interface TranslateQrl extends QRL<() => any> {
    * @param lang Optional language if different from the current one
    * @returns The translations or the keys if not found
    */
-  (keys: string[], params?: any, lang?: string): Promise<string[]>;
-  <T>(keys: string[], params?: any, lang?: string): Promise<T[]>;
+  (keys: string[], params?: Record<string, any>, lang?: string): Promise<string[]>;
+  <T>(keys: string[], params?: Record<string, any>, lang?: string): Promise<T[]>;
 }
 
 export const useTranslateQrl = (): TranslateQrl => {
   const ctx = useSpeakContext();
   const { locale, translation, config } = ctx;
 
-  const translate$ = $((keys: string | string[], params?: any, lang?: string) => {
+  const translate$ = $((keys: string | string[], params?: Record<string, any>, lang?: string) => {
     lang ??= locale.lang;
 
     return translate(keys, translation[lang], params, config.keySeparator, config.keyValueSeparator);

packages/qwik-speak/tools/core/parser.ts

@@ -92,6 +92,9 @@ export function tokenize(code: string, start = 0): Token[] {
 
   const next = () => code[++index];
 
+  const lookAhead = () => code[index + 1];
+  const lookBehind = () => code[index - 1];
+
   const getRawValue = () => code.substring(start, index + 1);
 
   const startLiteral = (ch: string) => /["'`0-9+-]/.test(ch);
@@ -100,6 +103,8 @@ export function tokenize(code: string, start = 0): Token[] {
 
   const startPunctuator = (ch: string) => /[(){},:;.[\]?!]/.test(ch);
 
+  const startComment = (ch: string) => /\//.test(ch) && /\*/.test(lookAhead());
+
   const scanLiteral = (ch: string, token?: Token): Token[] => {
     if (!token) {
       token = createToken('Literal');
@@ -164,6 +169,14 @@ export function tokenize(code: string, start = 0): Token[] {
     return scan(next());
   };
 
+  const scanComment = (ch: string): Token[] => {
+    if (/\//.test(ch) && /\*/.test(lookBehind())) {
+      return scan(ch);
+    }
+
+    return scanComment(next());
+  };
+
   const endOfScan = () => (tokens[tokens.length - 1]?.type === 'Punctuator' && parenthesisStack.length === 0) ||
     index === code.length;
 
@@ -179,6 +192,8 @@ export function tokenize(code: string, start = 0): Token[] {
 
     if (startPunctuator(ch)) return scanPunctuator(ch);
 
+    if (startComment(ch)) return scanComment(ch);
+
     return scan(next());
   };
 
@@ -231,11 +246,17 @@ export function parse(tokens: Token[], code: string, alias: string): CallExpress
     if (!property) {
       property = {
         type: 'Property',
-        key: { type: 'Identifier', value: token.value }, value: { type: 'Literal', value: '' }
+        key: { type: 'Identifier', value: token.value },
+        value: { type: 'Literal', value: '' }
       };
       properties.push(property);
     }
 
+    if (!/\)/.test(token.value) && property.value.type == 'CallExpression') {
+      property.value.value += token.value;
+      return parseProperty(next(), properties, property);
+    }
+
     if (!/:/.test(token.value) && !/:/.test(lookAhead().value)) {
       if (token.type === 'Literal') {
         property.value.value = trimQuotes(token.value);
@@ -296,21 +317,31 @@ export function parse(tokens: Token[], code: string, alias: string): CallExpress
     return parseArgs(next());
   };
 
-  const parseCallExpr = (token = tokens[c]): CallExpression => {
-    if (new RegExp(alias).test(token.value)) {
-      node = {
-        type: 'CallExpression',
-        value: code.substring(token.position.start, last().position.end + 1),
-        arguments: []
-      };
-      return parseArgs(next());
-    } else {
-      node.arguments.push({ type: 'CallExpression', value: token.value });
-      return parseArgs(next());
+  const parseCallExpr = (token: Token, arg?: Argument): CallExpression => {
+    if (!arg) {
+      if (new RegExp(alias).test(token.value)) {
+        node = {
+          type: 'CallExpression',
+          value: code.substring(token.position.start, last().position.end + 1),
+          arguments: []
+        };
+        return parseArgs(next());
+      } else {
+        arg = { type: 'CallExpression', value: token.value };
+        node.arguments.push(arg);
+        return parseCallExpr(next(), arg)
+      }
     }
+
+    arg.value += token.value;
+
+    // End of call
+    if (/\)/.test(token.value)) return parseArgs(next());
+
+    return parseCallExpr(next(), arg)
   }
 
-  return parseCallExpr();
+  return parseCallExpr(tokens[c]);
 }
 
 /**

packages/qwik-speak/tools/inline/plugin.ts

@@ -102,10 +102,6 @@ export function qwikSpeakInline(options: QwikSpeakInlineOptions): Plugin {
       if (target === 'client') {
         // Filter id
         if (/\/src\//.test(id) && /\.(js|cjs|mjs|jsx|ts|tsx)$/.test(id)) {
-          // TEST
-          /* if (code.includes('$translate')) {
-            console.log(code);
-          } */
           // Filter code: $plural
           if (/\$plural/.test(code)) {
             code = transformPlural(code);
@@ -118,10 +114,6 @@ export function qwikSpeakInline(options: QwikSpeakInlineOptions): Plugin {
           if (/\$inlineTranslate/.test(code)) {
             code = transformInline(code);
           }
-          // TEST
-          /* if (code.includes('$translate')) {
-            console.log(code);
-          } */
           return code;
         }
       }
@@ -176,20 +168,15 @@ export async function writeChunks(
     if (chunk.type === 'chunk' && 'code' in chunk && /build\//.test(chunk.fileName)) {
       const filename = normalize(`${targetDir}/${chunk.fileName.split('/')[1]}`);
 
-      // TEST
-      /* if (chunk.code.includes(inlinePlaceholder)) {
-        console.log(filename);
-        console.log(chunk.code);
-      } */
       // Inline
-      let code = inlinePlural(chunk.code, inlinePluralPlaceholder, inlinePlaceholder, lang, opts);
-      code = inline(code, translation, inlinePlaceholder, lang, opts);
+      let code = chunk.code;
+      if (code.includes(inlinePluralPlaceholder)) {
+        code = inlinePlural(chunk.code, inlinePluralPlaceholder, inlinePlaceholder, lang, opts);
+      }
+      if (code.includes(inlinePlaceholder)) {
+        code = inline(code, translation, inlinePlaceholder, lang, opts);
+      }
       tasks.push(writeFile(filename, code));
-      // TEST
-      /* if (chunk.code.includes(inlinePlaceholder)) {
-        console.log(filename);
-        console.log(code);
-      } */
 
       // Original chunks to default lang
       if (lang === opts.defaultLang) {