@discord/intl 0.2.1-rc.1 → 0.2.2-canary.6898c23

package/dist/format.js

@@ -34,6 +34,7 @@ exports.bindFormatValuesWithBuilder = bindFormatValuesWithBuilder;
 exports.bindFormatValues = bindFormatValues;
 var keyless_json_1 = require("./keyless-json");
 var intl_messageformat_1 = require("intl-messageformat");
+var icu_skeleton_parser_1 = require("@formatjs/icu-skeleton-parser");
 /**
  * Returns true if the tag name should be considered a rich text tag that
  * applies formatting to a message, rather than being a user-supplied value.
@@ -49,7 +50,7 @@ var FormatBuilder = /** @class */ (function () {
 exports.FormatBuilder = FormatBuilder;
 function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, formats, values, currentPluralValue, originalMessage) {
     var e_1, _a;
-    var _b;
+    var _b, _c;
     if (values === void 0) { values = {}; }
     // Hot path for static messages that are just parsed as a single string element.
     if (nodes.length === 1 && nodes[0].type === keyless_json_1.FormatJsNodeType.Literal) {
@@ -57,7 +58,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
         return;
     }
     var _loop_1 = function (node) {
-        var e_2, _c;
+        var e_2, _d;
         switch (node.type) {
             case keyless_json_1.FormatJsNodeType.Literal:
                 builder.pushLiteralText(node.value);
@@ -96,10 +97,11 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
             case keyless_json_1.FormatJsNodeType.Date: {
                 // 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.
-                if (typeof node.style !== 'string') {
-                    throw '@discord/intl does not currently support non-string format skeletons';
-                }
-                var style = node.style in formats.date ? formats.date[node.style] : undefined; // TODO: parseSkeleton();
+                var style = node.style in formats.date
+                    ? formats.date[node.style]
+                    : node.style != null
+                        ? (0, icu_skeleton_parser_1.parseDateTimeSkeleton)(node.style)
+                        : undefined;
                 // @ts-expect-error Cast string values to dates properly.
                 builder.pushLiteralText(formatters.getDateTimeFormat(locales, style).format(value));
                 break;
@@ -107,10 +109,11 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
             case keyless_json_1.FormatJsNodeType.Time: {
                 // 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.
-                if (typeof node.style !== 'string') {
-                    throw '@discord/intl does not currently support non-string format skeletons';
-                }
-                var style = node.style in formats.time ? formats.time[node.style] : undefined; // TODO: parseSkeleton();
+                var style = node.style in formats.time
+                    ? formats.time[node.style]
+                    : node.style != null
+                        ? (0, icu_skeleton_parser_1.parseDateTimeSkeleton)(node.style)
+                        : undefined; // TODO: parseSkeleton();
                 builder.pushLiteralText(
                 // @ts-expect-error Cast string values to dates properly.
                 formatters.getDateTimeFormat(locales, style).format(value));
@@ -119,13 +122,14 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
             case keyless_json_1.FormatJsNodeType.Number: {
                 // 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.
-                if (typeof node.style !== 'string') {
-                    throw '@discord/intl does not currently support non-string format skeletons';
-                }
-                var style = node.style in formats.number ? formats.number[node.style] : undefined; // TODO: parseSkeleton();
-                // @ts-expect-error Support `scale` style property.
-                var scaledValue = value;
-                // const scaledValue = (value as number) * (style?.scale ?? 1);
+                var style = node.style in formats.number
+                    ? formats.number[node.style]
+                    : node.style != null
+                        ? (0, icu_skeleton_parser_1.parseNumberSkeleton)((0, icu_skeleton_parser_1.parseNumberSkeletonFromString)(node.style))
+                        : undefined;
+                var scaledValue = 
+                // @ts-expect-error This is a weird cast that's not accurate, but works in the short term.
+                typeof value !== 'number' ? value : ((_b = value * (style === null || style === void 0 ? void 0 : style.scale)) !== null && _b !== void 0 ? _b : 1);
                 builder.pushLiteralText(formatters.getNumberFormat(locales, style).format(scaledValue));
                 break;
             }
@@ -155,7 +159,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                     catch (e_2_1) { e_2 = { error: e_2_1 }; }
                     finally {
                         try {
-                            if (chunks_1_1 && !chunks_1_1.done && (_c = chunks_1.return)) _c.call(chunks_1);
+                            if (chunks_1_1 && !chunks_1_1.done && (_d = chunks_1.return)) _d.call(chunks_1);
                         }
                         finally { if (e_2) throw e_2.error; }
                     }
@@ -187,7 +191,7 @@ function bindFormatValuesWithBuilder(builder, nodes, locales, formatters, format
                 }
                 bindFormatValuesWithBuilder(builder, option.value, locales, formatters, formats, values, 
                 // @ts-expect-error assert this `as number` properly.
-                value - ((_b = node.offset) !== null && _b !== void 0 ? _b : 0));
+                value - ((_c = node.offset) !== null && _c !== void 0 ? _c : 0));
                 break;
             }
         }

package/dist/formatters/ast.d.ts

@@ -4,12 +4,13 @@ import { IntlManager } from '../intl-manager';
  * Types for formatting functions when calling `formatToParts`, ensuring the
  * functions yield value AST nodes.
  */
-export type AstFunctionTypes = FunctionTypes<RichTextNode>;
+export type AstFunctionTypes = FunctionTypes<RichTextNode, object>;
 export declare enum RichTextNodeType {
     Text = "text",
     Strong = "strong",
-    Emphasis = "emphasis",
-    Code = "code",
+    Emphasis = "em",
+    Strikethrough = "s",
+    Code = "inlineCode",
     Link = "link",
     Paragraph = "paragraph",
     /**
@@ -36,6 +37,9 @@ interface RichTextStrongNode extends RichTextNodeBase<RichTextNode[]> {
 interface RichTextEmphasisNode extends RichTextNodeBase<RichTextNode[]> {
     type: RichTextNodeType.Emphasis;
 }
+interface RichTextStrikethroughNode extends RichTextNodeBase<RichTextNode[]> {
+    type: RichTextNodeType.Strikethrough;
+}
 interface RichTextCodeNode extends RichTextNodeBase<RichTextNode[]> {
     type: RichTextNodeType.Code;
 }
@@ -49,7 +53,7 @@ interface RichTextLinkNode extends RichTextNodeBase<RichTextNode[]> {
 interface RichTextObjectNode extends RichTextNodeBase<object> {
     type: RichTextNodeType.Object;
 }
-export type RichTextNode = RichTextTextNode | RichTextStrongNode | RichTextEmphasisNode | RichTextCodeNode | RichTextParagraphNode | RichTextLinkNode | RichTextObjectNode;
+export type RichTextNode = RichTextTextNode | RichTextStrongNode | RichTextEmphasisNode | RichTextStrikethroughNode | RichTextCodeNode | RichTextParagraphNode | RichTextLinkNode | RichTextObjectNode;
 /**
  * Format the given message in the current locale with the provided values.
  * The returned values is _always_ an Array of parts, even if the message is

package/dist/formatters/ast.js

@@ -50,8 +50,9 @@ var RichTextNodeType;
 (function (RichTextNodeType) {
     RichTextNodeType["Text"] = "text";
     RichTextNodeType["Strong"] = "strong";
-    RichTextNodeType["Emphasis"] = "emphasis";
-    RichTextNodeType["Code"] = "code";
+    RichTextNodeType["Emphasis"] = "em";
+    RichTextNodeType["Strikethrough"] = "s";
+    RichTextNodeType["Code"] = "inlineCode";
     RichTextNodeType["Link"] = "link";
     RichTextNodeType["Paragraph"] = "paragraph";
     /**
@@ -65,19 +66,12 @@ var RichTextNodeType;
      */
     RichTextNodeType["Object"] = "object";
 })(RichTextNodeType || (exports.RichTextNodeType = RichTextNodeType = {}));
-var RICH_TEXT_TAG_TYPES = {
-    $_: RichTextNodeType.Text,
-    $b: RichTextNodeType.Strong,
-    $i: RichTextNodeType.Emphasis,
-    $code: RichTextNodeType.Code,
-    $link: RichTextNodeType.Link,
-    $p: RichTextNodeType.Paragraph,
-};
 var AST_RICH_TEXT_ELEMENTS = {
     $_: function () { return ({ type: RichTextNodeType.Text, content: '' }); },
     $b: function (content) { return ({ type: RichTextNodeType.Strong, content: content }); },
-    $code: function (content) { return ({ type: RichTextNodeType.Code, content: content }); },
     $i: function (content) { return ({ type: RichTextNodeType.Emphasis, content: content }); },
+    $del: function (content) { return ({ type: RichTextNodeType.Strikethrough, content: content }); },
+    $code: function (content) { return ({ type: RichTextNodeType.Code, content: content }); },
     $link: function (_a) {
         var _b = __read(_a), target = _b[0], content = _b.slice(1);
         return ({
@@ -100,7 +94,7 @@ var AstBuilder = /** @class */ (function (_super) {
         if (!(tag in AST_RICH_TEXT_ELEMENTS)) {
             throw "".concat(tag, " is not a known rich text formatting tag");
         }
-        var result = AST_RICH_TEXT_ELEMENTS[tag](children);
+        var result = AST_RICH_TEXT_ELEMENTS[tag](children, '');
         if (Array.isArray(result)) {
             (_a = this.result).push.apply(_a, __spreadArray([], __read(result), false));
         }
@@ -110,7 +104,7 @@ var AstBuilder = /** @class */ (function (_super) {
     };
     AstBuilder.prototype.pushLiteralText = function (text) {
         var last = this.result[this.result.length - 1];
-        if (last.type === RichTextNodeType.Text) {
+        if (last != null && last.type === RichTextNodeType.Text) {
             last.content += text;
         }
         else {

package/dist/formatters/markdown.js

@@ -46,8 +46,9 @@ var string_1 = require("./string");
 var MARKDOWN_RICH_TEXT_ELEMENTS = {
     $_: function () { return ''; },
     $b: function (content) { return '**' + content.join('') + '**'; },
-    $code: function (content) { return '`' + content.join('') + '`'; },
     $i: function (content) { return '*' + content.join('') + '*'; },
+    $del: function (content) { return '~~' + content.join('') + '~~'; },
+    $code: function (content) { return '`' + content.join('') + '`'; },
     $link: function (_a) {
         var _b = __read(_a), target = _b[0], content = _b.slice(1);
         return '[' + content.join('') + '](' + target + ')';
@@ -62,7 +63,7 @@ var MarkdownBuilder = /** @class */ (function (_super) {
         return _this;
     }
     MarkdownBuilder.prototype.pushRichTextTag = function (tag, children) {
-        this.result += MARKDOWN_RICH_TEXT_ELEMENTS[tag](children);
+        this.result += MARKDOWN_RICH_TEXT_ELEMENTS[tag](children, '');
     };
     return MarkdownBuilder;
 }(string_1.StringBuilder));

package/dist/formatters/react.d.ts

@@ -18,11 +18,14 @@ export type ReactFunctionTypes = FunctionTypes<React.ReactNode, ReactClickHandle
     onContextMenu: ReactClickHandler;
 }>;
 export declare const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFunctionTypes['hook']>;
-export declare function formatReact(this: IntlManager, message: AnyIntlMessage, values: object, Builder: FormatBuilderConstructor<React.ReactElement>): React.ReactElement;
+export type ReactIntlMessage = React.ReactElement<{}, typeof React.Fragment & {
+    __brand: 'discord-intl';
+}>;
+export declare function formatReact(this: IntlManager, message: AnyIntlMessage, values: object, Builder: FormatBuilderConstructor<React.ReactElement>): ReactIntlMessage;
 /**
  * Create a new React formatter with the given rich text elements replacing the defaults. Use this
  * function to inject custom components for things like links and paragraphs, which may be best
  * suited to use components from a Design System or other library rather than native DOM elements.
  */
-export declare function makeReactFormatter(richTextElements: RichTextFormattingMap<ReactFunctionTypes['hook']>): FormatterImplementation<ReactFunctionTypes, React.ReactElement, React.ReactNode>;
-export declare const reactFormatter: FormatterImplementation<ReactFunctionTypes, React.ReactElement<any, string | React.JSXElementConstructor<any>>, React.ReactNode>;
+export declare function makeReactFormatter(richTextElements: RichTextFormattingMap<ReactFunctionTypes['hook']>): FormatterImplementation<ReactFunctionTypes, ReactIntlMessage, React.ReactNode>;
+export declare const reactFormatter: FormatterImplementation<ReactFunctionTypes, ReactIntlMessage, React.ReactNode>;

package/dist/formatters/react.js

@@ -48,15 +48,16 @@ var format_1 = require("../format");
 var h = React.createElement;
 exports.DEFAULT_REACT_RICH_TEXT_ELEMENTS = {
     $_: function () { return ''; },
-    $b: function (content) { return h('strong', undefined, content); },
-    $code: function (content) { return h('code', undefined, content); },
-    $i: function (content) { return h('em', undefined, content); },
+    $b: function (content, key) { return h('strong', { key: key }, content); },
+    $i: function (content, key) { return h('em', { key: key }, content); },
+    $del: function (content, key) { return h('del', { key: key }, content); },
+    $code: function (content, key) { return h('code', { key: key }, content); },
     // $link will always be [href, <empty>, ...content]
-    $link: function (_a) {
+    $link: function (_a, key) {
         var _b = __read(_a), href = _b[0], content = _b.slice(1);
-        return h('a', { href: href }, content);
+        return h('a', { href: href, key: key }, content);
     },
-    $p: function (content) { return h('p', undefined, content); },
+    $p: function (content, key) { return h('p', { key: key }, content); },
 };
 /**
  * Creates a new `FormatBuilder` class that constructs a React element tree
@@ -70,11 +71,12 @@ function createReactBuilder(richTextElements) {
         __extends(class_1, _super);
         function class_1() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+            _this._nodeKey = 0;
             _this.result = [];
             return _this;
         }
         class_1.prototype.pushRichTextTag = function (tag, children) {
-            this.result.push(richTextElements[tag](children));
+            this.result.push(richTextElements[tag](children, "".concat(this._nodeKey++)));
         };
         class_1.prototype.pushLiteralText = function (text) {
             this.result.push(text);

package/dist/formatters/string.js

@@ -67,7 +67,7 @@ var StringBuilder = /** @class */ (function (_super) {
     StringBuilder.prototype.pushObject = function (value) {
         // Objects are only included in the result if they specify a toString value directly.
         // Otherwise, they would be rendered as `[object Object]`, which is never helpful.
-        if ('toString' in value) {
+        if (value != null && 'toString' in value) {
             this.result += value.toString();
         }
     };

package/dist/hash.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns a consistent, short hash of the given key by first processing it through a hash digest,
+ * then encoding the first few bytes to base64.
+ *
+ * This function is specifically written to mirror the native backend hashing function used by
+ * `@discord/intl-loader-core`, to be able to hash names at runtime.
+ */
+export declare function runtimeHashMessageKey(key: string): string;

package/dist/hash.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runtimeHashMessageKey = runtimeHashMessageKey;
+var xxhash64_1 = require("@intrnl/xxhash64");
+var BASE64_TABLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('');
+var IS_BIG_ENDIAN = (function () {
+    var array = new Uint8Array(4);
+    var view = new Uint32Array(array.buffer);
+    return !((view[0] = 1) & array[0]);
+})();
+function numberToBytes(number) {
+    number = BigInt(number);
+    var array = [];
+    var byteCount = Math.ceil(Math.floor(Math.log2(Number(number)) + 1) / 8);
+    for (var i = 0; i < byteCount; i++) {
+        array.unshift(Number((number >> BigInt(8 * i)) & BigInt(255)));
+    }
+    var bytes = new Uint8Array(array);
+    // The native `hashToMessageKey` always works in Big/Network Endian bytes, so this array
+    // needs to be converted to the same endianness to get the same base64 result.
+    return IS_BIG_ENDIAN ? bytes : bytes.reverse();
+}
+/**
+ * Returns a consistent, short hash of the given key by first processing it through a hash digest,
+ * then encoding the first few bytes to base64.
+ *
+ * This function is specifically written to mirror the native backend hashing function used by
+ * `@discord/intl-loader-core`, to be able to hash names at runtime.
+ */
+function runtimeHashMessageKey(key) {
+    var hash = (0, xxhash64_1.hash)(key, 0);
+    var bytes = numberToBytes(hash);
+    return [
+        BASE64_TABLE[bytes[0] >> 2],
+        BASE64_TABLE[((bytes[0] & 0x03) << 4) | (bytes[1] >> 4)],
+        BASE64_TABLE[((bytes[1] & 0x0f) << 2) | (bytes[2] >> 6)],
+        BASE64_TABLE[bytes[2] & 0x3f],
+        BASE64_TABLE[bytes[3] >> 2],
+        BASE64_TABLE[((bytes[3] & 0x03) << 4) | (bytes[3] >> 4)],
+    ].join('');
+}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { RichTextNode } from './formatters';
 export * from './formatters';
+export { FormatBuilder, FormatBuilderConstructor, bindFormatValues } from './format';
+export { runtimeHashMessageKey } from './hash';
 export { IntlManager, DEFAULT_LOCALE, type FormatFunction } from './intl-manager';
 export { createLoader, loadAllMessagesInLocale, waitForAllDefaultIntlMessagesLoaded, MessageLoader, } from './message-loader';
 export type * from './types.d.ts';

package/dist/index.js

@@ -14,8 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageLoader = exports.waitForAllDefaultIntlMessagesLoaded = exports.loadAllMessagesInLocale = exports.createLoader = exports.DEFAULT_LOCALE = exports.IntlManager = void 0;
+exports.MessageLoader = exports.waitForAllDefaultIntlMessagesLoaded = exports.loadAllMessagesInLocale = exports.createLoader = exports.DEFAULT_LOCALE = exports.IntlManager = exports.runtimeHashMessageKey = exports.bindFormatValues = exports.FormatBuilder = void 0;
 __exportStar(require("./formatters"), exports);
+var format_1 = require("./format");
+Object.defineProperty(exports, "FormatBuilder", { enumerable: true, get: function () { return format_1.FormatBuilder; } });
+Object.defineProperty(exports, "bindFormatValues", { enumerable: true, get: function () { return format_1.bindFormatValues; } });
+var hash_1 = require("./hash");
+Object.defineProperty(exports, "runtimeHashMessageKey", { enumerable: true, get: function () { return hash_1.runtimeHashMessageKey; } });
 var intl_manager_1 = require("./intl-manager");
 Object.defineProperty(exports, "IntlManager", { enumerable: true, get: function () { return intl_manager_1.IntlManager; } });
 Object.defineProperty(exports, "DEFAULT_LOCALE", { enumerable: true, get: function () { return intl_manager_1.DEFAULT_LOCALE; } });

package/dist/intl-manager.d.ts

@@ -7,7 +7,7 @@ import { FormatBuilderConstructor } from './format';
  * requested locale is not possible.
  */
 export declare const DEFAULT_LOCALE: string;
-type FormatterReturnType<F extends FormatterImplementation<any, any>> = F extends FormatterImplementation<any, infer Return> ? Return : never;
+type FormatterReturnType<F extends FormatterImplementation<any, any>> = ReturnType<F['format']>;
 type FormatterFunctionTypes<F extends FormatterImplementation<any, any>> = F extends FormatterImplementation<infer Functions, any> ? Functions : never;
 export type FormatFunction<F extends FormatterImplementation<any, any>> = <T extends IntlMessageGetter>(this: IntlManager, message: T, values: RequiredFormatValues<T, FormatterFunctionTypes<F>>) => FormatterReturnType<F>;
 type ThisWithFormatters<This, T extends Record<string, FormatterImplementation<any, any>>> = This & {
@@ -45,6 +45,16 @@ export declare class IntlManager {
      * immediately return the plain string value of the message in the current locale.
      */
     string<T extends TypedIntlMessageGetter<undefined>>(message: T): string;
+    /**
+     * Return a raw string representing the syntax of the original message, as
+     * authored, with no values replaced. The result of this function could be
+     * written back to the definition file for the message and re-parsed to
+     * create an identical message to the original.
+     *
+     * This should rarely be necessary outside of sending raw messages to other
+     * applications that do their own message parsing.
+     */
+    reserialize<T extends IntlMessageGetter>(message: T): string;
     bindFormatValues<T>(Builder: FormatBuilderConstructor<T>, message: InternalIntlMessage, values: Record<string, any>): T[];
 }
 export {};

package/dist/intl-manager.js

@@ -120,11 +120,28 @@ var IntlManager = /** @class */ (function () {
      * immediately return the plain string value of the message in the current locale.
      */
     IntlManager.prototype.string = function (message) {
-        // @ts-expect-error Figure out how to make this typing exact. This
-        // currently relies on the generic typing being sound enough to know that
-        // the message can only contain a single static text node and no
-        // placeholders or rich text.
-        return message(this.currentLocale).ast[0].value;
+        var resolved = message(this.currentLocale);
+        if (resolved == null || resolved.ast.length === 0)
+            return '';
+        // TODO: Figure out how to make this typing exact. This currently relies on
+        // the generic typing being sound enough to know that the message can only
+        // contain a single static text node and no placeholders or rich text.
+        return resolved.ast[0].value;
+    };
+    /**
+     * Return a raw string representing the syntax of the original message, as
+     * authored, with no values replaced. The result of this function could be
+     * written back to the definition file for the message and re-parsed to
+     * create an identical message to the original.
+     *
+     * This should rarely be necessary outside of sending raw messages to other
+     * applications that do their own message parsing.
+     */
+    IntlManager.prototype.reserialize = function (message) {
+        var resolved = message(this.currentLocale);
+        if (typeof resolved === 'string')
+            return resolved;
+        return resolved.reserialize();
     };
     IntlManager.prototype.bindFormatValues = function (Builder, message, values) {
         return (0, format_1.bindFormatValues)(Builder, message.ast, [this.currentLocale, this.defaultLocale], this.intl.formatters, this.intl.formats, values);

package/dist/message.d.ts

@@ -3,4 +3,9 @@ export declare class InternalIntlMessage {
     locale: string;
     ast: FormatJsNode[];
     constructor(messageOrAst: FormatJsNode[], locale: string);
+    /**
+     * Return a stringified serialization of this message's AST, with no
+     * formatting or values applied.
+     */
+    reserialize(): string;
 }

package/dist/message.js

@@ -1,11 +1,186 @@
 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalIntlMessage = void 0;
+var keyless_json_1 = require("./keyless-json");
 var InternalIntlMessage = /** @class */ (function () {
     function InternalIntlMessage(messageOrAst, locale) {
         this.locale = locale;
         this.ast = messageOrAst;
     }
+    /**
+     * Return a stringified serialization of this message's AST, with no
+     * formatting or values applied.
+     */
+    InternalIntlMessage.prototype.reserialize = function () {
+        var result = { value: '' };
+        serializeFormatJsAst(this.ast, result);
+        return result.value;
+    };
     return InternalIntlMessage;
 }());
 exports.InternalIntlMessage = InternalIntlMessage;
+// Accepting an object as the `result` parameter lets the same string get passed around and
+// appended, rather than creating a bunch of intermediate strings.
+function serializeFormatJsAst(ast, result) {
+    var e_1, _a, e_2, _b, e_3, _c;
+    try {
+        for (var ast_1 = __values(ast), ast_1_1 = ast_1.next(); !ast_1_1.done; ast_1_1 = ast_1.next()) {
+            var node = ast_1_1.value;
+            switch (node.type) {
+                case keyless_json_1.FormatJsNodeType.Literal:
+                    result.value += node.value;
+                    return;
+                case keyless_json_1.FormatJsNodeType.Argument:
+                    // Empties are an artifact of our parsing strategy, not necessary here.
+                    if (result.value === '$_')
+                        return;
+                    result.value += '{' + node.value + '}';
+                    return;
+                case keyless_json_1.FormatJsNodeType.Date:
+                    result.value += '{' + node.value + ', date';
+                    if (node.style != null) {
+                        result.value += ', ' + node.style;
+                    }
+                    result.value += '}';
+                    return;
+                case keyless_json_1.FormatJsNodeType.Time:
+                    result.value += '{' + node.value + ', time';
+                    if (node.style != null) {
+                        result.value += ', ' + node.style;
+                    }
+                    result.value += '}';
+                    return;
+                case keyless_json_1.FormatJsNodeType.Number:
+                    result.value += '{' + node.value + ', number';
+                    if (node.style != null) {
+                        result.value += ', ' + node.style;
+                    }
+                    result.value += '}';
+                    return;
+                case keyless_json_1.FormatJsNodeType.Plural: {
+                    var pluralType = node.pluralType == 'ordinal' ? 'selectordinal' : 'plural';
+                    result.value += '{' + node.value + ', ' + pluralType + ', ';
+                    if (node.offset) {
+                        result.value += 'offset:' + node.offset;
+                    }
+                    try {
+                        for (var _d = (e_2 = void 0, __values(Object.entries(node.options))), _e = _d.next(); !_e.done; _e = _d.next()) {
+                            var _f = __read(_e.value, 2), name = _f[0], arm = _f[1];
+                            result.value += ' ' + name + ' {';
+                            serializeFormatJsAst(arm.value, result);
+                            result.value += '}';
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                    return;
+                }
+                case keyless_json_1.FormatJsNodeType.Pound:
+                    result.value += '#';
+                    return;
+                case keyless_json_1.FormatJsNodeType.Select: {
+                    result.value += '{' + node.value + ', select, ';
+                    try {
+                        for (var _g = (e_3 = void 0, __values(Object.entries(node.options))), _h = _g.next(); !_h.done; _h = _g.next()) {
+                            var _j = __read(_h.value, 2), name = _j[0], arm = _j[1];
+                            result.value += ' ' + name + ' {';
+                            serializeFormatJsAst(arm.value, result);
+                            result.value += '}';
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_h && !_h.done && (_c = _g.return)) _c.call(_g);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    return;
+                }
+                case keyless_json_1.FormatJsNodeType.Tag:
+                    serializeFormatJsTag(node, result);
+                    return;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (ast_1_1 && !ast_1_1.done && (_a = ast_1.return)) _a.call(ast_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+function serializeFormatJsTag(node, result) {
+    switch (node.value) {
+        case '$b':
+            result.value += '**';
+            serializeFormatJsAst(node.children, result);
+            result.value += '**';
+            return;
+        case '$i':
+            result.value += '*';
+            serializeFormatJsAst(node.children, result);
+            result.value += '*';
+            return;
+        case '$code':
+            result.value += '`';
+            serializeFormatJsAst(node.children, result);
+            result.value += '`';
+            return;
+        case '$p':
+            serializeFormatJsAst(node.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.
+            var _a = __read(node.children), target = _a[0], children = _a.slice(1);
+            result.value += '[';
+            serializeFormatJsAst(children, result);
+            result.value += '](';
+            if (target != null) {
+                serializeFormatJsAst([target], result);
+            }
+            result.value += ')';
+            return;
+        default:
+            // Any other tag name is a hook, which just adds the `$[` on a link tag.
+            result.value += '$[';
+            serializeFormatJsAst(node.children, result);
+            result.value += '](' + node.value + ')';
+            return;
+    }
+}

package/dist/types.d.ts

@@ -197,9 +197,9 @@ export interface FunctionTypeMap {
   handler: any;
 }
 
-export interface FunctionTypes<Result, HandlerType = (content: Result[]) => Result | Result[]> {
-  link: undefined | ((content: Result[]) => Result | Result[]);
-  hook: undefined | ((content: Result[]) => Result | Result[]);
+export interface FunctionTypes<Result, HandlerType = () => void> {
+  link: undefined | ((content: Result[], key: string) => Result | Result[]);
+  hook: undefined | ((content: Result[], key: string) => Result | Result[]);
   handler: undefined | HandlerType;
 }
 
@@ -276,6 +276,7 @@ export interface RichTextFormattingMap<T = any> {
   $p: T;
   $link: T;
   $code: T;
+  $del: T;
 }
 
 export type RichTextTagNames = keyof RichTextFormattingMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discord/intl",
-  "version": "0.2.1-rc.1",
+  "version": "0.2.2-canary.6898c23",
   "license": "MIT",
   "description": "Client runtime for managing messages and translations in a React project.",
   "main": "./dist/index.js",
@@ -15,7 +15,9 @@
     "src"
   ],
   "dependencies": {
+    "@formatjs/icu-skeleton-parser": "1.8.2",
     "@formatjs/intl": "^2.10.1",
+    "@intrnl/xxhash64": "^0.1.2",
     "intl-messageformat": "^10.5.11"
   },
   "devDependencies": {
@@ -25,8 +27,8 @@
   },
   "peerDependencies": {
     "@rspack/core": "0.x || 1.x",
-    "webpack": "^5.0.0",
-    "react": "> 16"
+    "react": "> 16",
+    "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@rspack/core": {

package/src/format.ts

@@ -20,6 +20,11 @@
 import { FormatJsNode, FormatJsNodeType } from './keyless-json';
 import { Formats, Formatters, MissingValueError } from 'intl-messageformat';
 import { RichTextTagNames } from './types';
+import {
+  parseDateTimeSkeleton,
+  parseNumberSkeleton,
+  parseNumberSkeletonFromString,
+} from '@formatjs/icu-skeleton-parser';
 
 /**
  * Returns true if the tag name should be considered a rich text tag that
@@ -96,10 +101,12 @@ export function bindFormatValuesWithBuilder<T, Builder extends FormatBuilder<T>>
       case FormatJsNodeType.Date: {
         // 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.
-        if (typeof node.style !== 'string') {
-          throw '@discord/intl does not currently support non-string format skeletons';
-        }
-        const style = node.style in formats.date ? formats.date[node.style] : undefined; // TODO: parseSkeleton();
+        const style =
+          node.style in formats.date
+            ? formats.date[node.style]
+            : node.style != null
+              ? parseDateTimeSkeleton(node.style)
+              : undefined;
         // @ts-expect-error Cast string values to dates properly.
         builder.pushLiteralText(formatters.getDateTimeFormat(locales, style).format(value));
         break;
@@ -107,10 +114,12 @@ export function bindFormatValuesWithBuilder<T, Builder extends FormatBuilder<T>>
       case FormatJsNodeType.Time: {
         // 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.
-        if (typeof node.style !== 'string') {
-          throw '@discord/intl does not currently support non-string format skeletons';
-        }
-        const style = node.style in formats.time ? formats.time[node.style] : undefined; // TODO: parseSkeleton();
+        const style =
+          node.style in formats.time
+            ? formats.time[node.style]
+            : node.style != null
+              ? parseDateTimeSkeleton(node.style)
+              : undefined; // TODO: parseSkeleton();
         builder.pushLiteralText(
           // @ts-expect-error Cast string values to dates properly.
           formatters.getDateTimeFormat(locales, style).format(value),
@@ -120,14 +129,15 @@ export function bindFormatValuesWithBuilder<T, Builder extends FormatBuilder<T>>
       case FormatJsNodeType.Number: {
         // 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.
-        if (typeof node.style !== 'string') {
-          throw '@discord/intl does not currently support non-string format skeletons';
-        }
-        const style = node.style in formats.number ? formats.number[node.style] : undefined; // TODO: parseSkeleton();
-
-        // @ts-expect-error Support `scale` style property.
-        const scaledValue = value as number;
-        // const scaledValue = (value as number) * (style?.scale ?? 1);
+        const style =
+          node.style in formats.number
+            ? formats.number[node.style]
+            : node.style != null
+              ? parseNumberSkeleton(parseNumberSkeletonFromString(node.style))
+              : undefined;
+        const scaledValue =
+          // @ts-expect-error This is a weird cast that's not accurate, but works in the short term.
+          typeof value !== 'number' ? (value as number) : ((value as number) * style?.scale ?? 1);
         builder.pushLiteralText(formatters.getNumberFormat(locales, style).format(scaledValue));
         break;
       }

package/src/formatters/ast.ts

@@ -12,7 +12,7 @@ import { FormatBuilder } from '../format';
  * Types for formatting functions when calling `formatToParts`, ensuring the
  * functions yield value AST nodes.
  */
-export type AstFunctionTypes = FunctionTypes<RichTextNode>;
+export type AstFunctionTypes = FunctionTypes<RichTextNode, object>;
 
 // This structure aims to match `simple-markdown`'s AST, but that type is very
 // loosely defined as just "type" and "arbitrary map of content". This is more
@@ -20,8 +20,9 @@ export type AstFunctionTypes = FunctionTypes<RichTextNode>;
 export enum RichTextNodeType {
   Text = 'text',
   Strong = 'strong',
-  Emphasis = 'emphasis',
-  Code = 'code',
+  Emphasis = 'em',
+  Strikethrough = 's',
+  Code = 'inlineCode',
   Link = 'link',
   Paragraph = 'paragraph',
   /**
@@ -36,15 +37,6 @@ export enum RichTextNodeType {
   Object = 'object',
 }
 
-const RICH_TEXT_TAG_TYPES: Record<RichTextTagNames, RichTextNodeType> = {
-  $_: RichTextNodeType.Text,
-  $b: RichTextNodeType.Strong,
-  $i: RichTextNodeType.Emphasis,
-  $code: RichTextNodeType.Code,
-  $link: RichTextNodeType.Link,
-  $p: RichTextNodeType.Paragraph,
-};
-
 interface RichTextNodeBase<ContentType> {
   type: RichTextNodeType;
   content: ContentType;
@@ -58,6 +50,9 @@ interface RichTextStrongNode extends RichTextNodeBase<RichTextNode[]> {
 interface RichTextEmphasisNode extends RichTextNodeBase<RichTextNode[]> {
   type: RichTextNodeType.Emphasis;
 }
+interface RichTextStrikethroughNode extends RichTextNodeBase<RichTextNode[]> {
+  type: RichTextNodeType.Strikethrough;
+}
 interface RichTextCodeNode extends RichTextNodeBase<RichTextNode[]> {
   type: RichTextNodeType.Code;
 }
@@ -76,6 +71,7 @@ export type RichTextNode =
   | RichTextTextNode
   | RichTextStrongNode
   | RichTextEmphasisNode
+  | RichTextStrikethroughNode
   | RichTextCodeNode
   | RichTextParagraphNode
   | RichTextLinkNode
@@ -84,8 +80,9 @@ export type RichTextNode =
 const AST_RICH_TEXT_ELEMENTS: RichTextFormattingMap<AstFunctionTypes['hook']> = {
   $_: () => ({ type: RichTextNodeType.Text, content: '' }),
   $b: (content) => ({ type: RichTextNodeType.Strong, content }),
-  $code: (content) => ({ type: RichTextNodeType.Code, content }),
   $i: (content) => ({ type: RichTextNodeType.Emphasis, content }),
+  $del: (content) => ({ type: RichTextNodeType.Strikethrough, content }),
+  $code: (content) => ({ type: RichTextNodeType.Code, content }),
   $link: ([target, ...content]) => ({
     type: RichTextNodeType.Link,
     target: target.content as string,
@@ -101,7 +98,7 @@ class AstBuilder extends FormatBuilder<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, '');
     if (Array.isArray(result)) {
       this.result.push(...result);
     } else {
@@ -111,7 +108,7 @@ class AstBuilder extends FormatBuilder<RichTextNode> {
 
   pushLiteralText(text: string) {
     const last = this.result[this.result.length - 1];
-    if (last.type === RichTextNodeType.Text) {
+    if (last != null && last.type === RichTextNodeType.Text) {
       last.content += text;
     } else {
       this.result.push({ type: RichTextNodeType.Text, content: text });

package/src/formatters/markdown.ts

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

package/src/formatters/react.ts

@@ -28,12 +28,13 @@ export type ReactFunctionTypes = FunctionTypes<
 const h = React.createElement;
 export const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFunctionTypes['hook']> = {
   $_: () => '',
-  $b: (content) => h('strong', undefined, content),
-  $code: (content) => h('code', undefined, content),
-  $i: (content) => h('em', undefined, content),
+  $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]) => h('a', { href }, content),
-  $p: (content) => h('p', undefined, content),
+  $link: ([href, ...content], key) => h('a', { href, key }, content),
+  $p: (content, key) => h('p', { key }, content),
 };
 
 /**
@@ -47,10 +48,11 @@ function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctio
   new (): FormatBuilder<React.ReactNode>;
 } {
   return class extends FormatBuilder<React.ReactNode> {
+    _nodeKey: number = 0;
     result: React.ReactNode[] = [];
 
     pushRichTextTag(tag: RichTextTagNames, children: React.ReactNode[]) {
-      this.result.push(richTextElements[tag](children));
+      this.result.push(richTextElements[tag](children, `${this._nodeKey++}`));
     }
 
     pushLiteralText(text: string) {
@@ -69,18 +71,23 @@ function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctio
   };
 }
 
+export type ReactIntlMessage = React.ReactElement<
+  {},
+  typeof React.Fragment & { __brand: 'discord-intl' }
+>;
+
 export function formatReact(
   this: IntlManager,
   message: AnyIntlMessage,
   values: object,
   Builder: FormatBuilderConstructor<React.ReactElement>,
-): React.ReactElement {
+): ReactIntlMessage {
   if (typeof message === 'string') {
-    return React.createElement(React.Fragment, undefined, message);
+    return React.createElement(React.Fragment, undefined, message) as ReactIntlMessage;
   }
 
   const parts = this.bindFormatValues(Builder, message, values);
-  return React.createElement(React.Fragment, undefined, parts);
+  return React.createElement(React.Fragment, undefined, parts) as ReactIntlMessage;
 }
 
 /**
@@ -90,7 +97,7 @@ export function formatReact(
  */
 export function makeReactFormatter(
   richTextElements: RichTextFormattingMap<ReactFunctionTypes['hook']>,
-): FormatterImplementation<ReactFunctionTypes, React.ReactElement, React.ReactNode> {
+): FormatterImplementation<ReactFunctionTypes, ReactIntlMessage, React.ReactNode> {
   return {
     format: formatReact,
     builder: createReactBuilder(richTextElements),

package/src/formatters/string.ts

@@ -34,7 +34,7 @@ export class StringBuilder extends FormatBuilder<string> {
   pushObject(value: object) {
     // Objects are only included in the result if they specify a toString value directly.
     // Otherwise, they would be rendered as `[object Object]`, which is never helpful.
-    if ('toString' in value) {
+    if (value != null && 'toString' in value) {
       this.result += value.toString();
     }
   }

package/src/hash.ts

@@ -0,0 +1,42 @@
+import { hash as h64 } from '@intrnl/xxhash64';
+
+const BASE64_TABLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('');
+const IS_BIG_ENDIAN = (() => {
+  const array = new Uint8Array(4);
+  const view = new Uint32Array(array.buffer);
+  return !((view[0] = 1) & array[0]);
+})();
+
+function numberToBytes(number) {
+  number = BigInt(number);
+  const array = [];
+  const byteCount = Math.ceil(Math.floor(Math.log2(Number(number)) + 1) / 8);
+  for (let i = 0; i < byteCount; i++) {
+    array.unshift(Number((number >> BigInt(8 * i)) & BigInt(255)));
+  }
+
+  const bytes = new Uint8Array(array);
+  // The native `hashToMessageKey` always works in Big/Network Endian bytes, so this array
+  // needs to be converted to the same endianness to get the same base64 result.
+  return IS_BIG_ENDIAN ? bytes : bytes.reverse();
+}
+
+/**
+ * Returns a consistent, short hash of the given key by first processing it through a hash digest,
+ * then encoding the first few bytes to base64.
+ *
+ * This function is specifically written to mirror the native backend hashing function used by
+ * `@discord/intl-loader-core`, to be able to hash names at runtime.
+ */
+export function runtimeHashMessageKey(key: string): string {
+  const hash = h64(key, 0);
+  const bytes = numberToBytes(hash);
+  return [
+    BASE64_TABLE[bytes[0] >> 2],
+    BASE64_TABLE[((bytes[0] & 0x03) << 4) | (bytes[1] >> 4)],
+    BASE64_TABLE[((bytes[1] & 0x0f) << 2) | (bytes[2] >> 6)],
+    BASE64_TABLE[bytes[2] & 0x3f],
+    BASE64_TABLE[bytes[3] >> 2],
+    BASE64_TABLE[((bytes[3] & 0x03) << 4) | (bytes[3] >> 4)],
+  ].join('');
+}

package/src/index.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { RichTextNode } from './formatters';
 
 export * from './formatters';
+export { FormatBuilder, FormatBuilderConstructor, bindFormatValues } from './format';
+export { runtimeHashMessageKey } from './hash';
 export { IntlManager, DEFAULT_LOCALE, type FormatFunction } from './intl-manager';
 export {
   createLoader,
@@ -26,6 +28,7 @@ export type * from './types.d.ts';
  * intl message, even if the actual value comes from elsewhere (like a
  * user-generated string).
  */
+// TODO: Replace this with ReactIntlMessage from `formatters/react`.
 export type ReactIntlMessage = string | React.ReactElement;
 
 /**

package/src/intl-manager.ts

@@ -1,8 +1,6 @@
 import { createIntl, IntlShape } from '@formatjs/intl';
 import { Formats, Formatters, IntlMessageFormat } from 'intl-messageformat';
 
-import { LocaleId, LocaleImportMap, MessageLoader } from './message-loader';
-
 import type {
   FormatterImplementation,
   IntlMessageGetter,
@@ -11,6 +9,7 @@ import type {
 } from './types';
 import { InternalIntlMessage } from './message';
 import { bindFormatValues, FormatBuilderConstructor } from './format';
+import { FormatJsLiteral } from './keyless-json';
 
 /**
  * Fallback locale used for all internationalization when an operation in the
@@ -18,8 +17,7 @@ import { bindFormatValues, FormatBuilderConstructor } from './format';
  */
 export const DEFAULT_LOCALE: string = 'en-US';
 
-type FormatterReturnType<F extends FormatterImplementation<any, any>> =
-  F extends FormatterImplementation<any, infer Return> ? Return : never;
+type FormatterReturnType<F extends FormatterImplementation<any, any>> = ReturnType<F['format']>;
 
 type FormatterFunctionTypes<F extends FormatterImplementation<any, any>> =
   F extends FormatterImplementation<infer Functions, any> ? Functions : never;
@@ -116,11 +114,28 @@ export class IntlManager {
    * immediately return the plain string value of the message in the current locale.
    */
   string<T extends TypedIntlMessageGetter<undefined>>(message: T): string {
-    // @ts-expect-error Figure out how to make this typing exact. This
-    // currently relies on the generic typing being sound enough to know that
-    // the message can only contain a single static text node and no
-    // placeholders or rich text.
-    return message(this.currentLocale).ast[0].value;
+    const resolved = message(this.currentLocale);
+    if (resolved == null || resolved.ast.length === 0) return '';
+
+    // TODO: Figure out how to make this typing exact. This currently relies on
+    // the generic typing being sound enough to know that the message can only
+    // contain a single static text node and no placeholders or rich text.
+    return (resolved.ast[0] as FormatJsLiteral).value;
+  }
+
+  /**
+   * Return a raw string representing the syntax of the original message, as
+   * authored, with no values replaced. The result of this function could be
+   * written back to the definition file for the message and re-parsed to
+   * create an identical message to the original.
+   *
+   * This should rarely be necessary outside of sending raw messages to other
+   * applications that do their own message parsing.
+   */
+  reserialize<T extends IntlMessageGetter>(message: T): string {
+    const resolved = message(this.currentLocale);
+    if (typeof resolved === 'string') return resolved;
+    return resolved.reserialize();
   }
 
   bindFormatValues<T>(

package/src/message.ts

@@ -1,4 +1,4 @@
-import { FormatJsNode } from './keyless-json';
+import { FormatJsNode, FormatJsNodeType, FormatJsTag } from './keyless-json';
 
 export class InternalIntlMessage {
   locale: string;
@@ -8,4 +8,122 @@ export class InternalIntlMessage {
     this.locale = locale;
     this.ast = messageOrAst;
   }
+
+  /**
+   * Return a stringified serialization of this message's AST, with no
+   * formatting or values applied.
+   */
+  reserialize(): string {
+    const result = { value: '' };
+    serializeFormatJsAst(this.ast, result);
+    return result.value;
+  }
+}
+
+// Accepting an object as the `result` parameter lets the same string get passed around and
+// appended, rather than creating a bunch of intermediate strings.
+function serializeFormatJsAst(ast: FormatJsNode[], result: { value: string }) {
+  for (const node of ast) {
+    switch (node.type) {
+      case FormatJsNodeType.Literal:
+        result.value += node.value;
+        return;
+      case FormatJsNodeType.Argument:
+        // Empties are an artifact of our parsing strategy, not necessary here.
+        if (result.value === '$_') return;
+        result.value += '{' + node.value + '}';
+        return;
+      case FormatJsNodeType.Date:
+        result.value += '{' + node.value + ', date';
+        if (node.style != null) {
+          result.value += ', ' + node.style;
+        }
+        result.value += '}';
+        return;
+      case FormatJsNodeType.Time:
+        result.value += '{' + node.value + ', time';
+        if (node.style != null) {
+          result.value += ', ' + node.style;
+        }
+        result.value += '}';
+        return;
+      case FormatJsNodeType.Number:
+        result.value += '{' + node.value + ', number';
+        if (node.style != null) {
+          result.value += ', ' + node.style;
+        }
+        result.value += '}';
+        return;
+      case FormatJsNodeType.Plural: {
+        const pluralType = node.pluralType == 'ordinal' ? 'selectordinal' : 'plural';
+        result.value += '{' + node.value + ', ' + pluralType + ', ';
+        if (node.offset) {
+          result.value += 'offset:' + node.offset;
+        }
+        for (const [name, arm] of Object.entries(node.options)) {
+          result.value += ' ' + name + ' {';
+          serializeFormatJsAst(arm.value, result);
+          result.value += '}';
+        }
+        return;
+      }
+      case FormatJsNodeType.Pound:
+        result.value += '#';
+        return;
+      case FormatJsNodeType.Select: {
+        result.value += '{' + node.value + ', select, ';
+        for (const [name, arm] of Object.entries(node.options)) {
+          result.value += ' ' + name + ' {';
+          serializeFormatJsAst(arm.value, result);
+          result.value += '}';
+        }
+        return;
+      }
+      case FormatJsNodeType.Tag:
+        serializeFormatJsTag(node, result);
+        return;
+    }
+  }
+}
+
+function serializeFormatJsTag(node: FormatJsTag, result: { value: string }) {
+  switch (node.value) {
+    case '$b':
+      result.value += '**';
+      serializeFormatJsAst(node.children, result);
+      result.value += '**';
+      return;
+    case '$i':
+      result.value += '*';
+      serializeFormatJsAst(node.children, result);
+      result.value += '*';
+      return;
+    case '$code':
+      result.value += '`';
+      serializeFormatJsAst(node.children, result);
+      result.value += '`';
+      return;
+    case '$p':
+      serializeFormatJsAst(node.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.children;
+      result.value += '[';
+      serializeFormatJsAst(children, result);
+      result.value += '](';
+      if (target != null) {
+        serializeFormatJsAst([target], result);
+      }
+      result.value += ')';
+      return;
+    default:
+      // Any other tag name is a hook, which just adds the `$[` on a link tag.
+      result.value += '$[';
+      serializeFormatJsAst(node.children, result);
+      result.value += '](' + node.value + ')';
+      return;
+  }
 }

package/src/types.d.ts

@@ -197,9 +197,9 @@ export interface FunctionTypeMap {
   handler: any;
 }
 
-export interface FunctionTypes<Result, HandlerType = (content: Result[]) => Result | Result[]> {
-  link: undefined | ((content: Result[]) => Result | Result[]);
-  hook: undefined | ((content: Result[]) => Result | Result[]);
+export interface FunctionTypes<Result, HandlerType = () => void> {
+  link: undefined | ((content: Result[], key: string) => Result | Result[]);
+  hook: undefined | ((content: Result[], key: string) => Result | Result[]);
   handler: undefined | HandlerType;
 }
 
@@ -276,6 +276,7 @@ export interface RichTextFormattingMap<T = any> {
   $p: T;
   $link: T;
   $code: T;
+  $del: T;
 }
 
 export type RichTextTagNames = keyof RichTextFormattingMap;