@discord/intl 0.9.0 → 0.10.0-canary.1576ad1

package/dist/format.d.ts

@@ -21,7 +21,7 @@ import { Formatters } from 'intl-messageformat';
 import type { FormatConfig } from './format-config';
 import type { RichTextTagNames } from './types';
 export declare abstract class FormatBuilder<Result> {
-    abstract pushRichTextTag(tag: RichTextTagNames, children: Result[]): void;
+    abstract pushRichTextTag(tag: RichTextTagNames, children: Result[], control: Result[]): void;
     abstract pushLiteralText(text: string): void;
     abstract pushObject(value: object): void;
     abstract finish(): Result[];

package/dist/format.js

@@ -46,7 +46,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
             builder.pushLiteralText(node);
             continue;
         }
-        const nodeType = node[intl_ast_1.AstNodeIndices.Type];
+        const nodeType = node[0 /* AstNodeIndices.Type */];
         switch (nodeType) {
             case intl_ast_1.FormatJsNodeType.Pound:
                 // Replace `#` in plural rules with the actual numeric value. Only
@@ -58,7 +58,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 }
                 continue;
         }
-        const variableName = node[intl_ast_1.AstNodeIndices.Value];
+        const variableName = node[1 /* AstNodeIndices.Value */];
         // Enforce that all required values are provided by the caller, even if the
         // actual value is falsy/undefined.
         if (!(variableName in values) && !isRichTextTag(variableName)) {
@@ -67,10 +67,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
         const value = values[variableName];
         switch (nodeType) {
             case intl_ast_1.FormatJsNodeType.Argument:
-                // Empty values don't need to be added at all, they are purely for AST representation.
-                if (variableName == '$_')
-                    break;
-                if (typeof value === 'object') {
+                if (typeof value === 'object' || typeof value === 'function') {
                     builder.pushObject(value);
                 }
                 else {
@@ -80,7 +77,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 }
                 break;
             case intl_ast_1.FormatJsNodeType.Date: {
-                const nodeStyle = node[intl_ast_1.AstNodeIndices.Style];
+                const nodeStyle = node[2 /* AstNodeIndices.Style */];
                 // Distinct from FormatJS: We don't currently parse the skeleton ahead of time in the AST,
                 // so this manages parsing the skeleton as well before passing it onto the date formatter.
                 const style = nodeStyle in formatConfig.date
@@ -93,7 +90,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Time: {
-                const nodeStyle = node[intl_ast_1.AstNodeIndices.Style];
+                const nodeStyle = node[2 /* AstNodeIndices.Style */];
                 // Distinct from FormatJS: We don't currently parse the skeleton ahead of time in the AST,
                 // so this manages parsing the skeleton as well before passing it onto the date formatter.
                 const style = nodeStyle in formatConfig.time
@@ -107,7 +104,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Number: {
-                const nodeStyle = node[intl_ast_1.AstNodeIndices.Style];
+                const nodeStyle = node[2 /* AstNodeIndices.Style */];
                 // Distinct from FormatJS: We don't currently parse the skeleton ahead of time in the AST,
                 // so this manages parsing the skeleton as well before passing it onto the date formatter.
                 const style = nodeStyle in formatConfig.number
@@ -122,10 +119,14 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Tag: {
-                const children = node[intl_ast_1.AstNodeIndices.Children];
+                const children = node[2 /* AstNodeIndices.Children */];
+                const control = node[3 /* AstNodeIndices.Control */];
                 const appliedChildren = bindFormatValues(builder.constructor, children, locales, formatters, formatConfig, values, currentPluralValue);
+                const appliedControl = control != null
+                    ? bindFormatValues(builder.constructor, control, locales, formatters, formatConfig, values, currentPluralValue)
+                    : [];
                 if (isRichTextTag(variableName)) {
-                    builder.pushRichTextTag(variableName, appliedChildren);
+                    builder.pushRichTextTag(variableName, appliedChildren, appliedControl);
                 }
                 else {
                     if (typeof value !== 'function') {
@@ -145,8 +146,8 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Select: {
-                const value = node[intl_ast_1.AstNodeIndices.Value];
-                const options = node[intl_ast_1.AstNodeIndices.Options];
+                const value = node[1 /* AstNodeIndices.Value */];
+                const options = node[2 /* AstNodeIndices.Options */];
                 const option = value in options ? options[value] : options.other;
                 if (option == null) {
                     throw `${value} is not a known option for select value ${variableName}. Valid options are ${Object.keys(options).join(', ')}`;
@@ -155,10 +156,10 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 break;
             }
             case intl_ast_1.FormatJsNodeType.Plural: {
-                const value = node[intl_ast_1.AstNodeIndices.Value];
-                const options = node[intl_ast_1.AstNodeIndices.Options];
-                const offset = node[intl_ast_1.AstNodeIndices.Offset];
-                const pluralType = node[intl_ast_1.AstNodeIndices.PluralType];
+                const value = node[1 /* AstNodeIndices.Value */];
+                const options = node[2 /* AstNodeIndices.Options */];
+                const offset = node[3 /* AstNodeIndices.Offset */];
+                const pluralType = node[4 /* AstNodeIndices.PluralType */];
                 const option = (() => {
                     var _a;
                     const exactSelector = `=${value}`;

package/dist/formatters/ast.js

@@ -27,12 +27,11 @@ var RichTextNodeType;
     RichTextNodeType["Object"] = "object";
 })(RichTextNodeType || (exports.RichTextNodeType = RichTextNodeType = {}));
 const AST_RICH_TEXT_ELEMENTS = {
-    $_: () => ({ type: RichTextNodeType.Text, content: '' }),
     $b: (content) => ({ type: RichTextNodeType.Strong, content }),
     $i: (content) => ({ type: RichTextNodeType.Emphasis, content }),
     $del: (content) => ({ type: RichTextNodeType.Strikethrough, content }),
     $code: (content) => ({ type: RichTextNodeType.Code, content }),
-    $link: ([target, ...content]) => ({
+    $link: (content, _, [target]) => ({
         type: RichTextNodeType.Link,
         target: target.content,
         content,
@@ -44,11 +43,11 @@ class AstBuilder extends format_1.FormatBuilder {
         super(...arguments);
         this.result = [];
     }
-    pushRichTextTag(tag, children) {
+    pushRichTextTag(tag, children, control) {
         if (!(tag in AST_RICH_TEXT_ELEMENTS)) {
             throw `${tag} is not a known rich text formatting tag`;
         }
-        const result = AST_RICH_TEXT_ELEMENTS[tag](children, '');
+        const result = AST_RICH_TEXT_ELEMENTS[tag](children, '', control);
         if (Array.isArray(result)) {
             this.result.push(...result);
         }

package/dist/formatters/markdown.js

@@ -4,12 +4,11 @@ exports.markdownFormatter = void 0;
 exports.formatToMarkdownString = formatToMarkdownString;
 const string_1 = require("./string");
 const MARKDOWN_RICH_TEXT_ELEMENTS = {
-    $_: () => '',
     $b: (content) => '**' + content.join('') + '**',
     $i: (content) => '*' + content.join('') + '*',
     $del: (content) => '~~' + content.join('') + '~~',
     $code: (content) => '`' + content.join('') + '`',
-    $link: ([target, ...content]) => '[' + content.join('') + '](' + target + ')',
+    $link: (content, _, [target]) => '[' + content.join('') + '](' + target + ')',
     $p: (content) => content.join('') + '\n\n',
 };
 class MarkdownBuilder extends string_1.StringBuilder {
@@ -17,8 +16,8 @@ class MarkdownBuilder extends string_1.StringBuilder {
         super(...arguments);
         this.result = '';
     }
-    pushRichTextTag(tag, children) {
-        this.result += MARKDOWN_RICH_TEXT_ELEMENTS[tag](children, '');
+    pushRichTextTag(tag, children, control) {
+        this.result += MARKDOWN_RICH_TEXT_ELEMENTS[tag](children, '', control);
     }
 }
 function formatToMarkdownString(message, values, Builder = MarkdownBuilder) {

package/dist/formatters/react.js

@@ -7,13 +7,11 @@ const React = require("react");
 const format_1 = require("../format");
 const h = React.createElement;
 exports.DEFAULT_REACT_RICH_TEXT_ELEMENTS = {
-    $_: () => '',
     $b: (content, key) => h('strong', { key }, content),
     $i: (content, key) => h('em', { key }, content),
     $del: (content, key) => h('del', { key }, content),
     $code: (content, key) => h('code', { key }, content),
-    // $link will always be [href, <empty>, ...content]
-    $link: ([href, ...content], key) => h('a', { href, key }, content),
+    $link: (content, key, [href]) => h('a', { href, key }, content),
     $p: (content, key) => h('p', { key }, content),
 };
 /**
@@ -30,8 +28,8 @@ function createReactBuilder(richTextElements) {
             this._nodeKey = 0;
             this.result = [];
         }
-        pushRichTextTag(tag, children) {
-            this.result.push(richTextElements[tag](children, `${this._nodeKey++}`));
+        pushRichTextTag(tag, children, control) {
+            this.result.push(richTextElements[tag](children, `${this._nodeKey++}`, control));
         }
         pushLiteralText(text) {
             const last = this.result[this.result.length - 1];
@@ -43,8 +41,8 @@ function createReactBuilder(richTextElements) {
             }
         }
         pushObject(value) {
-            // @ts-expect-error this is technically invalid, but we'll just assume that if a format returns
-            // an object, it'll be acting as some form of ReactNode.
+            // @ts-expect-error this is technically invalid, but we'll just assume that if a format
+            // returns an object, it'll be acting as some form of ReactNode.
             this.result.push(value);
         }
         finish() {

package/dist/formatters/string.d.ts

@@ -12,7 +12,7 @@ import { IntlManager } from '../intl-manager';
 export type StringFunctionTypes = FunctionTypes<string>;
 export declare class StringBuilder extends FormatBuilder<string> {
     result: string;
-    pushRichTextTag(tag: RichTextTagNames, children: string[]): void;
+    pushRichTextTag(_tag: RichTextTagNames, children: string[], _control: string[]): void;
     pushLiteralText(text: string): void;
     pushObject(value: object): void;
     finish(): string[];

package/dist/formatters/string.js

@@ -8,16 +8,14 @@ class StringBuilder extends format_1.FormatBuilder {
         super(...arguments);
         this.result = '';
     }
-    pushRichTextTag(tag, children) {
+    pushRichTextTag(_tag, children, _control) {
         // Plain string formatting ignores rich text tags and just takes the
-        // visible content from the children. This means the `target` element
-        // of a link is ignored, otherwise all the children are just joined
-        // together directly.
-        if (tag === '$link') {
-            this.result += children.slice(1).join('');
-            return;
+        // visible content from the children. This means the control element is not
+        // important for string rendering, so the result is always just the
+        // children joined together.
+        for (const child of children) {
+            this.result += child;
         }
-        this.result += children.join('');
     }
     pushLiteralText(text) {
         this.result += text;

package/dist/message.js

@@ -26,41 +26,38 @@ function serializeAst(ast, result) {
             result.value += node[0];
             return;
         }
-        switch (node[intl_ast_1.AstNodeIndices.Type]) {
+        switch (node[0 /* AstNodeIndices.Type */]) {
             case intl_ast_1.FormatJsNodeType.Argument:
-                // Empties are an artifact of our parsing strategy, not necessary here.
-                if (result.value === '$_')
-                    return;
-                result.value += '{' + node[intl_ast_1.AstNodeIndices.Value] + '}';
+                result.value += '{' + node[1 /* AstNodeIndices.Value */] + '}';
                 return;
             case intl_ast_1.FormatJsNodeType.Date:
-                result.value += '{' + node[intl_ast_1.AstNodeIndices.Value] + ', date';
-                if (node[intl_ast_1.AstNodeIndices.Style] != null) {
-                    result.value += ', ' + node[intl_ast_1.AstNodeIndices.Style];
+                result.value += '{' + node[1 /* AstNodeIndices.Value */] + ', date';
+                if (node[2 /* AstNodeIndices.Style */] != null) {
+                    result.value += ', ' + node[2 /* AstNodeIndices.Style */];
                 }
                 result.value += '}';
                 return;
             case intl_ast_1.FormatJsNodeType.Time:
-                result.value += '{' + node[intl_ast_1.AstNodeIndices.Value] + ', time';
-                if (node[intl_ast_1.AstNodeIndices.Style] != null) {
-                    result.value += ', ' + node[intl_ast_1.AstNodeIndices.Style];
+                result.value += '{' + node[1 /* AstNodeIndices.Value */] + ', time';
+                if (node[2 /* AstNodeIndices.Style */] != null) {
+                    result.value += ', ' + node[2 /* AstNodeIndices.Style */];
                 }
                 result.value += '}';
                 return;
             case intl_ast_1.FormatJsNodeType.Number:
-                result.value += '{' + node[intl_ast_1.AstNodeIndices.Value] + ', number';
-                if (node[intl_ast_1.AstNodeIndices.Style] != null) {
-                    result.value += ', ' + node[intl_ast_1.AstNodeIndices.Style];
+                result.value += '{' + node[1 /* AstNodeIndices.Value */] + ', number';
+                if (node[2 /* AstNodeIndices.Style */] != null) {
+                    result.value += ', ' + node[2 /* AstNodeIndices.Style */];
                 }
                 result.value += '}';
                 return;
             case intl_ast_1.FormatJsNodeType.Plural: {
-                const pluralType = node[intl_ast_1.AstNodeIndices.PluralType] == 'ordinal' ? 'selectordinal' : 'plural';
-                result.value += '{' + node[intl_ast_1.AstNodeIndices.Value] + ', ' + pluralType + ', ';
-                if (node[intl_ast_1.AstNodeIndices.Offset]) {
-                    result.value += 'offset:' + node[intl_ast_1.AstNodeIndices.Offset];
+                const pluralType = node[4 /* AstNodeIndices.PluralType */] == 'ordinal' ? 'selectordinal' : 'plural';
+                result.value += '{' + node[1 /* AstNodeIndices.Value */] + ', ' + pluralType + ', ';
+                if (node[3 /* AstNodeIndices.Offset */]) {
+                    result.value += 'offset:' + node[3 /* AstNodeIndices.Offset */];
                 }
-                for (const [name, arm] of Object.entries(node[intl_ast_1.AstNodeIndices.Options])) {
+                for (const [name, arm] of Object.entries(node[2 /* AstNodeIndices.Options */])) {
                     result.value += ' ' + name + ' {';
                     serializeAst(arm, result);
                     result.value += '}';
@@ -71,8 +68,8 @@ function serializeAst(ast, result) {
                 result.value += '#';
                 return;
             case intl_ast_1.FormatJsNodeType.Select: {
-                result.value += '{' + node[intl_ast_1.AstNodeIndices.Value] + ', select, ';
-                for (const [name, arm] of Object.entries(node[intl_ast_1.AstNodeIndices.Options])) {
+                result.value += '{' + node[1 /* AstNodeIndices.Value */] + ', select, ';
+                for (const [name, arm] of Object.entries(node[2 /* AstNodeIndices.Options */])) {
                     result.value += ' ' + name + ' {';
                     serializeAst(arm, result);
                     result.value += '}';
@@ -86,30 +83,30 @@ function serializeAst(ast, result) {
     }
 }
 function serializeAstTag(node, result) {
-    switch (node[intl_ast_1.AstNodeIndices.Value]) {
+    switch (node[1 /* AstNodeIndices.Value */]) {
         case '$b':
             result.value += '**';
-            serializeAst(node[intl_ast_1.AstNodeIndices.Children], result);
+            serializeAst(node[2 /* AstNodeIndices.Children */], result);
             result.value += '**';
             return;
         case '$i':
             result.value += '*';
-            serializeAst(node[intl_ast_1.AstNodeIndices.Children], result);
+            serializeAst(node[2 /* AstNodeIndices.Children */], result);
             result.value += '*';
             return;
         case '$code':
             result.value += '`';
-            serializeAst(node[intl_ast_1.AstNodeIndices.Children], result);
+            serializeAst(node[2 /* AstNodeIndices.Children */], result);
             result.value += '`';
             return;
         case '$p':
-            serializeAst(node[intl_ast_1.AstNodeIndices.Children], result);
+            serializeAst(node[2 /* AstNodeIndices.Children */], result);
             result.value += '\n\n';
             return;
         case '$link':
             // The target is the first child of the link. We don't have to care if it's a placeholder
             // or not, because the serialization will automatically remove the extra empty.
-            const [target, ...children] = node[intl_ast_1.AstNodeIndices.Children];
+            const [target, ...children] = node[2 /* AstNodeIndices.Children */];
             result.value += '[';
             serializeAst(children, result);
             result.value += '](';
@@ -121,8 +118,8 @@ function serializeAstTag(node, result) {
         default:
             // Any other tag name is a hook, which just adds the `$[` on a link tag.
             result.value += '$[';
-            serializeAst(node[intl_ast_1.AstNodeIndices.Children], result);
-            result.value += '](' + node[intl_ast_1.AstNodeIndices.Value] + ')';
+            serializeAst(node[2 /* AstNodeIndices.Children */], result);
+            result.value += '](' + node[1 /* AstNodeIndices.Value */] + ')';
             return;
     }
 }

package/dist/types.d.ts

@@ -193,8 +193,9 @@ export interface FunctionTypeMap {
 }
 
 export interface FunctionTypes<Result, HandlerType = () => void> {
-  link: undefined | ((content: Result[], key: string) => Result | Result[]);
-  hook: undefined | ((content: Result[], key: string) => Result | Result[]);
+  // TODO: Figure out a nicer way to type `control` here.
+  link: undefined | ((content: Result[], key: string, control: Result[]) => Result | Result[]);
+  hook: undefined | ((content: Result[], key: string, control: Result[]) => Result | Result[]);
   handler: undefined | HandlerType;
 }
 
@@ -265,7 +266,6 @@ export type RequiredFormatValues<
       >;
 
 export interface RichTextFormattingMap<T = any> {
-  $_: T;
   $b: T;
   $i: T;
   $p: T;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@discord/intl",
-  "version": "0.9.0",
+  "version": "0.10.0-canary.1576ad1",
   "license": "MIT",
   "description": "Client runtime for managing messages and translations in a React project.",
   "main": "./dist/index.js",
   "exports": {
     ".": {
-      "default": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -19,7 +19,7 @@
     "@formatjs/intl": "^2.10.1",
     "@intrnl/xxhash64": "^0.1.2",
     "intl-messageformat": "^10.5.11",
-    "@discord/intl-ast": "0.9.0"
+    "@discord/intl-ast": "0.10.0-canary.1576ad1"
   },
   "devDependencies": {
     "@swc/cli": "^0.3.12",

package/src/format.ts

@@ -37,7 +37,7 @@ function isRichTextTag(name: string) {
 }
 
 export abstract class FormatBuilder<Result> {
-  abstract pushRichTextTag(tag: RichTextTagNames, children: Result[]): void;
+  abstract pushRichTextTag(tag: RichTextTagNames, children: Result[], control: Result[]): void;
   abstract pushLiteralText(text: string): void;
   abstract pushObject(value: object): void;
   abstract finish(): Result[];
@@ -89,10 +89,7 @@ export function bindFormatValuesWithBuilder<T, Builder extends FormatBuilder<T>>
     const value = values[variableName];
     switch (nodeType) {
       case FormatJsNodeType.Argument:
-        // Empty values don't need to be added at all, they are purely for AST representation.
-        if (variableName == '$_') break;
-
-        if (typeof value === 'object') {
+        if (typeof value === 'object' || typeof value === 'function') {
           builder.pushObject(value);
         } else {
           // Taken from FormatJS: non-objects (strings, numbers, and falsy
@@ -149,6 +146,7 @@ export function bindFormatValuesWithBuilder<T, Builder extends FormatBuilder<T>>
 
       case FormatJsNodeType.Tag: {
         const children = node[AstNodeIndices.Children];
+        const control = node[AstNodeIndices.Control];
         const appliedChildren = bindFormatValues(
           builder.constructor as FormatBuilderConstructor<T>,
           children,
@@ -158,8 +156,24 @@ export function bindFormatValuesWithBuilder<T, Builder extends FormatBuilder<T>>
           values,
           currentPluralValue,
         );
+        const appliedControl =
+          control != null
+            ? bindFormatValues(
+                builder.constructor as FormatBuilderConstructor<T>,
+                control,
+                locales,
+                formatters,
+                formatConfig,
+                values,
+                currentPluralValue,
+              )
+            : [];
         if (isRichTextTag(variableName)) {
-          builder.pushRichTextTag(variableName as RichTextTagNames, appliedChildren);
+          builder.pushRichTextTag(
+            variableName as RichTextTagNames,
+            appliedChildren,
+            appliedControl,
+          );
         } else {
           if (typeof value !== 'function') {
             throw `expected a function type for a Tag formatting value, ${variableName}. got ${typeof value}: ${value}`;

package/src/formatters/ast.ts

@@ -78,12 +78,11 @@ export type RichTextNode =
   | RichTextObjectNode;
 
 const AST_RICH_TEXT_ELEMENTS: RichTextFormattingMap<AstFunctionTypes['hook']> = {
-  $_: () => ({ type: RichTextNodeType.Text, content: '' }),
   $b: (content) => ({ type: RichTextNodeType.Strong, content }),
   $i: (content) => ({ type: RichTextNodeType.Emphasis, content }),
   $del: (content) => ({ type: RichTextNodeType.Strikethrough, content }),
   $code: (content) => ({ type: RichTextNodeType.Code, content }),
-  $link: ([target, ...content]) => ({
+  $link: (content, _, [target]) => ({
     type: RichTextNodeType.Link,
     target: target.content as string,
     content,
@@ -94,11 +93,11 @@ const AST_RICH_TEXT_ELEMENTS: RichTextFormattingMap<AstFunctionTypes['hook']> =
 class AstBuilder extends FormatBuilder<RichTextNode> {
   result: RichTextNode[] = [];
 
-  pushRichTextTag(tag: RichTextTagNames, children: RichTextNode[]) {
+  pushRichTextTag(tag: RichTextTagNames, children: RichTextNode[], control: RichTextNode[]) {
     if (!(tag in AST_RICH_TEXT_ELEMENTS)) {
       throw `${tag} is not a known rich text formatting tag`;
     }
-    const result = AST_RICH_TEXT_ELEMENTS[tag](children, '');
+    const result = AST_RICH_TEXT_ELEMENTS[tag](children, '', control);
     if (Array.isArray(result)) {
       this.result.push(...result);
     } else {

package/src/formatters/markdown.ts

@@ -19,20 +19,19 @@ import { StringBuilder } from './string';
 export type MarkdownFunctionTypes = FunctionTypes<string>;
 
 const MARKDOWN_RICH_TEXT_ELEMENTS: RichTextFormattingMap<MarkdownFunctionTypes['hook']> = {
-  $_: () => '',
   $b: (content) => '**' + content.join('') + '**',
   $i: (content) => '*' + content.join('') + '*',
   $del: (content) => '~~' + content.join('') + '~~',
   $code: (content) => '`' + content.join('') + '`',
-  $link: ([target, ...content]) => '[' + content.join('') + '](' + target + ')',
+  $link: (content, _, [target]) => '[' + content.join('') + '](' + target + ')',
   $p: (content) => content.join('') + '\n\n',
 };
 
 class MarkdownBuilder extends StringBuilder {
   result: string = '';
 
-  pushRichTextTag(tag: RichTextTagNames, children: string[]) {
-    this.result += MARKDOWN_RICH_TEXT_ELEMENTS[tag](children, '');
+  pushRichTextTag(tag: RichTextTagNames, children: string[], control: string[]) {
+    this.result += MARKDOWN_RICH_TEXT_ELEMENTS[tag](children, '', control);
   }
 }
 

package/src/formatters/react.ts

@@ -27,13 +27,11 @@ export type ReactFunctionTypes = FunctionTypes<
 
 const h = React.createElement;
 export const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFunctionTypes['hook']> = {
-  $_: () => '',
   $b: (content, key) => h('strong', { key }, content),
   $i: (content, key) => h('em', { key }, content),
   $del: (content, key) => h('del', { key }, content),
   $code: (content, key) => h('code', { key }, content),
-  // $link will always be [href, <empty>, ...content]
-  $link: ([href, ...content], key) => h('a', { href, key }, content),
+  $link: (content, key, [href]) => h('a', { href, key }, content),
   $p: (content, key) => h('p', { key }, content),
 };
 
@@ -51,8 +49,12 @@ function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctio
     _nodeKey: number = 0;
     result: React.ReactNode[] = [];
 
-    pushRichTextTag(tag: RichTextTagNames, children: React.ReactNode[]) {
-      this.result.push(richTextElements[tag](children, `${this._nodeKey++}`));
+    pushRichTextTag(
+      tag: RichTextTagNames,
+      children: React.ReactNode[],
+      control: React.ReactNode[],
+    ) {
+      this.result.push(richTextElements[tag](children, `${this._nodeKey++}`, control));
     }
 
     pushLiteralText(text: string) {
@@ -65,8 +67,8 @@ function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctio
     }
 
     pushObject(value: object) {
-      // @ts-expect-error this is technically invalid, but we'll just assume that if a format returns
-      // an object, it'll be acting as some form of ReactNode.
+      // @ts-expect-error this is technically invalid, but we'll just assume that if a format
+      // returns an object, it'll be acting as some form of ReactNode.
       this.result.push(value);
     }
 

package/src/formatters/string.ts

@@ -15,16 +15,14 @@ export type StringFunctionTypes = FunctionTypes<string>;
 export class StringBuilder extends FormatBuilder<string> {
   result: string = '';
 
-  pushRichTextTag(tag: RichTextTagNames, children: string[]) {
+  pushRichTextTag(_tag: RichTextTagNames, children: string[], _control: string[]) {
     // Plain string formatting ignores rich text tags and just takes the
-    // visible content from the children. This means the `target` element
-    // of a link is ignored, otherwise all the children are just joined
-    // together directly.
-    if (tag === '$link') {
-      this.result += children.slice(1).join('');
-      return;
+    // visible content from the children. This means the control element is not
+    // important for string rendering, so the result is always just the
+    // children joined together.
+    for (const child of children) {
+      this.result += child;
     }
-    this.result += children.join('');
   }
 
   pushLiteralText(text: string) {

package/src/intl-manager.ts

@@ -1,4 +1,3 @@
-import { LiteralNode } from '@discord/intl-ast';
 import { createIntl, IntlShape } from '@formatjs/intl';
 import { Formatters } from 'intl-messageformat';
 

package/src/message.ts

@@ -39,8 +39,6 @@ function serializeAst(ast: AstNode[], result: { value: string }) {
 
     switch (node[AstNodeIndices.Type]) {
       case FormatJsNodeType.Argument:
-        // Empties are an artifact of our parsing strategy, not necessary here.
-        if (result.value === '$_') return;
         result.value += '{' + node[AstNodeIndices.Value] + '}';
         return;
       case FormatJsNodeType.Date:

package/src/types.d.ts

@@ -193,8 +193,9 @@ export interface FunctionTypeMap {
 }
 
 export interface FunctionTypes<Result, HandlerType = () => void> {
-  link: undefined | ((content: Result[], key: string) => Result | Result[]);
-  hook: undefined | ((content: Result[], key: string) => Result | Result[]);
+  // TODO: Figure out a nicer way to type `control` here.
+  link: undefined | ((content: Result[], key: string, control: Result[]) => Result | Result[]);
+  hook: undefined | ((content: Result[], key: string, control: Result[]) => Result | Result[]);
   handler: undefined | HandlerType;
 }
 
@@ -265,7 +266,6 @@ export type RequiredFormatValues<
       >;
 
 export interface RichTextFormattingMap<T = any> {
-  $_: T;
   $b: T;
   $i: T;
   $p: T;