feat: integrate gl-react-image into the monorepo#512
Merged
Conversation
Imports https://github.com/gre/gl-react-image as packages/gl-react-image, modernized from Flow/babel-6 class component to TypeScript function component on the gl-react v6 API. Same GLSL shaders and props (resizeMode cover/free/contain/stretch, center, zoom). Version starts at 6.0.0 to align with the family; changeset publish will release it since that version is not on npm. - wired into root tsconfig paths/references; build.sh picks it up via the packages/gl-react* glob - cookbook: vite alias to src + two new Composition examples (imageresizemodes with all modes interactive, imageeffects composing GLImage with the Saturate effect) - tests: GLImage resizeMode pixel test in the shared suite (NB: Node.capture() returns a pooled buffer reused across calls — capture data must be copied if retained) - removed the leftover empty changeset so merging triggers the publish path for the new package Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Integrates gl-react-image into the monorepo as a new package (packages/gl-react-image) and wires it into the TypeScript project references, cookbook, CI build, and shared test suite.
Changes:
- Added
gl-react-imagepackage (TypeScriptGLImagecomponent + README/LICENSE + project tsconfig/package.json). - Added cookbook integration (Vite alias + 2 new Composition examples) and shared pixel test for
resizeModebehavior. - Updated repo wiring (root tsconfig references/paths, CI build step, pnpm workspace deps, removed empty changeset).
Reviewed changes
Copilot reviewed 15 out of 17 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Adds TS path mapping and project reference for gl-react-image. |
| pnpm-lock.yaml | Adds workspace links / importer entries for gl-react-image. |
| packages/tests/package.json | Adds gl-react-image to the shared test suite dependencies. |
| packages/tests/tests/all.js | Adds a pixel-level test covering the four resizeMode variants. |
| packages/gl-react-image/tsconfig.json | Introduces TS composite project config for the new package. |
| packages/gl-react-image/src/index.tsx | Implements the GLImage component and shaders for cover/free/contain/stretch. |
| packages/gl-react-image/README.md | Documents usage and props for gl-react-image. |
| packages/gl-react-image/package.json | Declares the new package metadata + peer deps. |
| packages/gl-react-image/LICENSE | Adds MIT license for the imported package. |
| packages/cookbook/vite.config.ts | Adds Vite alias so cookbook can import gl-react-image from source. |
| packages/cookbook/src/examples/index.ts | Registers two new cookbook examples with controls. |
| packages/cookbook/src/examples/imageresizemodes.tsx | New interactive example showcasing all resize modes. |
| packages/cookbook/src/examples/imageeffects.tsx | New example composing GLImage with an effect node. |
| packages/cookbook/package.json | Adds gl-react-image as a cookbook dependency. |
| CLAUDE.md | Documents the new package in the monorepo layout section. |
| .github/workflows/ci-tests.yml | Ensures gl-react-image is built in CI prior to running tests. |
| .changeset/six-birds-own.md | Removes an empty changeset file. |
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
+174
to
+175
| center: center || [0.5, 0.5], | ||
| zoom: zoom || 1, |
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-image into the monorepo as
packages/gl-react-image, modernized to the current stack, with two new cookbook examples.Package
source,resizeMode: cover|free|contain|stretch,center,zoom)build.shpicks it up via thepackages/gl-react*glob; CI test job builds itchangeset publishreleases it automatically (that version isn't on npm). The leftover empty changeset from chore: migrate to pnpm + changesets release flow #511 was removed so the publish path triggers.Cookbook (Composition category)
gl-react-image→../gl-react-image/srclike the other gl-react packagesTests
Node.capture()returns an ndarray over a pooled buffer reused by subsequent captures — retained capture results get silently overwritten. The test copies the data; possible footgun to revisit in core (packages/gl-react/src/Node.tsx_captureAlloc).Add gl-react-image as a trusted publisher on npmjs.com (repo
gre/gl-react, workflowpublish.yml) — otherwise the Release workflow will fail when publishing the new package.Verification
pnpm build+pnpm test: 41/41 tests, 3/3 snapshots ✅vite build✅ and both examples reviewed locally on the dev server ✅🤖 Generated with Claude Code