vendor plugins

src/__tests__/attr.test.ts

@@ -60,4 +60,115 @@ describe("attr", () => {
 
     matchSnapshot(files);
   });
+
+  it.only("fails", async () => {
+    const { files } = await compileESBuild({
+      clsx: "emotion",
+      expectFiles: 2,
+      javascript: /* tsx */ `
+
+type Type = "dependencies" | "devDependencies" | "peerDependencies"
+
+const Version = classed("span", tw\`text-[var(--color-fg-muted)]\`)
+
+function TreeItem({
+  name,
+  version,
+  type,
+}: {
+  name: string
+  version: string
+  type: Type
+}) {
+  const [open, toggle] = useToggle(false)
+
+  const query = useQuery({
+    ...getRegistryPackageInfo(name),
+    enabled: open,
+  })
+
+  const versions = query.data ? Object.keys(query.data.versions) : undefined
+  const matchingVersion = versions
+    ? semverMaxSatisfying(versions, version)
+    : undefined
+  const currentVersion =
+    matchingVersion != null ? query.data?.versions[matchingVersion] : undefined
+  const data = currentVersion
+    ? Object.entries(currentVersion[type] ?? {})
+    : undefined
+  const isDeprecated = true
+
+  const hasNoDeps = data?.length === 0
+
+  const Icon = hasNoDeps ? SmallMinus : open ? ChevronDown : ChevronRight
+
+  return (
+    <li data-loading={query.isLoading}>
+      <div css="flex items-center gap-1 ps-0">
+        <span css="leading-3">
+          <Icon
+            className={Classes.TREE_NODE_CARET}
+            css={["min-w-0 p-0", hasNoDeps && "cursor-default"]}
+            onClick={hasNoDeps ? undefined : toggle}
+          />
+        </span>
+        <Link href={\`/package/\${name}\`}>{name}</Link>
+        <span
+          css={[
+            "text-[var(--color-fg-muted)]",
+            isDeprecated && "italic line-through opacity-80",
+          ]}
+        >
+          {version}
+        </span>
+      </div>
+      {!open || hasNoDeps ? null : query.error ? (
+        <div css="mb-2 ml-4 mt-1 max-w-96">
+          <Callout compact intent={Intent.DANGER} css="rounded-md">
+            {(query.error as Error).message}
+          </Callout>
+        </div>
+      ) : data ? (
+        <ul className={Classes.LIST} css="ml-0 list-none">
+          {data.map(([dep, version]) => (
+            <TreeItem key={dep} name={dep} version={version} type={type} />
+          ))}
+        </ul>
+      ) : (
+        <div className={Classes.SKELETON} css="mb-2 ml-5 mt-1 h-4 w-40" />
+      )}
+    </li>
+  )
+}
+
+export function DepList({
+  title,
+  deps,
+  type,
+}: {
+  title: string
+  deps: Record<string, string>
+  count?: number
+  type: Type
+}) {
+  const entries = Object.entries(deps)
+  return (
+    <div className="wmde-markdown-var">
+      <H4>
+        {title} ({entries.length})
+      </H4>
+      <ul className={Classes.LIST} css="list-none p-0">
+        {entries.map(([dep, version]) => (
+          <TreeItem key={dep} name={dep} version={version} type={type} />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+      `,
+    });
+
+    files;
+  });
 });