starlight-package-managers 0.3.0 → 0.5.0

package/PackageManagers.astro

@@ -1,152 +1,49 @@
 ---
 import { Code, Tabs, TabItem } from '@astrojs/starlight/components'
+import type { ComponentProps } from 'astro/types'
 
-import { type CommandType, getCommand, type CommandOptions, getSupportedPkgManagers, type PackageManager } from './pkg'
+import {
+  type CommandOptions,
+  type CommandType,
+  getCommand,
+  getSupportedPkgManagers,
+  type PackageManager,
+  getIcon,
+} from './pkg'
 
 export type PackageManagersProps = Props
 
 interface Props extends CommandOptions {
   frame?: 'none' | 'terminal'
+  icons?: boolean
   pkg?: string | undefined
   pkgManagers?: PackageManager[]
   title?: string | undefined
   type?: CommandType
 }
 
-const { frame = 'terminal', pkg, pkgManagers, title = undefined, type = 'add', ...options } = Astro.props
+const { frame = 'terminal', icons = true, pkg, pkgManagers, title = undefined, type = 'add', ...options } = Astro.props
 const singlePkgManager = pkgManagers?.length === 1 ? pkgManagers[0] : undefined
 const ecFrame = frame === 'terminal' ? 'terminal' : 'code'
+
+function getTabItemProps(pkgManager: PackageManager) {
+  const props: ComponentProps<typeof TabItem> = { label: pkgManager }
+  const icon = getIcon(pkgManager) as ComponentProps<typeof TabItem>['icon']
+  if (icons && icon) props.icon = icon
+  return props
+}
 ---
 
 {
   singlePkgManager ? (
     <Code code={getCommand(singlePkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
   ) : (
-    <starlight-package-managers>
-      <Tabs>
-        {getSupportedPkgManagers(type, pkgManagers).map((pkgManager) => (
-          <TabItem label={pkgManager}>
-            <Code code={getCommand(pkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
-          </TabItem>
-        ))}
-      </Tabs>
-    </starlight-package-managers>
+    <Tabs syncKey="starlight-package-managers-pkg">
+      {getSupportedPkgManagers(type, pkgManagers).map((pkgManager) => (
+        <TabItem {...getTabItemProps(pkgManager)}>
+          <Code code={getCommand(pkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
+        </TabItem>
+      ))}
+    </Tabs>
   )
 }
-
-<style>
-  starlight-package-managers {
-    display: block;
-  }
-</style>
-
-<script>
-  customElements.define(
-    'starlight-package-managers',
-    class StarlightPackageManagers extends HTMLElement {
-      #observer: MutationObserver
-      #observerConfig: MutationObserverInit = { attributes: true, attributeFilter: ['aria-selected'] }
-
-      #tabs: NodeListOf<HTMLAnchorElement>
-
-      constructor() {
-        super()
-
-        this.#observer = new MutationObserver(this.#handleTabChange)
-        this.#tabs = this.querySelectorAll<HTMLAnchorElement>('starlight-tabs [role="tablist"] [role="tab"]')
-
-        this.observeTabs()
-      }
-
-      observeTabs = () => {
-        for (const tab of this.#tabs) {
-          this.#observer.observe(tab, this.#observerConfig)
-        }
-      }
-
-      disconnectTabs = () => {
-        this.#observer.disconnect()
-      }
-
-      #handleTabChange = (mutations: MutationRecord[]) => {
-        const pkgTabs = [...document.querySelectorAll<this>('starlight-package-managers')]
-
-        for (const pkgTab of pkgTabs) {
-          pkgTab.disconnectTabs()
-        }
-
-        let newFocusedTab: HTMLAnchorElement | null = null
-
-        for (const mutation of mutations) {
-          if (mutation.attributeName !== 'aria-selected' || !(mutation.target instanceof HTMLAnchorElement)) {
-            continue
-          }
-
-          if (mutation.target.getAttribute('aria-selected') !== 'true') {
-            continue
-          }
-
-          newFocusedTab = mutation.target
-
-          const newPkgManager = newFocusedTab.textContent?.trim() ?? ''
-          const otherTabs = pkgTabs.filter((tabs) => tabs !== this)
-
-          for (const otherTab of otherTabs) {
-            const starlightTabs = otherTab.querySelector('starlight-tabs')
-
-            if (!this.#isStarlightTabs(starlightTabs)) {
-              continue
-            }
-
-            // We cannot use the `switchTab()` method provided by Starlight as it focuses the new tab which will cause
-            // the page to scroll for every set of tabs.
-            this.#switchTabs(starlightTabs, newPkgManager)
-          }
-        }
-
-        requestAnimationFrame(() => {
-          for (const pkgTab of pkgTabs) {
-            pkgTab.observeTabs()
-          }
-
-          newFocusedTab?.focus()
-        })
-      }
-
-      // https://github.com/withastro/starlight/blob/290af4f0b5f65619fa4c65609940c3a911a7e698/packages/starlight/user-components/Tabs.astro#L116-L135
-      #switchTabs(starlightTabs: StarlightTabs, newPkgManager: string) {
-        const tabs = starlightTabs.tabs
-        const newTabIndex = tabs.findIndex((tab) => tab.textContent?.trim() === newPkgManager)
-        const newTab = tabs[newTabIndex]
-        const newPanel = starlightTabs.panels[newTabIndex]
-
-        if (!newTab || !newPanel) {
-          return
-        }
-
-        for (const tab of starlightTabs.tabs) {
-          tab.removeAttribute('aria-selected')
-          tab.setAttribute('tabindex', '-1')
-        }
-
-        for (const panel of starlightTabs.panels) {
-          panel.hidden = true
-        }
-
-        newPanel.hidden = false
-        // Restore active tab to the default tab order.
-        newTab.removeAttribute('tabindex')
-        newTab.setAttribute('aria-selected', 'true')
-      }
-
-      #isStarlightTabs(element: Element | null): element is StarlightTabs {
-        return element instanceof Element && 'tabs' in element && 'panels' in element
-      }
-    },
-  )
-
-  type StarlightTabs = Element & {
-    panels: HTMLElement[]
-    tabs: HTMLAnchorElement[]
-  }
-</script>

package/README.md

@@ -2,8 +2,8 @@
   <h1>starlight-package-managers 🗃</h1>
   <p>Quickly display npm related commands for multiple package managers in your Starlight documentation site.</p>
   <p>
-    <a href="https://github.com/HiDeoo/vercel-env-push/assets/494699/12a27480-f3ff-470f-a108-e1bf73cd9146" title="Demo of starlight-package-managers">
-      <img alt="Demo of starlight-package-managers" src="https://github.com/HiDeoo/vercel-env-push/assets/494699/12a27480-f3ff-470f-a108-e1bf73cd9146" width="520" />
+    <a href="https://github.com/HiDeoo/starlight-package-managers/assets/494699/5666eb82-4e80-4ce9-ac07-3f711e51062c" title="Demo of starlight-package-managers">
+      <img alt="Demo of starlight-package-managers" src="https://github.com/HiDeoo/starlight-package-managers/assets/494699/5666eb82-4e80-4ce9-ac07-3f711e51062c" width="520" />
     </a>
   </p>
 </div>
@@ -20,7 +20,7 @@
 
 ## Getting Started
 
-Want to get started immediately? Check out the [getting started guide](https://starlight-package-managers.vercel.app/guides/getting-started/) or a [live demo](https://starlight-package-managers.vercel.app/demo/).
+Want to get started immediately? Check out the [getting started guide](https://starlight-package-managers.vercel.app/getting-started/) or a [live demo](https://starlight-package-managers.vercel.app/demo/).
 
 ## Description
 
@@ -61,9 +61,9 @@ By this one:
 ## Features
 
 - Support for various package managers: [npm](https://www.npmjs.com), [yarn](https://yarnpkg.com), [pnpm](https://pnpm.io), [bun](https://bun.sh) & [ni](https://github.com/antfu/ni).
-- Support for various types of command: [`add`](https://starlight-package-managers.vercel.app/guides/usage/#add), [`create`](https://starlight-package-managers.vercel.app/guides/usage/#create), [`exec`](https://starlight-package-managers.vercel.app/guides/usage/#exec) & [`run`](https://starlight-package-managers.vercel.app/guides/usage/#run).
+- Support for various types of command: [`add`](https://starlight-package-managers.vercel.app/usage/#add), [`create`](https://starlight-package-managers.vercel.app/usage/#create), [`exec`](https://starlight-package-managers.vercel.app/usage/#exec) & [`run`](https://starlight-package-managers.vercel.app/usage/#run).
 - Synced tabs between each instance on the same page.
-- Customizable output with [extra arguments](https://starlight-package-managers.vercel.app/guides/usage/#extra-arguments), [comments](https://starlight-package-managers.vercel.app/guides/usage/#comment) & [prefixes](https://starlight-package-managers.vercel.app/guides/usage/#prefix).
+- Customizable output with [extra arguments](https://starlight-package-managers.vercel.app/usage/#extra-arguments), [comments](https://starlight-package-managers.vercel.app/usage/#comment) & [prefixes](https://starlight-package-managers.vercel.app/usage/#prefix).
 
 ## Documentation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-package-managers",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "Quickly display npm related commands for multiple package managers in your Starlight documentation site.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",
@@ -10,14 +10,14 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@astrojs/starlight": "0.17.0",
+    "@astrojs/starlight": "0.22.0",
     "@playwright/test": "1.36.2",
-    "astro": "4.2.6",
+    "astro": "4.3.7",
     "vitest": "0.33.0"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.17.0",
-    "astro": ">=4.0.0"
+    "@astrojs/starlight": ">=0.22.0",
+    "astro": ">=4.2.7"
   },
   "engines": {
     "node": ">=18.14.1"

package/pkg.ts

@@ -38,10 +38,22 @@ const commands: Commands = {
   },
 }
 
+const icons: Record<PackageManager, string | undefined> = {
+  npm: 'seti:npm',
+  yarn: 'seti:yarn',
+  pnpm: 'pnpm',
+  bun: 'bun',
+  ni: undefined,
+}
+
 export function getSupportedPkgManagers(type: CommandType, userPkgManagers: PackageManager[] | undefined) {
   return (userPkgManagers ?? defaultPkgManagers).filter((pkgManager) => commands[pkgManager][type] !== undefined)
 }
 
+export function getIcon(pkgManager: PackageManager) {
+  return icons[pkgManager]
+}
+
 export function getCommand(
   pkgManager: PackageManager,
   type: CommandType,