@discord/intl 0.2.1-rc.2 → 0.2.2-canary.96b50b6

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

@@ -8,8 +8,9 @@ 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";
     /**
@@ -68,8 +69,9 @@ var RichTextNodeType;
 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 ({
@@ -102,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/index.d.ts

@@ -1,4 +1,4 @@
 export { astFormatter, type AstFunctionTypes, type RichTextNode, RichTextNodeType } from './ast';
 export { markdownFormatter, type MarkdownFunctionTypes } from './markdown';
-export { reactFormatter, makeReactFormatter, DEFAULT_REACT_RICH_TEXT_ELEMENTS, type ReactFunctionTypes, } from './react';
+export { reactFormatter, makeReactFormatter, DEFAULT_REACT_RICH_TEXT_ELEMENTS, type ReactFunctionTypes, ReactIntlMessage, } from './react';
 export { stringFormatter, type StringFunctionTypes } from './string';

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 + ')';

package/dist/formatters/react.d.ts

@@ -18,9 +18,9 @@ export type ReactFunctionTypes = FunctionTypes<React.ReactNode, ReactClickHandle
     onContextMenu: ReactClickHandler;
 }>;
 export declare const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFunctionTypes['hook']>;
-export type ReactIntlMessage = React.ReactElement<{}, typeof React.Fragment & {
+export type ReactIntlMessage = Array<React.ReactElement | string> & {
     __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

package/dist/formatters/react.js

@@ -49,8 +49,9 @@ var h = React.createElement;
 exports.DEFAULT_REACT_RICH_TEXT_ELEMENTS = {
     $_: function () { return ''; },
     $b: function (content, key) { return h('strong', { key: key }, content); },
-    $code: function (content, key) { return h('code', { 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, key) {
         var _b = __read(_a), href = _b[0], content = _b.slice(1);
@@ -93,10 +94,10 @@ function createReactBuilder(richTextElements) {
 }
 function formatReact(message, values, Builder) {
     if (typeof message === 'string') {
-        return React.createElement(React.Fragment, undefined, message);
+        return [message];
     }
     var parts = this.bindFormatValues(Builder, message, values);
-    return React.createElement(React.Fragment, undefined, parts);
+    return parts;
 }
 /**
  * Create a new React formatter with the given rich text elements replacing the defaults. Use this

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';
@@ -19,7 +21,7 @@ export type * from './types.d.ts';
  * intl message, even if the actual value comes from elsewhere (like a
  * user-generated string).
  */
-export type ReactIntlMessage = string | React.ReactElement;
+export type ReactIntlMessage = string | React.ReactElement | Array<string | React.ReactElement>;
 /**
  * The return value of `formatToParts` from `@discord/intl`, this type
  * represents any AST structure for a message rendered using this system.

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

@@ -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

@@ -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.2",
+  "version": "0.2.2-canary.96b50b6",
   "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

@@ -20,8 +20,9 @@ export type AstFunctionTypes = FunctionTypes<RichTextNode, object>;
 export enum RichTextNodeType {
   Text = 'text',
   Strong = 'strong',
-  Emphasis = 'emphasis',
-  Code = 'code',
+  Emphasis = 'em',
+  Strikethrough = 's',
+  Code = 'inlineCode',
   Link = 'link',
   Paragraph = 'paragraph',
   /**
@@ -49,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;
 }
@@ -67,6 +71,7 @@ export type RichTextNode =
   | RichTextTextNode
   | RichTextStrongNode
   | RichTextEmphasisNode
+  | RichTextStrikethroughNode
   | RichTextCodeNode
   | RichTextParagraphNode
   | RichTextLinkNode
@@ -75,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,
@@ -102,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/index.ts

@@ -5,5 +5,6 @@ export {
   makeReactFormatter,
   DEFAULT_REACT_RICH_TEXT_ELEMENTS,
   type ReactFunctionTypes,
+  ReactIntlMessage,
 } from './react';
 export { stringFormatter, type StringFunctionTypes } from './string';

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',
 };

package/src/formatters/react.ts

@@ -29,8 +29,9 @@ const h = React.createElement;
 export const DEFAULT_REACT_RICH_TEXT_ELEMENTS: RichTextFormattingMap<ReactFunctionTypes['hook']> = {
   $_: () => '',
   $b: (content, key) => h('strong', { key }, content),
-  $code: (content, key) => h('code', { 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),
   $p: (content, key) => h('p', { key }, content),
@@ -70,10 +71,9 @@ function createReactBuilder(richTextElements: RichTextFormattingMap<ReactFunctio
   };
 }
 
-export type ReactIntlMessage = React.ReactElement<
-  {},
-  typeof React.Fragment & { __brand: 'discord-intl' }
->;
+// This is explicitly `ReactElement | string` and _not_ `ReactNode`, because nullish values and any
+// other type that ReactNode accepts (boolean, number, etc.) are _not_ valid children of a message.
+export type ReactIntlMessage = Array<React.ReactElement | string> & { __brand: 'discord-intl' };
 
 export function formatReact(
   this: IntlManager,
@@ -82,11 +82,11 @@ export function formatReact(
   Builder: FormatBuilderConstructor<React.ReactElement>,
 ): ReactIntlMessage {
   if (typeof message === 'string') {
-    return React.createElement(React.Fragment, undefined, message) as ReactIntlMessage;
+    return [message] as ReactIntlMessage;
   }
 
   const parts = this.bindFormatValues(Builder, message, values);
-  return React.createElement(React.Fragment, undefined, parts) as ReactIntlMessage;
+  return parts as ReactIntlMessage;
 }
 
 /**

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,
@@ -27,7 +29,7 @@ export type * from './types.d.ts';
  * user-generated string).
  */
 // TODO: Replace this with ReactIntlMessage from `formatters/react`.
-export type ReactIntlMessage = string | React.ReactElement;
+export type ReactIntlMessage = string | React.ReactElement | Array<string | React.ReactElement>;
 
 /**
  * The return value of `formatToParts` from `@discord/intl`, this type

package/src/intl-manager.ts

@@ -9,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
@@ -113,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

@@ -276,6 +276,7 @@ export interface RichTextFormattingMap<T = any> {
   $p: T;
   $link: T;
   $code: T;
+  $del: T;
 }
 
 export type RichTextTagNames = keyof RichTextFormattingMap;