feat(add): write v0 examples into a project from the registry - #27
Draft
johnleider wants to merge 1 commit into
Draft
feat(add): write v0 examples into a project from the registry#27johnleider wants to merge 1 commit into
johnleider wants to merge 1 commit into
Conversation
`vuetify add` only handled integrations. It now also resolves a name against the v0 registry, so `vuetify add dialog` copies a runnable, styled example in instead of leaving the user to find it in the docs and paste it by hand. It copies the example, not the primitive's source. v0 is a published package, so ejecting `Dialog` itself would fork a consumer off the upgrade path for no gain; the file they cannot get today is the one that actually renders. The styling preflight is the part that makes this work at all. Examples style themselves with semantic utilities (`bg-primary`, `text-on-surface`), which need two layers: `createThemePlugin` to emit the `--v0-*` custom properties, and an UnoCSS or Tailwind config to map them. Copying the markup without them produces something that looks broken and reads as v0's fault, so `add` detects both, offers the patch, and warns when the theme plugin is absent. The UnoCSS config is edited through magicast — appending the block would leave the file syntactically invalid — and existing colors are preserved. Non-interactive runs stay unblocked and non-destructive: `--yes` picks the canonical example, refuses to guess between ambiguous names, and skips existing files rather than clobbering them, leaving `--overwrite` as the explicit opt-in. New strings are English-only; `enableFallback` covers ru until translated.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Makes
npx vuetify add dialogwork: it resolves a name against the v0 registry and copies a runnable, styled example into the project.Depends on vuetifyjs/0#721, which publishes the registry. Until that merges, drive this with
--registry <origin>.It copies the example, not the primitive
v0 is a published package —
pnpm add @vuetify/v0already gets youDialog, so ejecting the primitive's source would fork a consumer off the upgrade path for nothing. v0 is also headless, so a bare import renders nothing at all. The file a user cannot get today is the one that actually shows something, so that is what gets written.The styling preflight is the part that matters
Examples style themselves with semantic utilities —
bg-primary,text-on-surface,border-divider. Those need two independent layers present:createThemePlugin, which emits the--v0-*custom propertiesCopy the markup without them and the result looks broken, and it reads as v0's fault. So
adddetects both, offers the patch, and warns when the theme plugin is missing. A project scaffolded bycreate-vuetify0already has both, so this is a no-op there.The UnoCSS config is edited through magicast rather than appended to — appending leaves the file syntactically invalid, which the first end-to-end run caught. Colors the project already defines are preserved. A Tailwind stylesheet takes an appended
@theme inlineblock, which is valid CSS. With neither engine present, both snippets are printed rather than guessing at one.Surface
vuetify addwith no argument lists integrations and registry items together, so neither is hidden behind knowing its name.add eslintand theadd mcpdeprecation are unchanged.Names resolve exactly first, then by stripping the
create/useprefix (add popoverfindsusePopover), then loosely. Ambiguity prompts.Non-interactive behavior
--yesnever blocks and never destroys:--overwriteis the explicit opt-inVerified
Driven end-to-end against a locally served registry (93 items) across scratch projects:
brandcolor preserved@theme inlineappended tosrc/style.csscreate-data-table/basic/, no collision--yespnpm lint:fixandpnpm buildcleanNote
New i18n strings are English-only.
enableFallbackcoversruin the meantime — happy to hold for translations if you would rather they land together.