fix: resolve strict TypeScript variant errors - #1042
Closed
dinhnguyenminhhoang wants to merge 1429 commits into
Closed
fix: resolve strict TypeScript variant errors#1042dinhnguyenminhhoang wants to merge 1429 commits into
dinhnguyenminhhoang wants to merge 1429 commits into
Conversation
…ard-prop-issues Fix ProfileCard demo props leaking into usage examples
…e to "InViewHover" mode
- apply axis-aware uv scaling for portrait/landscape consistency - regenerate LaserFlow registry artifacts
…ions into feat/decrypted-text-on-click
…th click mode and refactor for improved functionality
- 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
Feat: add pixel swap component
…o-hyperspeed fix: add neonwaves (six) preset to hyperspeed demo
Contributor
There was a problem hiding this comment.
Pull request overview
This PR resolves strict TypeScript typecheck failures across TS-CSS and TS-Tailwind component variants for AcidSquares, SpecularButton, and SplitText, aligning the variants with the repo’s strict TS configuration and addressing the errors described in #1041.
Changes:
- Fixes nullable/optional
RenderTargettyping and usage in AcidSquares variants. - Fixes nullable narrowing for the computed
targetangle in SpecularButton variants. - Fixes polymorphic tag + ref typing in SplitText variants by switching to an
HTMLElementref strategy.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/ts-tailwind/TextAnimations/SplitText/SplitText.tsx | Adjusts polymorphic tag/ref typing to avoid never props and ref typing issues under strict TS. |
| src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx | Tightens nullable narrowing for animation target angle selection. |
| src/ts-tailwind/Backgrounds/AcidSquares/AcidSquares.tsx | Updates RenderTarget lifecycle/typing to avoid null vs undefined strict TS errors. |
| src/ts-default/TextAnimations/SplitText/SplitText.tsx | Mirrors SplitText polymorphic ref typing fix in the default variant. |
| src/ts-default/Components/SpecularButton/SpecularButton.tsx | Mirrors SpecularButton nullable narrowing fix in the default variant. |
| src/ts-default/Backgrounds/AcidSquares/AcidSquares.tsx | Mirrors AcidSquares RenderTarget typing/lifecycle updates in the default variant. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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.
Fixes #1041
Summary
Validation
npm exec tsc -- --noEmit --pretty falsenpm exec vite build