fix(registry): ship stylesheets as registry:file so shadcn add works - #1050
Closed
Agnik47 wants to merge 1444 commits into
Closed
fix(registry): ship stylesheets as registry:file so shadcn add works#1050Agnik47 wants to merge 1444 commits into
shadcn add works#1050Agnik47 wants to merge 1444 commits into
Conversation
- Change texts: string[] to texts: React.ReactNode[] in TS variants - Move separator inside the span (encapsulated in scroller) - Replace numCopies! non-null assertion with numCopies ?? 6 - Update prop table description in demo to reflect ReactNode support - Applied consistently across all 4 variants (JS-CSS, JS-TW, TS-CSS, TS-TW) This is a non-breaking change — plain strings are valid ReactNode values, so all existing usage continues to work. The change unlocks rich content like icons, styled spans, gradients, and mixed JSX in the scrolling ticker.
Problems in the original:
- Single useEffect with all 22 props as dependencies caused a full WebGL
context teardown and canvas remount on every prop change — GPU pipeline
rebuilt from scratch for something as minor as a color tweak.
- requestAnimationFrame ran unconditionally at 60fps even when the element
was scrolled completely offscreen, burning GPU cycles with no visible output.
- No awareness of browser tab visibility — shader kept executing even in
background tabs.
Changes (applied to all 4 variants: JS-CSS, JS-TW, TS-CSS, TS-TW):
1. Split into two useEffects:
- Effect 1 ([] deps): creates renderer, canvas, geometry, program, mesh
exactly once for the lifetime of the component.
- Effect 2 (prop deps): writes directly to uniform values — zero GPU cost,
no context recreation, no canvas remount.
2. WeakMap<HTMLDivElement, GrainientCtx> bridges the two effects without
creating strong references that would leak on unmount.
3. IntersectionObserver (threshold: 0) pauses the RAF loop the moment the
canvas scrolls offscreen and resumes when it re-enters the viewport.
4. visibilitychange listener pauses the RAF loop when the browser tab is
hidden and resumes when the user returns to it.
Result: no unnecessary GPU work, dramatically lower CPU/GPU usage on pages
where the component is not in view, and instant prop updates without flicker.
…ct-ratio fix(laserflow): correct aspect-ratio scaling in shader
…ext-on-click ✨ feat(decrypted-text): add click/toggle mode & fix inViewHover re-trigger bug
…cleanup Fixes: WebGL Cleanup
…w object & fixed duplicate id in sponsors constant
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…sor-ssr-error fix: handle SSR error in TargetCursor component by checking for window object & fixed duplicate id in sponsors constant
…locity-reactnode-support feat: support ReactNode in ScrollVelocity texts prop
Fix sidebar visual bug on the sidebar navigation when scrolling down multiple times
Co-authored-by: DavidHDev <48634587+DavidHDev@users.noreply.github.com>
Revert PR DavidHDev#912 (sidebar visual bug fix)
Adds a new animated hexagonal grid background component, as requested in DavidHDev#854. Built using the same canvas-based rendering pattern as the existing Squares component. Features: - Flat-top hexagonal grid with seamless tiling animation - 5 direction options: right, left, up, down, diagonal - Configurable hex size, border color, and hover fill color - Smooth animation via requestAnimationFrame - Mouse hover detection with hex-coordinate mapping - Radial gradient overlay matching existing backgrounds - Responsive canvas with resize handling Includes all 4 component variants (JSX, JSX+Tailwind, TSX, TSX+Tailwind), demo page with customization controls, and code constants. Closes DavidHDev#854
Reworked based on owner feedback — instead of a separate Hexagons
component, extends the existing Squares component with a `shape` prop
that supports 'square' (default) and 'hexagon' variants.
Changes:
- Added `shape` prop ('square' | 'hexagon') to all 4 component variants
- Hexagon mode uses flat-top hex grid with proper tiling geometry
- Seamless animation wrapping for both shapes
- Hover detection adapts to hex coordinate mapping when in hexagon mode
- Added Shape toggle (Square/Hexagon) to demo customization panel
- Updated usage example in code constants
- Fully backward compatible — defaults to 'square'
Closes DavidHDev#854
…d-background feat: add Hexagons background component
Feat: add pixel swap component
…o-hyperspeed fix: add neonwaves (six) preset to hyperspeed demo
…er-on-prop-change fix(ShapeBlur): prevent WebGL context recreation on uniform updates and fix potential memory leak
…stener-leak fix(Ballpit): bind resize/visibility handlers once so removeEventListener works
…ce-duplicate-observer fix(GlassSurface): drop the duplicated resize effect
fix(Lightning, RippleGrid): cancel the render loop on cleanup
…on-loop-leaks fix(ImageTrail): stop the render loop and drop listeners on unmount
…imports fix(ts): use type-only imports in TS variants (fixes TS1484 in stock Vite react-ts apps)
…-split-cli-installation
The shadcn CLI runs every file it installs through its JavaScript/TypeScript transformer unless the file is typed registry:file. Components were shipped as whole folders and a folder cannot declare a type per file, so stylesheets went out as registry:component and got parsed as JavaScript, failing every -CSS variant with "Unexpected token (1:0)" on the first character of the CSS. Declare stylesheets as registry:file, which shadcn copies verbatim. That type requires an explicit target, so point it at @components/<Name>.css: shadcn resolves the alias to the components directory configured in the user's components.json, which is where the component itself lands, keeping the component's relative ./<Name>.css import working. Variants that ship a stylesheet are now listed file by file to give the stylesheet its own type; every other variant still ships as a folder, so all -TW entries are unchanged. Closes DavidHDev#1049
JadeCong
pushed a commit
to CloudEngineHub/react-bits
that referenced
this pull request
Aug 30, 2026
Replayed from DavidHDev#1050 onto the rewritten clean history and regenerated the current registry.
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.
Closes #1049
Problem
npx shadcn add @react-bits/<Component>-JS-CSSfails withUnexpected token (1:0)right after "Checking registry", at the "Updating files" step.It isn't specific to Lanyard — every one of the 292
-CSSregistry entries is affected.-TWvariants ship no stylesheet and were always fine.The shadcn CLI runs every file it installs through its JavaScript/TypeScript transformer unless the file is typed
registry:file.jsrepo.config.tsshipped each component as a whole folder, and a folder can't declare a type per file, so stylesheets went out asregistry:componentand got parsed as JavaScript.Unexpected token (1:0)is the parser choking on the first character of the CSS.Fix
Stylesheets are now declared as
registry:file, which shadcn copies verbatim.registry:filerequires an explicit target, so it is set to@components/<Name>.css— shadcn resolves the@componentsalias to whatever the user configured in theircomponents.json, which is where the component itself lands, so the component's relative./<Name>.cssimport keeps resolving.Because of the per-file type, variants that actually ship a stylesheet are now listed file by file instead of as a folder. Everything else still ships as a folder, so all
-TWentries stay byte-identical.public/r/is regenerated (npm run registry:build). That rebuild also picks up ~57 entries whose committed content had drifted fromsrc/before this PR — those are content-only refreshes, no structural change.Testing
4.16.0,4.17.0and4.18.0— all three fail onLanyard-JS-CSS,Aurora-JS-CSSandAccordionGallery-JS-CSS, whileAurora-JS-TWinstalls fine.npx shadcn addagainst the rebuilt registry on all three CLI versions, in both a JS project ("tsx": false) and a TS project ("tsx": true):Lanyard,Aurora,Hyperspeed,AccordionGallery,Magnet,BlurText,ASCIIText(-JS-CSS/-TS-CSS) plusAurora-JS-TWandSplitText-TS-TW— all install cleanly. Stylesheets land next to their component and every relative import resolves;Hyperspeedstill getsHyperSpeedPresetsalongside it.registry:filewith a matching@components/<Name>.csstarget; every other file stillregistry:componentwith no target; every./*.cssimport in a shipped source file has a matching shipped stylesheet, and no stylesheet is shipped unused.npm run buildpasses.npx prettier --check jsrepo.config.tspasses.npm run lintreports 46 errors, all pre-existing insrc/**/*.jsx— eslint runs with--ext js,jsx, so it doesn't cover either file this PR changes.Out of scope
card.glb/lanyard.pngstill aren't shipped through the registry. They were already excluded before this change, and the component's docs tell users to supply them.dependencyResolution: 'manual'still leaves itsdependenciesempty — separate issue.