Merge remote-tracking branch 'utelecon/20231204-upgrade-compiler'

utelecon · Dec 4, 2023 · be81cbf · be81cbf
2 parents b67e529 + 9079b42
commit be81cbf
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/pages/mfa/BaseTabSelectorButton.astro b/src/components/pages/mfa/BaseTabSelectorButton.astro
@@ -1,5 +1,5 @@
 ---
-import type { Labels, Step } from "./tabs";
+import type { Labels, Selection, Step } from "./tabs";
 
 interface Props {
   step: Step;
@@ -8,50 +8,42 @@ interface Props {
 
 const { step, labels } = Astro.props;
 
-const buttonProps = Object.fromEntries<
-  astroHTML.JSX.IntrinsicElements["button"]
->(
-  ["ms_auth", "auth_app", "phone", "fido"].map((selection) => [
-    selection,
-    {
-      id: `button-${step}-${selection}`,
-      "aria-labelledby": `label-${step}-${selection}`,
-      value: selection,
-    },
-  ])
-);
+function buttonProps(selection: Selection) {
+  return {
+    id: `button-${step}-${selection}`,
+    "aria-labelledby": `label-${step}-${selection}`,
+    value: selection,
+  } satisfies astroHTML.JSX.ButtonHTMLAttributes;
+}
 
-const labelProps = Object.fromEntries<astroHTML.JSX.IntrinsicElements["label"]>(
-  ["ms_auth", "auth_app", "phone", "fido"].map((selection) => [
-    selection,
-    {
-      id: `label-${step}-${selection}`,
-      for: `button-${step}-${selection}`,
-    },
-  ])
-);
+function labelProps(selection: Selection) {
+  return {
+    id: `label-${step}-${selection}`,
+    for: `button-${step}-${selection}`,
+  } satisfies astroHTML.JSX.LabelHTMLAttributes;
+}
 ---
 
 <div class="wrapper">
-  <button {...buttonProps.ms_auth}>
-    <label {...labelProps.ms_auth}>{labels.ms_auth}</label>
+  <button {...buttonProps("ms_auth")}>
+    <label {...labelProps("ms_auth")}>{labels.ms_auth}</label>
     <slot name="ms_auth" />
   </button>
 
-  <button {...buttonProps.auth_app}>
-    <label {...labelProps.auth_app}>{labels.auth_app}</label>
+  <button {...buttonProps("auth_app")}>
+    <label {...labelProps("auth_app")}>{labels.auth_app}</label>
     <slot name="auth_app" />
   </button>
 
-  <button {...buttonProps.phone}>
-    <label {...labelProps.phone}>{labels.phone}</label>
+  <button {...buttonProps("phone")}>
+    <label {...labelProps("phone")}>{labels.phone}</label>
     <slot name="phone" />
   </button>
 
   {
     labels.fido && (
-      <button {...buttonProps.fido}>
-        <label {...labelProps.fido}>{labels.fido}</label>
+      <button {...buttonProps("fido")}>
+        <label {...labelProps("fido")}>{labels.fido}</label>
         <slot name="ms_auth" />
       </button>
     )
@@ -69,7 +61,7 @@ const labelProps = Object.fromEntries<astroHTML.JSX.IntrinsicElements["label"]>(
   document.addEventListener("DOMContentLoaded", () => {
     document
       .querySelectorAll<HTMLButtonElement>(
-        `button[id^="button"][aria-labelledby^="label"]`
+        `button[id^="button"][aria-labelledby^="label"]`,
       )
       .forEach((button) => {
         button.addEventListener("click", onClick);

diff --git a/src/components/pages/mfa/BaseTabSelectorGrid.astro b/src/components/pages/mfa/BaseTabSelectorGrid.astro
@@ -1,5 +1,5 @@
 ---
-import type { Labels } from "./tabs";
+import type { Labels, Selection, Step } from "./tabs";
 import DemiRadioButton, {
   type Props as DemiRadioButtonProps,
 } from "./DemiRadioButton.astro";
@@ -10,22 +10,14 @@ interface Props {
 
 const { labels } = Astro.props;
 
-const radioProps = Object.fromEntries(
-  ["first", "alt"].map((step) => [
-    step,
-    Object.fromEntries<DemiRadioButtonProps>(
-      ["ms_auth", "auth_app", "phone", "fido"].map((selection) => [
-        selection,
-        {
-          id: `radio-${step}-${selection}`,
-          type: "radio",
-          name: `radio-${step}`,
-          value: selection,
-        },
-      ]),
-    ),
-  ]),
-);
+function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
+  return {
+    id: `radio-${step}-${selection}`,
+    type: "radio",
+    name: `radio-${step}`,
+    value: selection,
+  };
+}
 ---
 
 <div class="wrapper">
@@ -34,32 +26,32 @@ const radioProps = Object.fromEntries(
 
   <p class="col-label">{labels.ms_auth}</p>
   <span class="col-first">
-    <DemiRadioButton {...radioProps.first.ms_auth} />
+    <DemiRadioButton {...radioProps("first", "ms_auth")} />
   </span>
   <span class="col-alt">
-    <DemiRadioButton {...radioProps.alt.ms_auth} />
+    <DemiRadioButton {...radioProps("alt", "ms_auth")} />
   </span>
   <div class="col-description">
     <slot name="ms_auth" />
   </div>
 
   <p class="col-label">{labels.auth_app}</p>
   <span class="col-first">
-    <DemiRadioButton {...radioProps.first.auth_app} />
+    <DemiRadioButton {...radioProps("first", "auth_app")} />
   </span>
   <span class="col-alt">
-    <DemiRadioButton {...radioProps.alt.auth_app} />
+    <DemiRadioButton {...radioProps("alt", "auth_app")} />
   </span>
   <div class="col-description">
     <slot name="auth_app" />
   </div>
 
   <p class="col-label">{labels.phone}</p>
   <span class="col-first">
-    <DemiRadioButton {...radioProps.first.phone} />
+    <DemiRadioButton {...radioProps("first", "phone")} />
   </span>
   <span class="col-alt">
-    <DemiRadioButton {...radioProps.alt.phone} />
+    <DemiRadioButton {...radioProps("alt", "phone")} />
   </span>
   <div class="col-description">
     <slot name="phone" />
@@ -70,10 +62,10 @@ const radioProps = Object.fromEntries(
       <>
         <p class="col-label">{labels.fido}</p>
         <span class="col-first">
-          <DemiRadioButton {...radioProps.first.fido} disabled />
+          <DemiRadioButton {...radioProps("first", "fido")} disabled />
         </span>
         <span class="col-alt">
-          <DemiRadioButton {...radioProps.alt.fido} />
+          <DemiRadioButton {...radioProps("alt", "fido")} />
         </span>
         <div class="col-description">
           <slot name="fido" />

diff --git a/src/components/pages/mfa/BaseTabs.astro b/src/components/pages/mfa/BaseTabs.astro
@@ -1,6 +1,6 @@
 ---
 import If from "@components/utils/If.astro";
-import type { Step, Labels } from "./tabs";
+import type { Step, Labels, Selection } from "./tabs";
 
 interface Props {
   step: Step;
@@ -9,49 +9,42 @@ interface Props {
 
 const { step, labels } = Astro.props;
 
-// `<button {...tabProps("select")} />` がなぜかparse errorを吐くので，対策……
-const tabProps = Object.fromEntries<astroHTML.JSX.IntrinsicElements["button"]>(
-  ["ms_auth", "auth_app", "phone", "fido"].map((selection) => [
-    selection,
-    {
-      id: `tab-${step}-${selection}`,
-      type: "button",
-      role: "tab",
-      "aria-controls": `panel-${step}-${selection}`,
-      "aria-selected": "false",
-      class: "tab",
-    },
-  ])
-);
-const panelProps = Object.fromEntries<astroHTML.JSX.IntrinsicElements["div"]>(
-  ["selector", "ms_auth", "auth_app", "phone", "fido"].map((selection) => [
-    selection,
-    {
-      id: `panel-${step}-${selection}`,
-      role: "tabpanel",
-      "aria-labelledby":
-        selection === "selector" ? undefined : `tab-${step}-${selection}`,
-      hidden: true,
-    },
-  ])
-);
+function tabProps(selection: Selection) {
+  return {
+    id: `tab-${step}-${selection}`,
+    type: "button",
+    role: "tab",
+    "aria-controls": `panel-${step}-${selection}`,
+    "aria-selected": "false",
+    class: "tab",
+  } satisfies astroHTML.JSX.ButtonHTMLAttributes;
+}
+function panelProps(selection: Selection) {
+  return {
+    id: `panel-${step}-${selection}`,
+    role: "tabpanel",
+    "aria-labelledby":
+      selection === "selector" ? undefined : `tab-${step}-${selection}`,
+    hidden: true,
+  } satisfies astroHTML.JSX.HTMLAttributes;
+}
 ---
 
 <div id={`tab-list-${step}`} class="tab-list" role="tablist">
-  <button {...tabProps.ms_auth}>{labels.ms_auth}</button>
-  <button {...tabProps.auth_app}>{labels.auth_app}</button>
-  <button {...tabProps.phone}>{labels.phone}</button>
+  <button {...tabProps("ms_auth")}>{labels.ms_auth}</button>
+  <button {...tabProps("auth_app")}>{labels.auth_app}</button>
+  <button {...tabProps("phone")}>{labels.phone}</button>
   <If cond={Boolean(labels.fido)}>
-    <button {...tabProps.fido}>{labels.fido}</button>
+    <button {...tabProps("fido")}>{labels.fido}</button>
   </If>
 </div>
 <div id={`panel-list-${step}`} class="panel-list">
-  <div {...panelProps.selector}><slot name="selector" /></div>
-  <div {...panelProps.ms_auth}><slot name="ms_auth" /></div>
-  <div {...panelProps.auth_app}><slot name="auth_app" /></div>
-  <div {...panelProps.phone}><slot name="phone" /></div>
+  <div {...panelProps("selector")}><slot name="selector" /></div>
+  <div {...panelProps("ms_auth")}><slot name="ms_auth" /></div>
+  <div {...panelProps("auth_app")}><slot name="auth_app" /></div>
+  <div {...panelProps("phone")}><slot name="phone" /></div>
   <If cond={Boolean(labels.fido)}>
-    <div {...panelProps.fido}><slot name="fido" /></div>
+    <div {...panelProps("fido")}><slot name="fido" /></div>
   </If>
 </div>
 

diff --git a/src/components/pages/mfa/tabs.ts b/src/components/pages/mfa/tabs.ts
@@ -1,6 +1,6 @@
 export type Step = "first" | "alt";
 export type Group = "intent" | Step;
-export type Selection = "select" | "ms_auth" | "auth_app" | "phone" | "fido";
+export type Selection = "selector" | "ms_auth" | "auth_app" | "phone" | "fido";
 export type Labels = Partial<Record<Selection, string>>;
 
 type Listener = (step: string, selection: string) => void;