@discord/intl 0.2.1-rc.1 → 0.2.1-rc.2

package/dist/formatters/ast.d.ts

@@ -4,7 +4,7 @@ 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",

package/dist/formatters/ast.js

@@ -65,14 +65,6 @@ 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 }); },
@@ -100,7 +92,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));
         }

package/dist/formatters/markdown.js

@@ -62,7 +62,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,15 @@ 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); },
+    $code: function (content, key) { return h('code', { key: key }, content); },
+    $i: function (content, key) { return h('em', { 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 +70,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/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 & {

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discord/intl",
-  "version": "0.2.1-rc.1",
+  "version": "0.2.1-rc.2",
   "license": "MIT",
   "description": "Client runtime for managing messages and translations in a React project.",
   "main": "./dist/index.js",

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
@@ -36,15 +36,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;
@@ -101,7 +92,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

@@ -31,7 +31,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,12 @@ 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),
+  $code: (content, key) => h('code', { key }, content),
+  $i: (content, key) => h('em', { 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 +47,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 +70,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 +96,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

@@ -26,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,
@@ -18,8 +16,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;

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