feat(macro): make select macro choices strictly typed

Author: MikaelSiidorow

packages/babel-plugin-lingui-macro/src/macroJsAst.test.ts

@@ -372,5 +372,34 @@ describe("js macro", () => {
         },
       })
     })
+
+    it("select without other", () => {
+      const exp = parseExpression(
+        `select(gender, {
+          male: "he",
+          female: "she",
+        })`
+      )
+      const tokens = tokenizeChoiceComponent(
+        (exp as NodePath<CallExpression>).node,
+        JsMacroName.select,
+        createMacroCtx()
+      )
+      expect(tokens).toMatchObject({
+        format: "select",
+        name: "gender",
+        options: expect.objectContaining({
+          female: "she",
+          male: "he",
+          offset: undefined,
+          other: "", // <- other should be filled with empty string
+        }),
+        type: "arg",
+        value: {
+          name: "gender",
+          type: "Identifier",
+        },
+      })
+    })
   })
 })

packages/babel-plugin-lingui-macro/src/macroJsAst.ts

@@ -180,6 +180,8 @@ export function tokenizeChoiceComponent(
     format: format,
     options: {
       offset: undefined,
+      /** Default to fill other with empty value for compatibility with ICU spec */
+      other: "",
     },
   }
 

packages/babel-plugin-lingui-macro/src/macroJsx.test.ts

@@ -322,5 +322,33 @@ describe("jsx macro", () => {
         },
       })
     })
+
+    it("Select without other", () => {
+      const macro = createMacro()
+      const exp = parseExpression(
+        `<Select
+          value={gender}
+          male="he"
+          one="heone"
+          female="she"
+        />`
+      )
+      const tokens = macro.tokenizeNode(exp)
+      expect(tokens[0]).toMatchObject({
+        format: "select",
+        name: "gender",
+        options: {
+          female: "she",
+          male: "he",
+          offset: undefined,
+          other: "", // <- other should be filled with empty string
+        },
+        type: "arg",
+        value: {
+          name: "gender",
+          type: "Identifier",
+        },
+      })
+    })
   })
 })

packages/babel-plugin-lingui-macro/src/macroJsx.ts

@@ -297,6 +297,8 @@ export class MacroJSX {
       value: undefined,
       options: {
         offset: undefined,
+        /** Default to fill other with empty value for compatibility with ICU spec */
+        other: "",
       },
     }
 

packages/core/macro/__typetests__/index.test-d.tsx

@@ -266,7 +266,9 @@ expectType<string>(
 //// Select
 ///////////////////
 
-const gender = "male"
+type Gender = "male" | "female"
+const gender = "male" as Gender // make the type less specific on purpose
+
 expectType<string>(
   select(gender, {
     // todo: here is inconsistency between jsx macro and js.
@@ -280,6 +282,36 @@ expectType<string>(
   })
 )
 
+expectType<string>(
+  // @ts-expect-error: missing required property and other is not supplied
+  select(gender, {
+    male: "he",
+  })
+)
+
+expectType<string>(
+  // missing required property is okay, if other is supplied as fallback
+  select(gender, {
+    male: "he",
+    other: "they",
+  })
+)
+
+expectType<string>(
+  select(gender, {
+    // @ts-expect-error extra properties are not allowed
+    incorrect: "",
+  })
+)
+
+expectType<string>(
+  select(gender, {
+    // @ts-expect-error extra properties are not allowed even with other fallback
+    incorrect: "",
+    other: "they",
+  })
+)
+
 expectType<string>(
   // @ts-expect-error value could be strings only
   select(5, {

packages/core/macro/index.d.ts

@@ -154,12 +154,21 @@ export function selectOrdinal(
   options: ChoiceOptions
 ): string
 
-type SelectOptions = {
+type SelectOptionsExhaustive<T extends string = string> = {
+  [key in T]: string
+}
+
+type SelectOptionsNonExhaustive<T extends string = string> = {
   /** Catch-all option */
   other: string
-  [matches: string]: string
+} & {
+  [key in T]?: string
 }
 
+type SelectOptions<T extends string = string> =
+  | SelectOptionsExhaustive<T>
+  | SelectOptionsNonExhaustive<T>
+
 /**
  * Selects a translation based on a value
  *
@@ -180,9 +189,9 @@ type SelectOptions = {
  * @param value The key of choices to use
  * @param choices
  */
-export function select(
-  value: string | LabeledExpression<string>,
-  choices: SelectOptions
+export function select<T extends string = string>(
+  value: T | LabeledExpression<T>,
+  choices: SelectOptions<T>
 ): string
 
 /**

packages/react/macro/__typetests__/index.test-d.tsx

@@ -11,7 +11,8 @@ import {
 import React from "react"
 import { ph } from "@lingui/core/macro"
 
-const gender = "male"
+type Gender = "male" | "female"
+const gender = "male" as Gender
 const user = {
   name: "John",
 }
@@ -126,8 +127,20 @@ m = (
 // @ts-expect-error: `value` could be string only
 m = <Select value={5} other={"string"} />
 
-// @ts-expect-error: `other` required
-m = <Select value={"male"} />
+// @ts-expect-error: `other` required unless exhaustive
+m = <Select value={gender} />
+
+// @ts-expect-error: `other` required unless exhaustive
+m = <Select value={gender} _male="..." />
+
+// @ts-expect-error: `other` required unless exhaustive
+m = <Select value={gender} _female="..." />
+
+// non-exhaustive okay if other is defined
+m = <Select value={gender} _female="..." other="..." />
+
+// exhaustive okay without other
+m = <Select value={gender} _male="..." _female="..." />
 
 // @ts-expect-error: `value` required
 m = <Select other={"male"} />

packages/react/macro/index.d.ts

@@ -32,12 +32,25 @@ type PluralChoiceProps = {
   [digit: `_${number}`]: ReactNode
 } & CommonProps
 
-type SelectChoiceProps = {
-  value: string | LabeledExpression<string | number>
+type SelectChoiceOptionsExhaustive<T extends string = string> = {
+  [key in T as `_${key}`]: ReactNode
+}
+
+type SelectChoiceOptionsNonExhaustive<T extends string = string> = {
   /** Catch-all option */
   other: ReactNode
-  [option: `_${string}`]: ReactNode
-} & CommonProps
+} & {
+  [key in T as `_${key}`]?: ReactNode
+}
+
+type SelectChoiceOptions<T extends string = string> =
+  | SelectChoiceOptionsExhaustive<T>
+  | SelectChoiceOptionsNonExhaustive<T>
+
+type SelectChoiceProps<T extends string = string> = {
+  value: T | LabeledExpression<T>
+} & SelectChoiceOptions<T> &
+  CommonProps
 
 /**
  * Trans is the basic macro for static messages,
@@ -105,7 +118,9 @@ export const SelectOrdinal: VFC<PluralChoiceProps>
  * />
  * ```
  */
-export const Select: VFC<SelectChoiceProps>
+export const Select: {
+  <T extends string = string>(props: SelectChoiceProps<T>): React.JSX.Element
+}
 
 declare function _t(descriptor: MacroMessageDescriptor): string
 declare function _t(