@typespec/emitter-framework 0.3.0-dev.2 → 0.3.0-dev.4

package/src/typescript/components/interface-declaration.tsx

@@ -1,3 +1,4 @@
+import * as ay from "@alloy-js/core";
 import { Children, refkey as getRefkey, mapJoin } from "@alloy-js/core";
 import * as ts from "@alloy-js/typescript";
 import { Interface, Model, ModelProperty, Operation, RekeyableMap } from "@typespec/compiler";
@@ -34,7 +35,7 @@ export function InterfaceDeclaration(props: InterfaceDeclarationProps) {
 
   const extendsType = props.extends ?? getExtendsType(props.type);
 
-  const members = props.type ? membersFromType(props.type) : [];
+  const members = props.type ? [membersFromType(props.type)] : [];
 
   const children = [...members];
 
@@ -44,7 +45,8 @@ export function InterfaceDeclaration(props: InterfaceDeclarationProps) {
     children.push(props.children);
   }
 
-  return <ts.InterfaceDeclaration
+  return (
+    <ts.InterfaceDeclaration
       default={props.default}
       export={props.export}
       kind={props.kind}
@@ -53,7 +55,8 @@ export function InterfaceDeclaration(props: InterfaceDeclarationProps) {
       extends={extendsType}
     >
       {children}
-    </ts.InterfaceDeclaration>;
+    </ts.InterfaceDeclaration>
+  );
 }
 
 function isTypedInterfaceDeclarationProps(
@@ -69,12 +72,14 @@ export interface InterfaceExpressionProps extends ts.InterfaceExpressionProps {
 export function InterfaceExpression({ type, children }: InterfaceExpressionProps) {
   const members = type ? membersFromType(type) : [];
 
-  return <>
+  return (
+    <>
       {"{"}
       {members}
       {children}
       {"}"}
-    </>;
+    </>
+  );
 }
 
 function getExtendsType(type: Model | Interface): Children | undefined {
@@ -112,10 +117,14 @@ function getExtendsType(type: Model | Interface): Children | undefined {
     return undefined;
   }
 
-  return mapJoin(extending, (ext) => ext, { joiner: "," });
+  return mapJoin(
+    () => extending,
+    (ext) => ext,
+    { joiner: "," },
+  );
 }
 
-function membersFromType(type: Model | Interface) {
+function membersFromType(type: Model | Interface): Children {
   let typeMembers: RekeyableMap<string, ModelProperty | Operation> | undefined;
   if ($.model.is(type)) {
     typeMembers = $.model.getProperties(type);
@@ -134,7 +143,11 @@ function membersFromType(type: Model | Interface) {
     typeMembers = createRekeyableMap(type.operations);
   }
 
-  return mapJoin(typeMembers, (_, prop) => <InterfaceMember type={prop} />, {
-    joiner: "\n",
-  });
+  return (
+    <ay.For each={Array.from(typeMembers.entries())} line>
+      {([_, prop]) => {
+        return <InterfaceMember type={prop} />;
+      }}
+    </ay.For>
+  );
 }

package/src/typescript/components/interface-member.tsx

@@ -27,16 +27,20 @@ export function InterfaceMember({ type, optional }: InterfaceMemberProps) {
       unpackedType = part.type;
     }
 
-    return <>
+    return (
+      <>
         "{name}"{optionality}: <TypeExpression type={unpackedType} />;
-      </>;
+      </>
+    );
   }
 
   if ($.operation.is(type)) {
     const returnType = <TypeExpression type={type.returnType} />;
     const params = <FunctionDeclaration.Parameters type={type.parameters} />;
-    return <>
+    return (
+      <>
         {name}({params}): {returnType};
-      </>;
+      </>
+    );
   }
 }

package/src/typescript/components/record-expression.tsx

@@ -8,6 +8,6 @@ export interface RecordExpressionProps {
 
 export function RecordExpression({ elementType }: RecordExpressionProps) {
   return code`
-  Record<string, ${<TypeExpression type={elementType} />}>
+  Record<string, ${(<TypeExpression type={elementType} />)}>
   `;
 }

package/src/typescript/components/static-serializers.tsx

@@ -3,7 +3,13 @@ import * as ts from "@alloy-js/typescript";
 
 export const DateRfc3339SerializerRefkey = refkey();
 export function DateRfc3339Serializer() {
-  return <ts.FunctionDeclaration export name="DateRfc3339Serializer" returnType="string" refkey={DateRfc3339SerializerRefkey}>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="DateRfc3339Serializer"
+      returnType="string"
+      refkey={DateRfc3339SerializerRefkey}
+    >
       <ts.FunctionDeclaration.Parameters>date?: Date | null</ts.FunctionDeclaration.Parameters>
       {code`
         if (!date) {
@@ -12,12 +18,19 @@ export function DateRfc3339Serializer() {
 
         return date.toISOString();
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 export const DateRfc7231SerializerRefkey = refkey();
 export function DateRfc7231Serializer() {
-  return <ts.FunctionDeclaration export name="DateRfc7231Serializer" returnType="string" refkey={DateRfc7231SerializerRefkey}>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="DateRfc7231Serializer"
+      returnType="string"
+      refkey={DateRfc7231SerializerRefkey}
+    >
       <ts.FunctionDeclaration.Parameters>date?: Date | null</ts.FunctionDeclaration.Parameters>
       {code`
         if (!date) {
@@ -26,12 +39,19 @@ export function DateRfc7231Serializer() {
 
         return date.toUTCString();
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 export const DateDeserializerRefkey = refkey();
 export function DateDeserializer() {
-  return <ts.FunctionDeclaration export name="DateDeserializer" returnType="Date" refkey={DateDeserializerRefkey}>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="DateDeserializer"
+      returnType="Date"
+      refkey={DateDeserializerRefkey}
+    >
       <ts.FunctionDeclaration.Parameters>date?: string | null</ts.FunctionDeclaration.Parameters>
       {code`
         if (!date) {
@@ -40,12 +60,19 @@ export function DateDeserializer() {
 
         return new Date(date);
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 export const DateUnixTimestampDeserializerRefkey = refkey();
 export function DateUnixTimestampDeserializer() {
-  return <ts.FunctionDeclaration export name="DateUnixTimestampDeserializer" returnType="Date" refkey={DateUnixTimestampDeserializerRefkey}>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="DateUnixTimestampDeserializer"
+      returnType="Date"
+      refkey={DateUnixTimestampDeserializerRefkey}
+    >
       <ts.FunctionDeclaration.Parameters>date?: number | null</ts.FunctionDeclaration.Parameters>
       {code`
         if (!date) {
@@ -54,12 +81,19 @@ export function DateUnixTimestampDeserializer() {
 
         return new Date(date * 1000);
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 export const DateRfc7231DeserializerRefkey = refkey();
 export function DateRfc7231Deserializer() {
-  return <ts.FunctionDeclaration export name="DateRfc7231Deserializer" returnType="Date" refkey={DateRfc7231DeserializerRefkey}>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="DateRfc7231Deserializer"
+      returnType="Date"
+      refkey={DateRfc7231DeserializerRefkey}
+    >
       <ts.FunctionDeclaration.Parameters>date?: string | null</ts.FunctionDeclaration.Parameters>
       {code`
         if (!date) {
@@ -68,12 +102,19 @@ export function DateRfc7231Deserializer() {
 
         return new Date(date);
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 export const DateUnixTimestampSerializerRefkey = refkey();
 export function DateUnixTimestampSerializer() {
-  return <ts.FunctionDeclaration export name="DateUnixTimestampSerializer" returnType="number" refkey={DateUnixTimestampSerializerRefkey}>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="DateUnixTimestampSerializer"
+      returnType="number"
+      refkey={DateUnixTimestampSerializerRefkey}
+    >
       <ts.FunctionDeclaration.Parameters>date?: Date | null</ts.FunctionDeclaration.Parameters>
       {code`
         if (!date) {
@@ -82,15 +123,24 @@ export function DateUnixTimestampSerializer() {
 
         return Math.floor(date.getTime() / 1000);
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 export const RecordSerializerRefkey = refkey();
 export function RecordSerializer() {
   const recordType = `Record<string, any>`;
   const convertFnType = `(item: any) => any`;
-  return <ts.FunctionDeclaration export name="RecordSerializer" returnType={recordType} refkey={RecordSerializerRefkey}>
-      <ts.FunctionDeclaration.Parameters>record?: {recordType}, convertFn?: {convertFnType}</ts.FunctionDeclaration.Parameters>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="RecordSerializer"
+      returnType={recordType}
+      refkey={RecordSerializerRefkey}
+    >
+      <ts.FunctionDeclaration.Parameters>
+        record?: {recordType}, convertFn?: {convertFnType}
+      </ts.FunctionDeclaration.Parameters>
       {code`
         if (!record) {
           return record as any;
@@ -106,15 +156,24 @@ export function RecordSerializer() {
 
         return output;
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 export const ArraySerializerRefkey = refkey();
 export function ArraySerializer() {
   const arrayType = `any[]`;
   const convertFnType = `(item: any) => any`;
-  return <ts.FunctionDeclaration export name="ArraySerializer" returnType={arrayType} refkey={ArraySerializerRefkey}>
-      <ts.FunctionDeclaration.Parameters>items?: {arrayType}, convertFn?: {convertFnType}</ts.FunctionDeclaration.Parameters>
+  return (
+    <ts.FunctionDeclaration
+      export
+      name="ArraySerializer"
+      returnType={arrayType}
+      refkey={ArraySerializerRefkey}
+    >
+      <ts.FunctionDeclaration.Parameters>
+        items?: {arrayType}, convertFn?: {convertFnType}
+      </ts.FunctionDeclaration.Parameters>
       {code`
         if (!items) {
           return items as any;
@@ -132,5 +191,6 @@ export function ArraySerializer() {
 
         return output;
       `}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }

package/src/typescript/components/type-alias-declaration.tsx

@@ -24,10 +24,12 @@ export function TypeAliasDeclaration(props: TypeAliasDeclarationProps) {
   }
 
   const name = ts.useTSNamePolicy().getName(originalName, "type");
-  return <ts.TypeDeclaration {...props} name={name}  refkey={props.refkey ?? getRefkey(props.type)}>
-    <TypeExpression type={props.type} />
-    {props.children}
-  </ts.TypeDeclaration>;
+  return (
+    <ts.TypeDeclaration {...props} name={name} refkey={props.refkey ?? getRefkey(props.type)}>
+      <TypeExpression type={props.type} />
+      {props.children}
+    </ts.TypeDeclaration>
+  );
 }
 
 function isTypedAliasDeclarationProps(

package/src/typescript/components/type-declaration.tsx

@@ -14,7 +14,7 @@ export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
 
 export function TypeDeclaration(props: TypeDeclarationProps) {
   if (!props.type) {
-    return <ts.TypeDeclaration {...props as WithRequired<ts.TypeDeclarationProps, "name">} />;
+    return <ts.TypeDeclaration {...(props as WithRequired<ts.TypeDeclarationProps, "name">)} />;
   }
 
   const { type, ...restProps } = props;

package/src/typescript/components/type-expression.tsx

@@ -1,4 +1,4 @@
-import { refkey } from "@alloy-js/core";
+import { For, refkey } from "@alloy-js/core";
 import { Reference, ValueExpression } from "@alloy-js/typescript";
 import { IntrinsicType, Model, Scalar, Type } from "@typespec/compiler";
 import { $ } from "@typespec/compiler/experimental/typekit";
@@ -36,13 +36,15 @@ export function TypeExpression(props: TypeExpressionProps) {
     case "UnionVariant":
       return <TypeExpression type={type.type} />;
     case "Tuple":
-      return <>
-          [{type.values.map((element) => (
-            <>
-              <TypeExpression type={element} />,
-            </>
-          ))}]
-        </>;
+      return (
+        <>
+          [
+          <For each={type.values} comma line>
+            {(element) => <TypeExpression type={element} />}
+          </For>
+          ]
+        </>
+      );
     case "ModelProperty":
       return <TypeExpression type={type.type} />;
     case "Model":

package/src/typescript/components/type-transform.tsx

@@ -1,4 +1,4 @@
-import { Children, code, mapJoin, Refkey, refkey } from "@alloy-js/core";
+import { Children, code, For, mapJoin, Refkey, refkey } from "@alloy-js/core";
 import * as ts from "@alloy-js/typescript";
 import {
   Discriminator,
@@ -45,7 +45,9 @@ function UnionTransformExpression(props: UnionTransformProps) {
     return null;
   }
 
-  return <DiscriminateExpression type={props.type} discriminator={discriminator} target={props.target} />;
+  return (
+    <DiscriminateExpression type={props.type} discriminator={discriminator} target={props.target} />
+  );
 }
 
 interface DiscriminateExpressionProps {
@@ -60,20 +62,19 @@ function DiscriminateExpression(props: DiscriminateExpressionProps) {
   const discriminatorRef = `item.${props.discriminator.propertyName}`;
 
   const unhandledVariant = `
-  \n\nconsole.warn(\`Received unknown snake kind: \${${discriminatorRef}}\`); 
+  \n\nconsole.warn(\`Received unknown kind: \${${discriminatorRef}}\`); 
   return item as any;
   `;
 
-  return mapJoin(
-    discriminatedUnion.variants,
-    (name, variant) => {
-      return code`
-    if( ${discriminatorRef} === ${JSON.stringify(name)}) {
-      return ${<TypeTransformCall type={variant} target={props.target} castInput itemPath={["item"]}/>}
-    }
-    `;
-    },
-    { joiner: "\n\n", ender: unhandledVariant },
+  return (
+    <For each={discriminatedUnion.variants} ender={unhandledVariant}>
+      {(name, variant) => {
+        return code`
+      if( ${discriminatorRef} === ${JSON.stringify(name)}) {
+        return ${(<TypeTransformCall type={variant} target={props.target} castInput itemPath={["item"]} />)}
+      }`;
+      }}
+    </For>
   );
 }
 
@@ -113,9 +114,16 @@ export function TypeTransformDeclaration(props: TypeTransformProps) {
     const discriminator = $.type.getDiscriminator(props.type);
 
     transformExpression = discriminator ? (
-      <DiscriminateExpression type={props.type} discriminator={discriminator} target={props.target} />
+      <DiscriminateExpression
+        type={props.type}
+        discriminator={discriminator}
+        target={props.target}
+      />
     ) : (
-      <>return <ModelTransformExpression  type={props.type} itemPath={["item"]} target={props.target} />;</>
+      <>
+        return{" "}
+        <ModelTransformExpression type={props.type} itemPath={["item"]} target={props.target} />;
+      </>
     );
   } else if ($.union.is(props.type)) {
     transformExpression = <UnionTransformExpression type={props.type} target={props.target} />;
@@ -130,7 +138,8 @@ export function TypeTransformDeclaration(props: TypeTransformProps) {
 
   const ref = props.refkey ?? getTypeTransformerRefkey(props.type, props.target);
 
-  return <ts.FunctionDeclaration
+  return (
+    <ts.FunctionDeclaration
       export
       name={functionName}
       refkey={ref}
@@ -138,7 +147,8 @@ export function TypeTransformDeclaration(props: TypeTransformProps) {
       returnType={returnType}
     >
       {transformExpression}
-    </ts.FunctionDeclaration>;
+    </ts.FunctionDeclaration>
+  );
 }
 
 /**
@@ -188,13 +198,14 @@ export function ModelTransformExpression(props: ModelTransformExpressionProps) {
 
   let baseModelTransform: Children = null;
   if (props.type.baseModel) {
-    baseModelTransform = code`...${<ModelTransformExpression type={props.type.baseModel} itemPath={props.itemPath} target={props.target} optionsBagName={props.optionsBagName} />},\n`;
+    baseModelTransform = code`...${(<ModelTransformExpression type={props.type.baseModel} itemPath={props.itemPath} target={props.target} optionsBagName={props.optionsBagName} />)},\n`;
   }
 
-  return <ts.ObjectExpression>
+  return (
+    <ts.ObjectExpression>
       {baseModelTransform}
       {mapJoin(
-        modelProperties,
+        () => modelProperties,
         (_, property) => {
           const unpackedType = $.httpPart.unpack(property.type) ?? property.type;
           let targetPropertyName = property.name;
@@ -207,21 +218,30 @@ export function ModelTransformExpression(props: ModelTransformExpressionProps) {
           }
 
           const itemPath = [...(props.itemPath ?? []), sourcePropertyName];
-          if(property.optional && props.optionsBagName) {
+          if (property.optional && props.optionsBagName) {
             itemPath.unshift(`${props.optionsBagName}?`);
           }
 
-          let value = <TypeTransformCall target={props.target} type={unpackedType} itemPath={itemPath} />
-
-          if(property.optional && needsTransform(unpackedType)) {
-            value = <>{itemPath.join(".")} ? <TypeTransformCall target={props.target} type={unpackedType} itemPath={itemPath} /> : {itemPath.join(".")}</>
+          let value = (
+            <TypeTransformCall target={props.target} type={unpackedType} itemPath={itemPath} />
+          );
+
+          if (property.optional && needsTransform(unpackedType)) {
+            value = (
+              <>
+                {itemPath.join(".")} ?{" "}
+                <TypeTransformCall target={props.target} type={unpackedType} itemPath={itemPath} />{" "}
+                : {itemPath.join(".")}
+              </>
+            );
           }
 
           return <ts.ObjectProperty name={JSON.stringify(targetPropertyName)} value={value} />;
         },
-        { joiner: ",\n" }
+        { joiner: ",\n" },
       )}
-    </ts.ObjectExpression>;
+    </ts.ObjectExpression>
+  );
 }
 
 interface TransformReferenceProps {
@@ -239,13 +259,13 @@ function TransformReference(props: TransformReferenceProps) {
 
   if ($.model.is(props.type) && $.array.is(props.type)) {
     return code`
-  (i: any) => ${<ts.FunctionCallExpression refkey={ArraySerializerRefkey} args={["i", <TransformReference target={props.target} type={$.array.getElementType(props.type)} />]} />}
+  (i: any) => ${(<ts.FunctionCallExpression target={ArraySerializerRefkey} args={["i", <TransformReference target={props.target} type={$.array.getElementType(props.type)} />]} />)}
     `;
   }
 
   if ($.model.is(props.type) && $.record.is(props.type)) {
     return code`
-  (i: any) => ${<ts.FunctionCallExpression refkey={RecordSerializerRefkey} args={["i", <TransformReference target={props.target} type={$.record.getElementType(props.type)} />]} />}
+  (i: any) => ${(<ts.FunctionCallExpression target={RecordSerializerRefkey} args={["i", <TransformReference target={props.target} type={$.record.getElementType(props.type)} />]} />)}
     `;
   }
 
@@ -328,39 +348,56 @@ export function TypeTransformCall(props: TypeTransformCallProps) {
     const unpackedElement =
       $.httpPart.unpack($.array.getElementType(transformType)) ??
       $.array.getElementType(transformType);
-    return <ts.FunctionCallExpression
-        refkey={ArraySerializerRefkey}
-        args={[
-          itemName,
-          <TransformReference target={props.target} type={unpackedElement} />,
-        ]}
-      />;
+    return (
+      <ts.FunctionCallExpression
+        target={ArraySerializerRefkey}
+        args={[itemName, <TransformReference target={props.target} type={unpackedElement} />]}
+      />
+    );
   }
 
   if ($.model.is(transformType) && $.record.is(transformType)) {
     const unpackedElement =
       $.httpPart.unpack($.record.getElementType(transformType)) ??
       $.record.getElementType(transformType);
-    return <ts.FunctionCallExpression
-        refkey={RecordSerializerRefkey}
-        args={[
-          itemName,
-          <TransformReference target={props.target} type={unpackedElement} />,
-        ]}
-      />;
+    return (
+      <ts.FunctionCallExpression
+        target={RecordSerializerRefkey}
+        args={[itemName, <TransformReference target={props.target} type={unpackedElement} />]}
+      />
+    );
   }
 
   if ($.scalar.isUtcDateTime(transformType)) {
-    return <ts.FunctionCallExpression refkey={props.target === "application" ? DateDeserializerRefkey : DateRfc3339SerializerRefkey} args={[itemName]} />;
+    return (
+      <ts.FunctionCallExpression
+        target={
+          props.target === "application" ? DateDeserializerRefkey : DateRfc3339SerializerRefkey
+        }
+        args={[itemName]}
+      />
+    );
   }
 
   if ($.model.is(transformType)) {
     if ($.model.isExpresion(transformType)) {
       const effectiveModel = $.model.getEffectiveModel(transformType);
 
-      return <ModelTransformExpression type={effectiveModel} itemPath={itemPath} target={props.target} optionsBagName={props.optionsBagName} />;
+      return (
+        <ModelTransformExpression
+          type={effectiveModel}
+          itemPath={itemPath}
+          target={props.target}
+          optionsBagName={props.optionsBagName}
+        />
+      );
     }
-    return <ts.FunctionCallExpression refkey={ getTypeTransformerRefkey(transformType, props.target)} args={[itemName]} />;
+    return (
+      <ts.FunctionCallExpression
+        target={getTypeTransformerRefkey(transformType, props.target)}
+        args={[itemName]}
+      />
+    );
   }
 
   return itemName;

package/src/typescript/components/union-declaration.tsx

@@ -28,9 +28,11 @@ export function UnionDeclaration(props: UnionDeclarationProps) {
 
   const name = ts.useTSNamePolicy().getName(originalName!, "type");
 
-  return <ts.TypeDeclaration {...props} name={name} refkey={refkey}>
+  return (
+    <ts.TypeDeclaration {...props} name={name} refkey={refkey}>
       <UnionExpression type={type}>{coreProps.children}</UnionExpression>
-    </ts.TypeDeclaration>;
+    </ts.TypeDeclaration>
+  );
 }
 
 function isTypedUnionDeclarationProps(

package/src/typescript/components/union-expression.tsx

@@ -1,7 +1,9 @@
-import { Children, mapJoin } from "@alloy-js/core";
+import * as ay from "@alloy-js/core";
+import { Children } from "@alloy-js/core";
 import * as ts from "@alloy-js/typescript";
-import { Enum, Union } from "@typespec/compiler";
-import { TypeExpression } from "./type-expression.js";
+import { Enum, EnumMember, Union, UnionVariant } from "@typespec/compiler";
+import { $ } from "@typespec/compiler/experimental/typekit";
+import { TypeExpression } from "./type-expression.jsx";
 
 export interface UnionExpressionProps {
   type: Union | Enum;
@@ -9,28 +11,29 @@ export interface UnionExpressionProps {
 }
 
 export function UnionExpression({ type, children }: UnionExpressionProps) {
-  let variants: any[];
+  const items = ($.union.is(type) ? type.variants : type.members) as Map<
+    string,
+    UnionVariant | EnumMember
+  >;
 
-  if (type.kind === "Enum") {
-    variants = mapJoin(
-      type.members,
-      (_, value) => {
-        return <ts.ValueExpression jsValue={value.value ?? value.name} />;
-      },
-      { joiner: " | " },
-    );
-  } else {
-    variants = mapJoin(
-      type.variants,
-      (_, variant) => {
-        return <TypeExpression type={variant.type} />;
-      },
-      { joiner: " | " },
-    );
-  }
+  const variants = (
+    <ay.For joiner={" | "} each={items}>
+      {(_, value) => {
+        if ($.enumMember.is(value)) {
+          return <ts.ValueExpression jsValue={value.value ?? value.name} />;
+        } else {
+          return <TypeExpression type={value.type} />;
+        }
+      }}
+    </ay.For>
+  );
 
   if (children || (Array.isArray(children) && children.length)) {
-    return <>{variants} {` | ${children}`}</>;
+    return (
+      <>
+        {variants} {` | ${children}`}
+      </>
+    );
   }
 
   return variants;