feat: integrate gl-react-blur into the monorepo#514
Merged
Conversation
Imports https://github.com/gre/gl-react-blur as packages/gl-react-blur, modernized from Flow/babel-6 to TypeScript on the gl-react v6 API: Blur, Blur1D, BlurV, BlurV1D, directionForPassDefault. Components now use connectSize (inheriting size from parent) instead of requiring explicit width/height, while keeping the old multi-pass API (factor, passes, directionForPass). Version 6.0.0 like the family; published automatically on merge by changeset publish. The cookbook blur examples consumed local copies of these components: blurmulti, blurmap, blurimgtitle, blurmapdyn, blurvideo, blurmapmouse now import from gl-react-blur (blurxy keeps its educational inline implementation). blurmulti/blurmap gain a "passes" control. Adds a Blur pixel test to the shared suite (blur of a constant color is a no-op). Also gitignore packages/cookbook/dist (vite build output) which was accidentally committed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR integrates gl-react-blur as a first-class package in the gl-react monorepo and refactors cookbook blur examples and the shared test suite to consume it.
Changes:
- Added new workspace package
packages/gl-react-blur(TypeScript) implementing multi-pass gaussian blur (Blur,Blur1D,BlurV,BlurV1D) plusdirectionForPassDefault. - Updated cookbook examples/config and the shared Jest suite to depend on and validate
gl-react-blur. - Updated workspace TS references / path aliases and CI build loop to include the new package.
Reviewed changes
Copilot reviewed 23 out of 26 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Adds TS path alias + project reference for gl-react-blur. |
| pnpm-lock.yaml | Adds workspace links and dependency entries for gl-react-blur. |
| packages/tests/package.json | Adds gl-react-blur dependency for the shared test suite. |
| packages/tests/tests/all.js | Adds a pixel test validating blur is a no-op on constant color. |
| packages/gl-react-blur/tsconfig.json | New package TS project config (composite + declarations). |
| packages/gl-react-blur/src/index.ts | Barrel exports for blur components + prop types. |
| packages/gl-react-blur/src/directionForPassDefault.ts | Default pass-direction strategy for multi-pass blur. |
| packages/gl-react-blur/src/BlurV1D.tsx | Variable-per-pixel (map-driven) single-pass blur shader node. |
| packages/gl-react-blur/src/BlurV.tsx | Multi-pass variable blur composition over BlurV1D. |
| packages/gl-react-blur/src/Blur1D.tsx | Single-pass blur shader node. |
| packages/gl-react-blur/src/Blur.tsx | Multi-pass blur composition over Blur1D. |
| packages/gl-react-blur/README.md | New package documentation and usage examples. |
| packages/gl-react-blur/package.json | New publishable package metadata (v6.0.0, peers). |
| packages/gl-react-blur/LICENSE | New package license file. |
| packages/cookbook/vite.config.ts | Adds Vite alias for gl-react-blur source imports. |
| packages/cookbook/src/examples/index.ts | Updates blur example descriptions and adds passes controls. |
| packages/cookbook/src/examples/blurvideo.tsx | Switches to importing BlurV from gl-react-blur. |
| packages/cookbook/src/examples/blurmulti.tsx | Refactors example to use gl-react-blur’s Blur. |
| packages/cookbook/src/examples/blurmapmouse.tsx | Switches to importing BlurV from gl-react-blur. |
| packages/cookbook/src/examples/blurmapdyn.tsx | Switches to importing BlurV from gl-react-blur. |
| packages/cookbook/src/examples/blurmap.tsx | Removes inline implementation; imports BlurV from gl-react-blur. |
| packages/cookbook/src/examples/blurimgtitle.tsx | Switches to importing blur components from gl-react-blur. |
| packages/cookbook/package.json | Adds gl-react-blur dependency to the cookbook app. |
| packages/cookbook/dist/index.html | Adds cookbook build output (generated). |
| packages/cookbook/dist/assets/webcampersistence-DTKA1VxG.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/webcampersistence-DTKA1VxG.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/webcam-BFHsfm3m.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/webcam-BFHsfm3m.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/video-DnVzELhf.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/video-DnVzELhf.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/transitions-CV95zkud.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/transitions-CV95zkud.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/textfunky-BaMJSZYx.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/textfunky-BaMJSZYx.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/textanimated-CQYi2T57.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/textanimated-CQYi2T57.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/sdf1-C43j1rFH.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/sdf1-C43j1rFH.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/saturation-s7btQp3v.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/saturation-s7btQp3v.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/reactmotion-CdWaQaoG.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/reactmotion-CdWaQaoG.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/pixeleditor-Bs02ibrG.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/paint-AtMLcNaE.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/paint-AtMLcNaE.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/NearestCopy-UkPh1q2L.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/NearestCopy-UkPh1q2L.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/mergechannelsfun-CIJqQgW6.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/mergechannelsfun-CIJqQgW6.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/mergechannels-DUluNz7h.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/mergechannels-DUluNz7h.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/index-gWmnG88S.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/index-gWmnG88S.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/imageresizemodes-CTOppAkB.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/imageresizemodes-CTOppAkB.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/imageeffects-BUTO8im4.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/imageeffects-BUTO8im4.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/hellogl-CXReOxmA.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/hellogl-CXReOxmA.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/helloblueanim-BWpuhNhv.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/helloblueanim-BWpuhNhv.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/helloblue-CpT6RYME.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/helloblue-CpT6RYME.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/heart-DK5WI53N.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/heart-DK5WI53N.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/gradients-BsMFsQRE.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/gradients-BsMFsQRE.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golwebcam-CHK4Qolk.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golwebcam-CHK4Qolk.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golrotscu-CfeE_pnW.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golrotscu-CfeE_pnW.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golrot-DU5oHQf9.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golrot-DU5oHQf9.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golglider-CGun9ae4.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/golglider-CGun9ae4.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/gol-BUI8CiQw.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/gol-BUI8CiQw.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/glsledit-D-CP-XCP.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/glsledit-D-CP-XCP.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/distortion-B0XsU5Pn.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/distortion-B0XsU5Pn.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/diamondhello-CD4iwERY.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/diamondhello-CD4iwERY.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/diamondcrop-NLB1upqt.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/diamondcrop-NLB1upqt.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/diamondanim-C4O-4MOm.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/diamondanim-C4O-4MOm.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/demotunnel-vzIw_2kj.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/demotunnel-vzIw_2kj.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/connectSize-DzSerJBo.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/connectSize-DzSerJBo.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/colorscale-1aPJI18d.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/colorscale-1aPJI18d.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/colordisc-1aki_5rw.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/colordisc-1aki_5rw.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurxydownscale-B5GIWfAa.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurxydownscale-B5GIWfAa.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurxy-DKElCu_X.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurxy-DKElCu_X.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurvideo-BKo1TDph.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurvideo-BKo1TDph.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/BlurV-c2r3qIHH.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmulti-DBMcNBQ9.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmulti-DBMcNBQ9.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmapmouse-B2RIip3y.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmapmouse-B2RIip3y.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmapdyn-CSpzxMtF.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmapdyn-CSpzxMtF.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmap-pxKMWvZg.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurmap-pxKMWvZg.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurimgtitle-CUAFJ9NY.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurimgtitle-CUAFJ9NY.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurfeedback-CrxVqKre.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/blurfeedback-CrxVqKre.js | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/animated-Cy1RkPJC.js.map | Cookbook build output (generated asset). |
| packages/cookbook/dist/assets/animated-Cy1RkPJC.js | Cookbook build output (generated asset). |
| CLAUDE.md | Documents the new gl-react-blur package in repo overview. |
| .github/workflows/ci-tests.yml | Includes gl-react-blur in the CI build step. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+23
to
+38
| ({ | ||
| children, | ||
| factor, | ||
| passes = 2, | ||
| directionForPass = directionForPassDefault, | ||
| }: any) => { | ||
| const rec = (pass: number): any => | ||
| pass <= 0 ? ( | ||
| children | ||
| ) : ( | ||
| <Blur1D direction={directionForPass(pass, factor, passes)}> | ||
| {rec(pass - 1)} | ||
| </Blur1D> | ||
| ); | ||
| return rec(passes); | ||
| } |
Comment on lines
+25
to
+41
| ({ | ||
| children, | ||
| factor, | ||
| map, | ||
| passes = 2, | ||
| directionForPass = directionForPassDefault, | ||
| }: any) => { | ||
| const rec = (pass: number): any => | ||
| pass <= 0 ? ( | ||
| children | ||
| ) : ( | ||
| <BlurV1D map={map} direction={directionForPass(pass, factor, passes)}> | ||
| {rec(pass - 1)} | ||
| </BlurV1D> | ||
| ); | ||
| return rec(passes); | ||
| } |
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.
Summary
Imports gre/gl-react-blur as
packages/gl-react-blur, modernized to the current stack, and refactors the cookbook blur examples to consume it.Package
Blur,Blur1D,BlurV,BlurV1D,directionForPassDefault(+ exported prop types)connectSize(size inherited from parent) instead of requiring explicitwidth/height, while keeping the original multi-pass API (factor,passes,directionForPass) — effectively merging the old library API with the proven implementations that lived in the cookbookchangeset publish(version absent from npm)Cookbook
The blur examples carried local copies of these exact components; they now import from
gl-react-blur:blurmultiandblurmapuse the library directly (and gain a passes control)blurimgtitle,blurmapdyn,blurvideo,blurmapmouseimportBlur/Blur1D/BlurVfrom the packageblurxyintentionally keeps its educational inline implementation ("write your own blur")Tests
Add gl-react-blur as a trusted publisher on npmjs.com (repo
gre/gl-react, workflowpublish.yml) — same step as gl-react-image, otherwise the Release workflow will fail to publish.Verification
pnpm build+pnpm test: 42/42 ✅vite build✅, examples reviewed locally on the dev server ✅🤖 Generated with Claude Code