From 81dfa091a04ea7a1fc3b4f31693238ff68c7c70d Mon Sep 17 00:00:00 2001
From: Futa IWATA <futaiwata@g.ecc.u-tokyo.ac.jp>
Date: Mon, 4 Dec 2023 11:59:27 +0900
Subject: [PATCH 1/2] upgrade @astrojs/compiler

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index edbdd54dfb..d61e75f3bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,9 +53,9 @@
       }
     },
     "node_modules/@astrojs/compiler": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.1.0.tgz",
-      "integrity": "sha512-Mp+qrNhly+27bL/Zq8lGeUY+YrdoU0eDfIlAeGIPrzt0PnI/jGpvPUdCaugv4zbCrDkOUScFfcbeEiYumrdJnw=="
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.3.2.tgz",
+      "integrity": "sha512-jkY7bCVxl27KeZsSxIZ+pqACe+g8VQUdTiSJRj/sXYdIaZlW3ZMq4qF2M17P/oDt3LBq0zLNwQr4Cb7fSpRGxQ=="
     },
     "node_modules/@astrojs/internal-helpers": {
       "version": "0.2.0",

From 9079b42ea4324fd6ad6c6ac10f48dafe20236b84 Mon Sep 17 00:00:00 2001
From: Futa IWATA <futaiwata@g.ecc.u-tokyo.ac.jp>
Date: Mon, 4 Dec 2023 12:04:48 +0900
Subject: [PATCH 2/2] change attrbutes to better syntax

---
 .../pages/mfa/BaseTabSelectorButton.astro     | 54 +++++++--------
 .../pages/mfa/BaseTabSelectorGrid.astro       | 42 +++++-------
 src/components/pages/mfa/BaseTabs.astro       | 65 +++++++++----------
 src/components/pages/mfa/tabs.ts              |  2 +-
 4 files changed, 70 insertions(+), 93 deletions(-)

diff --git a/src/components/pages/mfa/BaseTabSelectorButton.astro b/src/components/pages/mfa/BaseTabSelectorButton.astro
index 392253e7c6..c7a75ed997 100644
--- 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
index 2fbbbd965c..362b15d5b1 100644
--- 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,10 +26,10 @@ 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" />
@@ -45,10 +37,10 @@ const radioProps = Object.fromEntries(
 
   <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" />
@@ -56,10 +48,10 @@ const radioProps = Object.fromEntries(
 
   <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
index 57b5a74418..6303ce4282 100644
--- 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
index fbd083154a..2e0f2cd495 100644
--- 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;