Skip to content

feat: shadcn-svelte renderer#227

Open
maxffarrell wants to merge 9 commits intovercel-labs:mainfrom
maxffarrell:feat/shadcn-svelte-renderer
Open

feat: shadcn-svelte renderer#227
maxffarrell wants to merge 9 commits intovercel-labs:mainfrom
maxffarrell:feat/shadcn-svelte-renderer

Conversation

@maxffarrell
Copy link

@maxffarrell maxffarrell commented Mar 18, 2026

reforked, closed #174

@vercel
Copy link
Contributor

vercel bot commented Mar 18, 2026

@maxffarrell is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

maxffarrell and others added 2 commits March 17, 2026 21:36
…n-render/shadcn-svelte

- Add /index.js extensions to all ../ui/* imports (NodeNext moduleResolution)
- Type shadcnComponents as Record<string, Component<any>> to fix d.ts generation
- Call getBoundProp() once at top level instead of inside a binding() function
  called from event handlers (getContext() only works during initialization)
- Move getOptionalValidationContext() call to top level; update createValidation()
  to accept the context as first param instead of calling getContext() itself
- Wrap validation.register() in untrack() to break the fieldConfigs read-write
  cycle that caused effect_update_depth_exceeded in tests
- Fix implicit any on Input onkeydown handler (KeyboardEvent type)
- Use untrack() for $state() initializers that read reactive props values
- Call getStateValue() once at top level in Dialog/Drawer (not in a function
  called from event handlers)
- Fix test fixtures: use named imports { StateProvider, ValidationProvider }
- Add server.deps.inline for bits-ui and @lucide/svelte so vitest can process
  their .svelte source files; add root svelte.config.js with runes: true
- Add role/aria-modal/tabindex/onkeydown a11y attributes to Dialog and Drawer
- Fix self-closing non-void elements in Skeleton, Spinner, Textarea

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@socket-security
Copy link

socket-security bot commented Mar 19, 2026

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addedvaul-svelte@​1.0.0-next.7991008881100
Addedembla-carousel-svelte@​8.6.010010010084100
Added@​fontsource-variable/​inter@​5.2.8100100848490
Added@​internationalized/​date@​3.12.0991008797100
Addedsvelte@​5.54.1881008898100
Addedbits-ui@​2.16.3991009195100
Addedsvelte-check@​4.4.59910010096100
Added@​lucide/​svelte@​0.577.01001009796100

View full report

@maxffarrell maxffarrell marked this pull request as ready for review March 21, 2026 04:38
Copy link
Contributor

@vercel vercel bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

New @json-render/shadcn-svelte package is not included in the changeset fixed version group, causing it to be versioned independently from all other @json-render/* packages.

Fix on Vercel

@SikandarJODD
Copy link

SikandarJODD commented Mar 21, 2026

Any Update ?? @ctate

Copy link
Collaborator

@ctate ctate left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much for this contribution, @maxffarrell — implementing all 36 components with proper Svelte 5 runes, state bindings, and validation support is a huge effort and the quality is genuinely impressive! Before we can merge, there are a few things to address:

Must Fix

1. .changeset/config.json — Invalid JSON

Line 26 is missing a comma after "@json-render/shadcn-svelte" before "@json-render/ink". This breaks pnpm changeset commands.

2. Slider.svelte — Type errors (pnpm type-check fails)

The bits-ui Slider component expects different types for single-thumb mode. The component passes value={[value]} (array) and defines handleChange(next: number[]), but the types don't align. This causes svelte-check to fail.

3. Root-level svelte.config.js — New file at monorepo root

This file didn't exist on the base branch. Adding a root-level Svelte config could affect other Svelte packages/apps in the monorepo (e.g., examples/svelte-chat, packages/svelte). The packages/shadcn-svelte/svelte.config.js already has its own config. Please either remove the root config or explain why it's needed.

4. package.jsonpackageManager version bump

The packageManager field changed from pnpm@10.29.3 to pnpm@10.32.1. This is unrelated to the shadcn-svelte feature and should be reverted to keep the diff focused.

Should Fix

5. Pagination.svelte — Doesn't use shadcn Button component

Uses raw <button> elements with inline Tailwind classes instead of the shadcn Button UI component, which is inconsistent with the rest of the library.

6. app.css — Global styles in a library package

The CSS includes @import "@fontsource-variable/inter" and global body/html style overrides. For a library package, shipping global styles that override consumer pages is problematic. Consider stripping the global rules and letting consumers opt in.

CI Results

Check Result
Lint ✅ PASS
Type Check ❌ FAIL (2 errors in Slider.svelte)
Tests ✅ PASS (892 tests including 6 new)
Build ✅ PASS

Once these are resolved, this should be good to go!

- Fix missing comma in .changeset/config.json (invalid JSON)
- Fix Slider.svelte type errors (single-mode expects number, not array)
- Replace raw <button> with shadcn Button in Pagination.svelte
- Remove global font import and body/html overrides from app.css
- Remove root svelte.config.js (duplicates package-level config)
- Revert unrelated packageManager version bump

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@SikandarJODD
Copy link

hey @ctate
@maxffarrell has resolved all the issues you mentioned

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants