Files
supabase/apps/ui-library/lib/process-registry.ts
abbac3b852 refactor(library): resolve registry dependencies from one source of truth (#50367)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Refactor, bug fix.

Part 1 of 6 in a stack that splits the library redesign into reviewable
pieces. This one is the foundation the rest build on and has no visual
change.

## What is the current behavior?

Three build steps each reimplement "where does this registry file land
in the user's project": `process-registry`'s `getDefaultPath`,
`registry/utils`' `uniqBy` on `file.path`, and the Markdown exporter.
They disagree, which produces real bugs:

- A Vue block whose files come from `node_modules/@supabase/vue-blocks/`
keeps its package path, so the installer writes the package folder into
the user's project.
- `registryItemAppend` builds its `docs` string from `(item.docs,
items.flatMap(...))` — a comma expression, so the item's own docs are
discarded.
- A name collision between a block file and its client's file silently
keeps one of the two.
- Install commands guess the CLI family from substrings in the item
name, so `infinite-query-composable` — a Vue block with neither "vue"
nor "nuxtjs" in its name — gets the React CLI.
- Production Vue installs use `@supabase/<name>`, but the `@supabase`
namespace is registered with shadcn, not shadcn-vue.
- `build:registry`, `build:content`, `build:markdown` and `build:llms`
run in parallel, but the last three read `public/r`.

## What is the new behavior?

`lib/registry-resolution.ts` owns installed-path derivation, first-party
dependency naming, deduplication, and cycle detection, and every
consumer calls it. `build-registry` validates the whole registry against
shadcn's schema and resolves every item, so a broken reference fails the
build instead of shipping. `clean-registry` throws rather than logging
past a failure.

Pages declare their install `framework` explicitly instead of it being
inferred, and production Vue installs use the absolute registry URL.

The build steps are serialized behind `build:prepare`, and a new
`library-tests.yml` workflow runs the library's tests, checks the
generated registry is committed, and builds the app.

## Additional context

Regenerated registry artifacts are the mechanical result of the
resolution fix — the Vue client items and the OAuth consent items that
gained their client's docs.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added explicit React and Vue framework selection for library blocks
and installation commands.
* Improved registry resolution, dependency handling, path validation,
and Vue file normalization.
* Added support for reliable local, preview, and production registry
URLs.

* **Documentation**
* Updated Vue and Nuxt installation documentation to identify the Vue
framework explicitly.

* **Bug Fixes**
* Preserved combined documentation and validated generated registry
content more consistently.

* **Tests**
* Added coverage for installation commands, registry resolution,
dependency handling, and generated artifacts.

* **Chores**
  * Added automated pull-request checks for library tests and builds.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-09-18 10:38:48 +10:00

90 lines
2.8 KiB
TypeScript

import * as fs from 'fs'
import path from 'node:path'
import { registryItemSchema, type RegistryItem } from 'shadcn/schema'
import { getInstalledPath, resolveRegistryItem, type RegistryFile } from './registry-resolution'
export interface RegistryNode {
name: string
path: string
originalPath: string
type: 'directory' | 'file'
children?: RegistryNode[]
content?: string
}
export function readRegistryItem(registryPath: string): RegistryItem {
try {
const item = registryItemSchema.parse(JSON.parse(fs.readFileSync(registryPath, 'utf-8')))
if (item.name !== path.basename(registryPath, '.json')) {
throw new Error(`Artifact name "${item.name}" does not match its filename`)
}
if (!item.files?.length || item.files.some((file) => typeof file.content !== 'string')) {
throw new Error('Expected generated registry files with source content')
}
return item
} catch (error) {
throw new Error(`Unable to read required registry artifact "${registryPath}"`, { cause: error })
}
}
/**
* Converts a flat registry array into a hierarchical file tree structure
*/
export function generateRegistryTree(registryPath: string): RegistryNode[] {
const root = readRegistryItem(registryPath)
const directory = path.dirname(registryPath)
const resolved = resolveRegistryItem(
(name) => (name === root.name ? root : readRegistryItem(path.join(directory, `${name}.json`))),
root.name
)
return registryFilesToTree(resolved.files)
}
function registryFilesToTree(files: RegistryFile[]): RegistryNode[] {
const tree: RegistryNode[] = []
const sortedRegistry = [...files].sort((a, b) =>
getInstalledPath(a).localeCompare(getInstalledPath(b))
)
for (const file of sortedRegistry) {
const itemPath = getInstalledPath(file)
const pathParts = itemPath.split('/').filter(Boolean)
let currentLevel = tree
for (let i = 0; i < pathParts.length; i++) {
const part = pathParts[i]
const isLast = i === pathParts.length - 1
const path = '/' + pathParts.slice(0, i + 1).join('/')
let node = currentLevel.find((n) => n.name === part)
// Remove any paths in the file content that point to the block directory.
const content = file
.content!.replaceAll(/@\/registry\/default\/blocks\/.+?\//gi, '@/')
.replaceAll(/@\/registry\/default\/fixtures\//gi, '@/')
.replaceAll(/@\/registry\/default\//gi, '@/')
.replaceAll(/@\/clients\/.+?\//gi, '@/')
if (!node) {
node = {
name: part,
path,
originalPath: file.path,
type: isLast ? 'file' : 'directory',
...(isLast ? { content } : { children: [] }),
}
currentLevel.push(node)
}
if (!isLast) {
node.children = node.children || []
currentLevel = node.children
}
}
}
return tree
}