@discord/intl 0.2.0 → 0.2.1-canary.1ed7c43

package/dist/message.js

@@ -26,68 +26,161 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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;
-        if (typeof messageOrAst === 'string') {
-            this.message = messageOrAst;
-        }
-        else {
-            this.ast = messageOrAst;
-        }
+        this.ast = messageOrAst;
     }
-    Object.defineProperty(InternalIntlMessage.prototype, "plainAst", {
-        /**
-         * A stripped-down representation of the message with no rich formatting
-         * elements preserved. This will be lazily created the first time it is
-         * requested (e.g., by calling `formatToPlainString`).
-         */
-        get: function () {
-            return (this._plainAst = this._removeRichTags(this.ast));
-        },
-        enumerable: false,
-        configurable: true
-    });
     /**
-     * Returns the same element with any formatting tags removed. If the element
-     * itself is a tag, the children will be hoisted and returned, otherwise the
-     * element is returned as an array of itself.
+     * Return a stringified serialization of this message's AST, with no
+     * formatting or values applied.
      */
-    InternalIntlMessage.prototype._removeRichTags = function (nodes) {
-        var e_1, _a;
-        var result = new Array(nodes.length);
-        try {
-            for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
-                var node = nodes_1_1.value;
-                if (node.type === keyless_json_1.FormatJsNodeType.Tag) {
-                    result.push.apply(result, __spreadArray([], __read(this._removeRichTags(node.children)), false));
+    InternalIntlMessage.prototype.reserialize = function () {
+        var value = '';
+        serializeFormatJsAst(this.ast, { value: value });
+        return 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;
                 }
-                else {
-                    result.push(node);
+                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 (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
-            }
-            finally { if (e_1) throw e_1.error; }
+    }
+    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);
         }
-        return result;
-    };
-    return InternalIntlMessage;
-}());
-exports.InternalIntlMessage = InternalIntlMessage;
+        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.0",
+  "version": "0.2.1-canary.1ed7c43",
   "license": "MIT",
   "description": "Client runtime for managing messages and translations in a React project.",
   "main": "./dist/index.js",
@@ -16,6 +16,7 @@
   ],
   "dependencies": {
     "@formatjs/intl": "^2.10.1",
+    "@formatjs/icu-skeleton-parser": "1.8.2",
     "intl-messageformat": "^10.5.11"
   },
   "devDependencies": {

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,14 @@ 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();
-
+        const style =
+          node.style in formats.number
+            ? formats.number[node.style]
+            : node.style != null
+              ? parseNumberSkeleton(parseNumberSkeletonFromString(node.style))
+              : undefined;
         // @ts-expect-error Support `scale` style property.
-        const scaledValue = value as number;
-        // const scaledValue = (value as number) * (style?.scale ?? 1);
+        const scaledValue = style?.scale != 1 ? (value as number) * style.scale : (value as number);
         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
@@ -21,6 +21,7 @@ export enum RichTextNodeType {
   Text = 'text',
   Strong = 'strong',
   Emphasis = 'emphasis',
+  Strikethrough = 'strikethrough',
   Code = 'code',
   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 {

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/index.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import { RichTextNode } from './formatters';
 
-export { IntlManager, createLoader, DEFAULT_LOCALE, type FormatFunction } from './intl-manager';
 export * from './formatters';
-
+export { IntlManager, DEFAULT_LOCALE, type FormatFunction } from './intl-manager';
+export {
+  createLoader,
+  loadAllMessagesInLocale,
+  waitForAllDefaultIntlMessagesLoaded,
+  MessageLoader,
+} from './message-loader';
 export type * from './types.d.ts';
 
 /**
@@ -21,6 +26,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,8 +114,26 @@ export class IntlManager {
    * immediately return the plain string value of the message in the current locale.
    */
   string<T extends TypedIntlMessageGetter<undefined>>(message: T): string {
-    // TODO: Figure out how to make this typing exact.
-    return message(this.currentLocale).message;
+    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 {
+    return message(this.currentLocale)[0].reserialize();
   }
 
   bindFormatValues<T>(
@@ -135,16 +151,3 @@ export class IntlManager {
     );
   }
 }
-
-/**
- * Create a new MessageLoader, which handles lazily loading messages for
- * different locales and sanity checks as needed to provide accessors for each
- * message defined in `messageKeys`.
- */
-export function createLoader(
-  messageKeys: string[],
-  localeImportMap: LocaleImportMap,
-  defaultLocale: LocaleId,
-) {
-  return new MessageLoader(messageKeys, localeImportMap, defaultLocale);
-}