docs(packages/js): add README for npm package - #466
Conversation
|
Warning Review limit reached
Next review available in: 57 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughAdds a dedicated README for the JavaScript package with overview, installation, usage examples, API reference, WebAssembly notes, example links, and footer/license links. ChangesJavaScript package README
Estimated code review effort: 1 (Trivial) | ~5 minutes Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 7 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (7 passed)
📋 Issue PlannerBuilt with CodeRabbit's Coding Plans for faster development and fewer bugs. View plan used: ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@Ryan-Millard and @Krasner , for links I was a bit confused, if you can point out anything and let me know, it'll be great. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/js/README.md`:
- Around line 213-221: The README test command is incorrect because
`packages/js` does not use Vitest, so update the testing instructions to match
the actual package setup. In `packages/js/README.md`, replace the `npx vitest
run` example with the real test command used by the package, or first add the
missing Vitest dependency/config in `packages/js/package.json` and related setup
before documenting it.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 5d570381-33d2-449f-bb12-6b8edabf36d5
📒 Files selected for processing (1)
packages/js/README.md
📜 Review details
🧰 Additional context used
📓 Path-based instructions (2)
**/*.md
📄 CodeRabbit inference engine (.editorconfig)
**/*.md: Do not trim trailing whitespace in Markdown files
Use 2-space indentation for Markdown files
Do not enforce maximum line length for Markdown files
Files:
packages/js/README.md
**
⚙️ CodeRabbit configuration file
**: # Contributing to Img2NumWant to contribute to Img2Num? There are a few things you need to know.
We wrote a contribution guide to help you get started.
A few important points:
- Add tests with your PR — new features and bug fixes must include tests where appropriate. PRs without tests are unlikely to be approved.
- Follow the repository's coding style rules.
- Use the issue and PR templates when filing issues or submitting code. Your PR will be rejected if you don't.
If you're unsure what to change, open a discussion and someone will assist you.
Questions?
If you have questions or need help:
- Open a discussion
- Create an issue
- Check existing PRs for ideas
Thank you for improving Img2Num! 🎨🚀
**: BasedOnStyle: LLVM
Standard: c++20--- Basic formatting ---
IndentWidth: 4
ColumnLimit: 100
TabWidth: 4--- Braces ---
Cpp11BracedListStyle: true
SpaceBeforeCpp11BracedList: true
BreakBeforeBraces: Attach--- Braced initializers ---
Cpp11BracedListStyle: true
--- Constructor initializer lists ---
PackConstructorInitializers: Never
BreakConstructorInitializers: BeforeComma
ConstructorInitializerIndentWidth: 4--- Alignment ---
AlignAfterOpenBracket: BlockIndent
--- Pointers ---
PointerAlignment: Left
--- Includes ---
IncludeBlocks: Regroup
SortIncludes: CaseInsensitive--- Extern "C" cleanliness ---
IndentExternBlock: NoIndent
--- Lambdas ---
AllowShortLambdasOnASingleLine: Inline
--- Functions ---
AllowShortFunctionsOnASingleLine: None
**: root = true-------------------------
Global defaults
-------------------------
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
max_line_lengt...
Files:
packages/js/README.md
🧠 Learnings (1)
📚 Learning: 2026-02-22T15:20:15.304Z
Learnt from: Ryan-Millard
Repo: Ryan-Millard/Img2Num PR: 263
File: docs/docs/internal/core/api-reference.md:13-13
Timestamp: 2026-02-22T15:20:15.304Z
Learning: In Docusaurus projects, Markdown files (*.md, *.mdx) may contain anchor tags with onClick={(e) => { e.preventDefault(); window.location.href = '...'; }} to force a full page navigation, bypassing React SPA routing for static/external paths. Treat this as intentional and do not flag it as redundant in docs contexts. Apply this guidance broadly to Markdown docs across the repository (not just the single file) and focus reviews on more impactful patterns such as accessibility, SEO, and navigation consistency.
Applied to files:
packages/js/README.md
🔇 Additional comments (11)
packages/js/README.md (11)
169-186:imageToSvgdefault forcolor_spaceis correct.Confirmed against
safeWasmWrappers.jssnippet: default is0(CIE LAB), with1for sRGB. README matches source.
192-201: WASM bundler guidance is accurate and helpful.The Vite and Webpack 5 notes are standard configurations for
.wasmassets. The fallback to open an issue is a good pattern. No concerns.
229-229: Footer links are well-formed.Documentation, Changelog, and GitHub links are standard. No issues.
152-165: No change needed —findContoursaccepts bothpixelsandlabelsinpackages/js/src/safeWasmWrappers.js, so the README matches the wrapper API.
135-148:kmeansreturn shape matches the README.
205-206: README example links are valid.
88-99: No change needed.
225-225: No action needed.
120-131: Remove this comment
blackThresholdis exported frompackages/js/src/index.jsvia./safeWasmWrappers.js, andnum_colorsis already part of the function signature with no default.> Likely an incorrect or invalid review comment.
11-11: No change needed for the Node.js runtime note.
74-74: No action needed. The JavaScript docs link points at the site’s/docs/next/js/route.
|
also I'll like to work on #455 once this is reviewed and done, I'll get some idea from this one. |
Removed test run instructions from README.
I was thinking it might be useful to add a “Features” section in the README, similar to what many JS libraries do (like Vite or Axios). |
That's a good idea, but I think we may need a more advanced auto-generator for this so we don't have to duplicate everything. I was thinking of like a JSON file that contains all of the shared data between all of our README.md files that we use to insert into the files. We could still keep package-specific features (e.g., support for NumPy arrays in |
I like idea of shared data and yes, currently we can keep it simple only, let's implement it at later stage. |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/js/README.md (1)
99-111: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winComplete the Vite configuration snippet.
The current snippet shows a bare
assetsIncludeproperty without the surroundingdefineConfigstructure, which will cause a syntax error if copied directly. Provide a minimal valid configuration example.📝 Proposed fix
- **Vite** — add to `vite.config.js`: ```js - assetsInclude: ["**/*.wasm"] + import { defineConfig } from 'vite'; + + export default defineConfig({ + assetsInclude: ["**/*.wasm"], + });</details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.In
@packages/js/README.mdaround lines 99 - 111, The Vite example in the README
is incomplete and can be copied as invalid syntax. Update the documentation near
the “Vite” bullet to show a minimal valid Vite config using the proper
defineConfig wrapper and export structure, so the assetsInclude setting is
presented in a ready-to-use snippet.</details> <!-- cr-comment:v1:03ff0a4c3f33ea94959fbbd3 --> </blockquote></details> </blockquote></details>🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. Inline comments: In `@packages/js/README.md`: - Around line 5-10: The build status badge in README.md has a mismatched destination link: the image points to the Ryan-Millard/Img2Num repository, but the clickable target still points to the wrong GitHub org/repo. Update the badge link so it matches the repository used by the badge image, keeping the existing workflow path in the correct repo reference. --- Outside diff comments: In `@packages/js/README.md`: - Around line 99-111: The Vite example in the README is incomplete and can be copied as invalid syntax. Update the documentation near the “Vite” bullet to show a minimal valid Vite config using the proper defineConfig wrapper and export structure, so the assetsInclude setting is presented in a ready-to-use snippet.🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID:
fc124c68-ef1f-4eeb-848a-3641f89025f5📒 Files selected for processing (1)
packages/js/README.md📜 Review details
🧰 Additional context used
📓 Path-based instructions (2)
**/*.md
📄 CodeRabbit inference engine (.editorconfig)
**/*.md: Do not trim trailing whitespace in Markdown files
Use 2-space indentation for Markdown files
Do not enforce maximum line length for Markdown filesFiles:
packages/js/README.md**
⚙️ CodeRabbit configuration file
**: # Contributing to Img2NumWant to contribute to Img2Num? There are a few things you need to know.
We wrote a contribution guide to help you get started.
A few important points:
- Add tests with your PR — new features and bug fixes must include tests where appropriate. PRs without tests are unlikely to be approved.
- Follow the repository's coding style rules.
- Use the issue and PR templates when filing issues or submitting code. Your PR will be rejected if you don't.
If you're unsure what to change, open a discussion and someone will assist you.
Questions?
If you have questions or need help:
- Open a discussion
- Create an issue
- Check existing PRs for ideas
Thank you for improving Img2Num! 🎨🚀
**: BasedOnStyle: LLVM
Standard: c++20--- Basic formatting ---
IndentWidth: 4
ColumnLimit: 100
TabWidth: 4--- Braces ---
Cpp11BracedListStyle: true
SpaceBeforeCpp11BracedList: true
BreakBeforeBraces: Attach--- Braced initializers ---
Cpp11BracedListStyle: true
--- Constructor initializer lists ---
PackConstructorInitializers: Never
BreakConstructorInitializers: BeforeComma
ConstructorInitializerIndentWidth: 4--- Alignment ---
AlignAfterOpenBracket: BlockIndent
--- Pointers ---
PointerAlignment: Left
--- Includes ---
IncludeBlocks: Regroup
SortIncludes: CaseInsensitive--- Extern "C" cleanliness ---
IndentExternBlock: NoIndent
--- Lambdas ---
AllowShortLambdasOnASingleLine: Inline
--- Functions ---
AllowShortFunctionsOnASingleLine: None
**: root = true-------------------------
Global defaults
-------------------------
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
max_line_lengt...Files:
packages/js/README.md🧠 Learnings (1)
📚 Learning: 2026-02-22T15:20:15.304Z
Learnt from: Ryan-Millard Repo: Ryan-Millard/Img2Num PR: 263 File: docs/docs/internal/core/api-reference.md:13-13 Timestamp: 2026-02-22T15:20:15.304Z Learning: In Docusaurus projects, Markdown files (*.md, *.mdx) may contain anchor tags with onClick={(e) => { e.preventDefault(); window.location.href = '...'; }} to force a full page navigation, bypassing React SPA routing for static/external paths. Treat this as intentional and do not flag it as redundant in docs contexts. Apply this guidance broadly to Markdown docs across the repository (not just the single file) and focus reviews on more impactful patterns such as accessibility, SEO, and navigation consistency.Applied to files:
packages/js/README.md🪛 markdownlint-cli2 (0.22.1)
packages/js/README.md
[warning] 46-46: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
[warning] 47-47: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Above(MD022, blanks-around-headings)
[warning] 132-132: Files should end with a single newline character
(MD047, single-trailing-newline)
🔇 Additional comments (3)
packages/js/README.md (3)
112-118: LGTM!
119-132: LGTM!
14-16: 🎯 Functional CorrectnessNo change needed for the Node.js runtime note. The Node worker path imports
packages/js/src/target/node/webgpu.jsand initializeswebgpu/Dawn, so the README wording matches the implementation.> Likely an incorrect or invalid review comment.
|
@Ryan-Millard I don't know what I am doing wrong but on the file view on my machine the alignment is right. I tried fixing it multiple times. If you can tell me what I am doing wrong, it'll be great. |
|
Also, do you want similar thing for #455 I solve that issue now. |
How are you editing it? A hard lesson I learned was that Markdown renderers aren't standardized, so the VS Code extension I was using didn't do the same stuff as what the GitHub renderer showed. Always make sure to use GitHub's editor when doing Markdown. |
Yes. A whole bunch of badges to link to places and the same as what we have here. Less is more in my opinion because they can always open up our documentation to read what's going on. |
Was doing the same mistake, got it now. Thanks alot! |
|
also I have made all the changes, you can review this PR. |
That's great! I'll review it when I get a chance. |
Ryan-Millard
left a comment
Ryan-Millard
left a comment
There was a problem hiding this comment.
This is great, but please add some of the other things in our root README, like the comparisons, features, etc. because it might be the person's first time interacting with our library (I often find new libraries on npm).
e82e29a to
f8b7ee5
Compare
Added detailed comparison of input and output images, and explained the advantages of Img2Num for processing natural images.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/js/README.md`:
- Around line 30-32: The README screenshots are referencing docs/static assets
outside packages/js, so the published package will ship broken image links.
Update the README image references to use package-owned assets or hosted URLs,
and ensure the img tags in the demo table point to paths that will be present in
the npm tarball.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: d61c1e14-d77e-4c55-b36e-cbd03581f410
📒 Files selected for processing (1)
packages/js/README.md
📜 Review details
🧰 Additional context used
📓 Path-based instructions (2)
**/*.md
📄 CodeRabbit inference engine (.editorconfig)
**/*.md: Do not trim trailing whitespace in Markdown files
Use 2-space indentation for Markdown files
Do not enforce maximum line length for Markdown files
Files:
packages/js/README.md
**
⚙️ CodeRabbit configuration file
**: # Contributing to Img2NumWant to contribute to Img2Num? There are a few things you need to know.
We wrote a contribution guide to help you get started.
A few important points:
- Add tests with your PR — new features and bug fixes must include tests where appropriate. PRs without tests are unlikely to be approved.
- Follow the repository's coding style rules.
- Use the issue and PR templates when filing issues or submitting code. Your PR will be rejected if you don't.
If you're unsure what to change, open a discussion and someone will assist you.
Questions?
If you have questions or need help:
- Open a discussion
- Create an issue
- Check existing PRs for ideas
Thank you for improving Img2Num! 🎨🚀
**: BasedOnStyle: LLVM
Standard: c++20--- Basic formatting ---
IndentWidth: 4
ColumnLimit: 100
TabWidth: 4--- Braces ---
Cpp11BracedListStyle: true
SpaceBeforeCpp11BracedList: true
BreakBeforeBraces: Attach--- Braced initializers ---
Cpp11BracedListStyle: true
--- Constructor initializer lists ---
PackConstructorInitializers: Never
BreakConstructorInitializers: BeforeComma
ConstructorInitializerIndentWidth: 4--- Alignment ---
AlignAfterOpenBracket: BlockIndent
--- Pointers ---
PointerAlignment: Left
--- Includes ---
IncludeBlocks: Regroup
SortIncludes: CaseInsensitive--- Extern "C" cleanliness ---
IndentExternBlock: NoIndent
--- Lambdas ---
AllowShortLambdasOnASingleLine: Inline
--- Functions ---
AllowShortFunctionsOnASingleLine: None
**: root = true-------------------------
Global defaults
-------------------------
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
max_line_lengt...
Files:
packages/js/README.md
🧠 Learnings (1)
📚 Learning: 2026-02-22T15:20:15.304Z
Learnt from: Ryan-Millard
Repo: Ryan-Millard/Img2Num PR: 263
File: docs/docs/internal/core/api-reference.md:13-13
Timestamp: 2026-02-22T15:20:15.304Z
Learning: In Docusaurus projects, Markdown files (*.md, *.mdx) may contain anchor tags with onClick={(e) => { e.preventDefault(); window.location.href = '...'; }} to force a full page navigation, bypassing React SPA routing for static/external paths. Treat this as intentional and do not flag it as redundant in docs contexts. Apply this guidance broadly to Markdown docs across the repository (not just the single file) and focus reviews on more impactful patterns such as accessibility, SEO, and navigation consistency.
Applied to files:
packages/js/README.md
🪛 LanguageTool
packages/js/README.md
[style] ~30-~30: This phrase is redundant (‘G’ stands for ‘graphic’). Use simply “SVG”.
Context: ...er image (Aerial view of mountains)"> | 
| | <img s...
(ACRONYM_TAUTOLOGY)
[style] ~31-~31: This phrase is redundant (‘G’ stands for ‘graphic’). Use simply “SVG”.
Context: ... garden in Margate, South Africa)" /> | <img width="300" alt="Final output SVG image (A garden in Margate, South Africa)" sr...
(ACRONYM_TAUTOLOGY)
[style] ~32-~32: This phrase is redundant (‘G’ stands for ‘graphic’). Use simply “SVG”.
Context: ... image (A ring on a woman's hand)" /> | <img width="300" alt="Final output SVG image (A ring on a woman's hand)" src="docs/...
(ACRONYM_TAUTOLOGY)
[style] ~149-~149: Using many exclamation marks might seem excessive (in this case: 27 exclamation marks for a text that’s 10609 characters long)
Context: ...vg({ pixels, width, height }); ``` > [!NOTE] > imageToUint8ClampedArray uses ...
(EN_EXCESSIVE_EXCLAMATION)
🔇 Additional comments (1)
packages/js/README.md (1)
1-29: LGTM!Also applies to: 33-199
Ryan-Millard
left a comment
Ryan-Millard
left a comment
There was a problem hiding this comment.
Overall, this is very nice. Thank you! I'll merge it after these changes are made.
Updated the README to include a contents table and improved image links.
2 participants
Changes & Reason
Changes
Added
README.mdtopackages/jsReason
The
img2numpackage on npm currently has no README, making it difficult for users to understand how to install and use the library without navigating the monorepo. This README provides a self-contained reference covering installation, quick start, full API reference with parameter tables and defaults, WebAssembly bundler guidance, links to example apps and the live demo, build instructions, and license.Related Issues
Fixes: #454
Testing & Verification
Verified the markdown renders correctly by previewing locally.
Additional Resources
Note: Some links in the README point to
/main(stable, already merged content like LICENSE)and some point to
/dev(recently added files that are not yet on main)