diff --git a/.changeset/fresh-astro-compiler.md b/.changeset/fresh-astro-compiler.md new file mode 100644 index 00000000000..ff31a5ed78c --- /dev/null +++ b/.changeset/fresh-astro-compiler.md @@ -0,0 +1,5 @@ +--- +'@clerk/astro': patch +--- + +Fix custom user button menu item rendering for Astro's stricter compiler. diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro index f86f5d1d679..47a732781e6 100644 --- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro +++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro @@ -29,54 +29,55 @@ const isDevMode = import.meta.env.DEV; `Clerk: component can only accept and as its children. Any other provided component will be ignored.`, ); } - return; - } + } else { + // Get the user button map from window that we set in the ``. + const userButtonComponentMap = window.__astro_clerk_component_props?.get('user-button'); - // Get the user button map from window that we set in the ``. - const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button'); + let userButton; + if (parent) { + userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`); + } else { + userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]'); + } - let userButton; - if (parent) { - userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`); - } else { - userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]'); - } + const safeId = userButton?.getAttribute('data-clerk-id'); + if (userButtonComponentMap && safeId) { + const currentOptions = userButtonComponentMap.get(safeId); - const safeId = userButton.getAttribute('data-clerk-id'); - const currentOptions = userButtonComponentMap.get(safeId); + const reorderItemsLabels = ['manageAccount', 'signOut']; + const isReorderItem = reorderItemsLabels.includes(label); - const reorderItemsLabels = ['manageAccount', 'signOut']; - const isReorderItem = reorderItemsLabels.includes(label); + let newMenuItem = { + label, + }; - let newMenuItem = { - label, - }; + if (!isReorderItem) { + newMenuItem = { + ...newMenuItem, + mountIcon: el => { + el.innerHTML = labelIcon; + }, + unmountIcon: () => { + /* What to clean up? */ + }, + }; - if (!isReorderItem) { - newMenuItem = { - ...newMenuItem, - mountIcon: el => { - el.innerHTML = labelIcon; - }, - unmountIcon: () => { - /* What to clean up? */ - }, - }; + if (href) { + newMenuItem.href = href; + } else if (open) { + newMenuItem.open = open.startsWith('/') ? open : `/${open}`; + } else if (clickIdentifier) { + const clickEvent = new CustomEvent('clerk:menu-item-click', { detail: clickIdentifier }); + newMenuItem.onClick = () => { + document.dispatchEvent(clickEvent); + }; + } + } - if (href) { - newMenuItem.href = href; - } else if (open) { - newMenuItem.open = open.startsWith('/') ? open : `/${open}`; - } else if (clickIdentifier) { - const clickEvent = new CustomEvent('clerk:menu-item-click', { detail: clickIdentifier }); - newMenuItem.onClick = () => { - document.dispatchEvent(clickEvent); - }; + userButtonComponentMap.set(safeId, { + ...currentOptions, + customMenuItems: [...(currentOptions?.customMenuItems ?? []), newMenuItem], + }); } } - - userButtonComponentMap.set(safeId, { - ...currentOptions, - customMenuItems: [...(currentOptions?.customMenuItems ?? []), newMenuItem], - });