fix(ts): resolve the 14 strict typecheck errors in the TS variants - #1046
Closed
aron-intframe wants to merge 1444 commits into
Closed
fix(ts): resolve the 14 strict typecheck errors in the TS variants#1046aron-intframe wants to merge 1444 commits into
aron-intframe 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
AcidSquares passed rtA/rtB straight into renderer.render(), which takes RenderTarget | undefined, while the two lines below already assert the same values with !. Made the two render calls consistent with them. SpecularButton computed the null guard into an intermediate boolean, so narrowing did not reach pointerAngle at the use site. Inlined the same condition into the ternary; runtime behaviour is unchanged. SplitText widened tag to React.ElementType, which is a union over every intrinsic element. JSX intersects the props of a union, and the conflicting attribute types across that union collapse children, ref, style and className to never. tag is already a union of eight tags that all accept the same props, so dropping the assertion both typechecks and keeps the type more precise than the assertion did.
JadeCong
pushed a commit
to CloudEngineHub/react-bits
that referenced
this pull request
Aug 30, 2026
Replayed from DavidHDev#1046 onto the rewritten clean history.
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 #1041.
npx tsc --noEmitgives 14 errors on main, this takes it to 0. Three unrelated causes:AcidSquares (4 errors) —
rtA/rtBareRenderTarget | nullandensureTargets()fills them in, but tsc can't see through the call. The two lines right below eachrender()already usertA!/rtB!, so the render calls were the odd ones out. Made them match.SpecularButton (2) — the null check goes through an intermediate
steerboolean, and narrowing doesn't survive that. Inlined the condition into the ternary. Same operands in the same order, so nothing changes at runtime.SplitText (8) — this one's the cast itself, which is why I called it out.
tagis already typed'h1' | ... | 'span', andas React.ElementTypewidens that to every intrinsic element. JSX intersects props across a union, so withinput,svgand friends in there,children/ref/style/classNameall collapse tonever. That's exactly the 4 errors per file. Dropping the cast fixes it, and the type ends up more precise than the cast was.Ran
npx vite buildafter, still builds (13.3s).Two things I deliberately left alone:
ensureTargets()does populate the targets,steerdoes include the null check, and the 8 tags do accept those props. Mentioning it because of the four-variants rule in CONTRIBUTING.prettier --checkalready fails on bothSpecularButton.tsxfiles on main. Running--writepulls a bunch of unrelated reformatting into the diff, so I left it.AI was used for assistance.