fix: Emit INVALID_TOKEN_IN_PLACEHOLDER instead of UNTERMINATED_CLOSING_BRACE when invalid token is in placeholder and update docs (#2255)

* Emit INVALID_TOKEN_IN_PLACEHOLDER instead of UNTERMINATED_CLOSING_BRACE when invalid token is in placeholder and update docs (#2252)

* chore: drop node v18

---------

Co-authored-by: lutejka <[email protected]>

Author: kazupon

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [18]
+        node: [20]
 
     runs-on: ${{ matrix.os }}
 
@@ -47,7 +47,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [18]
+        node: [20]
 
     runs-on: ${{ matrix.os }}
 
@@ -83,7 +83,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [18.19, 20, 22]
+        node: [20, 22, 24]
 
     runs-on: ${{ matrix.os }}
 
@@ -116,7 +116,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [18.19, 20, 22]
+        node: [20, 22, 24]
 
     runs-on: ${{ matrix.os }}
 

.github/workflows/nightly-release.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18.18
+          node-version: 20
           cache: pnpm
 
       - name: Install dependencies

.github/workflows/release.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile

docs/guide/essentials/syntax.md

@@ -26,6 +26,10 @@ The locale messages is the resource specified by the `messages` option of `creat
 
 Named interpolation allows you to specify variables defined in JavaScript. In the locale message above, you can localize it by giving the JavaScript defined `msg` as a parameter to the translation function.
 
+The variable name inside `{}` must starts with a letter (a-z, A-Z) or an underscore (`_`), followed by any combination of letters, digits, underscores (`_`), hyphens (`-`), or dollar signs (`$`).
+
+Examples: `{msg}`, `{_userName}`, `{user-id}`, `{total$}`
+
 The following is an example of the use of `$t` in a template:
 
 ```html
@@ -241,6 +245,73 @@ You can use the interpolations (Named, List, and Literal) for the key of Linked
 :::
 
 
+This example shows the use of modifiers (`@.lower`, `@.upper`, `@.capitalize`) combined with named, list, and literal interpolations.
+
+
+```js
+const messages = {
+  en: {
+    message: {
+      greeting: "Hello, @.lower:{'message.name'}! You have {count} new messages.",
+      name:"{name}"
+    },
+
+    welcome: "Welcome, @.upper:{'name'}! Today is @.capitalize:{'day'}.",
+    name: '{0}',
+    day: '{1}',
+
+    literalMessage: "This is an email: foo{'@'}@.lower:domain",
+    domain: 'SHOUTING'
+  }
+}
+```
+### Named interpolation with modifier
+
+In `message.greeting`, we use a named interpolation for `{count}` and link to `message.name`, applying the .lower modifier.
+
+The key `message.name` contains `{name}`, which will be interpolated with the passed `name` param.
+
+The `message.greeting` is linked to the locale message key `message.name`.
+
+```html
+<p>{{ $t('message.greeting', { name: 'Alice', count: 5 }) }}</p>
+```
+As result, the below
+
+```html
+<p>Hello, alice! You have 5 new messages.</p>
+```
+
+### List interpolation with modifier
+
+In this case, the values for `{0}` and `{1}` are passed as an array. The keys `name` and `day` are resolved using list interpolation and transformed with modifiers.
+
+```html
+<p>{{ $t('welcome', ['bob', 'MONDAY']) }}</p>
+```
+
+As result, the below
+
+```html
+<p>Welcome, BOB! Today is Monday.</p>
+```
+
+### Literal interpolation with modifier
+
+In this example, we use a literal string inside the message and apply the `.lower` modifier.
+
+```html
+<p>{{ $t('literalMessage') }}</p>
+```
+
+Here, the modifier is applied to the content inside `domain`, and the `@` is preserved as literal output.
+
+As result, the below
+
+```html
+<p>This is an email: foo@shouting</p>
+```
+
 ## Special Characters
 
 The following characters used in the message format syntax are processed by the compiler as special characters:

packages/message-compiler/src/tokenizer.ts

@@ -484,6 +484,26 @@ export function createTokenizer(
       name += ch
     }
 
+    // Check if takeNamedIdentifierChar stoped because of invalid characters
+    const currentChar = scnr.currentChar()
+    if (
+      currentChar &&
+      currentChar !== '}' &&
+      currentChar !== EOF &&
+      currentChar !== SPACE &&
+      currentChar !== NEW_LINE &&
+      currentChar !== '\u3000'
+    ) {
+      const invalidPart = readInvalidIdentifier(scnr)
+      emitError(
+        CompileErrorCodes.INVALID_TOKEN_IN_PLACEHOLDER,
+        currentPosition(),
+        0,
+        name + invalidPart
+      )
+      return name + invalidPart
+    }
+
     if (scnr.currentChar() === EOF) {
       emitError(
         CompileErrorCodes.UNTERMINATED_CLOSING_BRACE,

packages/message-compiler/test/tokenizer/named.test.ts

@@ -2,13 +2,13 @@ import { format } from '@intlify/shared'
 import { CompileErrorCodes, errorMessages } from '../../src/errors'
 import {
   createTokenizer,
-  TokenTypes,
   ERROR_DOMAIN,
-  parse
+  parse,
+  TokenTypes
 } from '../../src/tokenizer'
 
-import type { TokenizeOptions } from '../../src/options'
 import type { CompileError } from '../../src/errors'
+import type { TokenizeOptions } from '../../src/options'
 
 test('basic', () => {
   const tokenizer = createTokenizer('hi {name} !')
@@ -645,32 +645,80 @@ describe('errors', () => {
       }
     ] as CompileError[])
   })
-  const items = [`$`, `-`]
-  for (const ch of items) {
-    test(`invalid '${ch}' in placeholder`, () => {
-      parse(`hi {${ch}} !`, options)
-      expect(errors).toEqual([
-        {
-          code: CompileErrorCodes.INVALID_TOKEN_IN_PLACEHOLDER,
-          domain: ERROR_DOMAIN,
-          message: format(
-            errorMessages[CompileErrorCodes.INVALID_TOKEN_IN_PLACEHOLDER],
-            ch
-          ),
-          location: {
-            start: {
-              line: 1,
-              offset: 4,
-              column: 5
-            },
-            end: {
-              line: 1,
-              offset: 5,
-              column: 6
-            }
-          }
+
+  test.each([
+    [
+      '$',
+      {
+        start: {
+          line: 1,
+          offset: 4,
+          column: 5
+        },
+        end: {
+          line: 1,
+          offset: 5,
+          column: 6
+        }
+      }
+    ],
+    [
+      '-',
+      {
+        start: {
+          line: 1,
+          offset: 4,
+          column: 5
+        },
+        end: {
+          line: 1,
+          offset: 5,
+          column: 6
+        }
+      }
+    ],
+    [
+      'àaa',
+      {
+        start: {
+          line: 1,
+          offset: 4,
+          column: 5
+        },
+        end: {
+          line: 1,
+          offset: 7,
+          column: 8
         }
-      ] as CompileError[])
-    })
-  }
+      }
+    ],
+    [
+      'aàa',
+      {
+        start: {
+          line: 1,
+          offset: 4,
+          column: 5
+        },
+        end: {
+          line: 1,
+          offset: 7,
+          column: 8
+        }
+      }
+    ]
+  ])(`invalid '%s' in placeholder`, (ch, location) => {
+    parse(`hi {${ch}} !`, options)
+    expect(errors).toEqual([
+      {
+        code: CompileErrorCodes.INVALID_TOKEN_IN_PLACEHOLDER,
+        domain: ERROR_DOMAIN,
+        message: format(
+          errorMessages[CompileErrorCodes.INVALID_TOKEN_IN_PLACEHOLDER],
+          ch
+        ),
+        location
+      }
+    ] as CompileError[])
+  })
 })