Modernize tooling and add TypeScript strict mode + tests - #3
Merged
Conversation
The project had not been updated since Jan 2022. Refresh the tooling so it builds, lints, type-checks, and tests on a current Node/toolchain: - Replace the unmaintained microbundle (broken against modern TypeScript) with tsup; emit ESM/CJS/IIFE + type declarations and update package exports. - Add a strict tsconfig.json and an "npm run typecheck" script; satisfy strict null/initialization checks in script.ts (definite-assignment assertions, null-guards on getContext/toBlob). - Migrate ESLint to flat config (eslint.config.mjs) with typescript-eslint, replacing the legacy .eslintrc.json and unmaintained eslint-config-standard. - Add a Vitest (jsdom) suite covering construction, crop-info math, panning/clamping, and export guards. - Commit package-lock.json (stop ignoring it) for reproducible npm ci builds. - Add ci.yml (typecheck/lint/test/build on push & PR, Node 20); modernize npm-publish.yml and bump deprecated GitHub Actions (checkout@v4, setup-node@v4, codeql-action@v3). Remove the redundant super-linter workflow. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZusPpnLpewhvkmrd2UV7y
The demo could not install on any machine: docsSrc/package.json referenced cropo via a hardcoded Windows tarball path, plus unused React and css.gg dependencies. - Remove the broken cropo tarball path (the demo imports ../script directly) and the unused react/react-dom/@types/react and css.gg deps. - Add real start/build scripts and upgrade Parcel + Tailwind to 3.x; convert the Tailwind config to v3 (content/darkMode) and drop autoprefixer (Parcel handles prefixing). - Rebuild the published docs/ output. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZusPpnLpewhvkmrd2UV7y
Document the path from the 0.6.x maintenance refresh to a breaking 1.0.0: removing the deprecated function-style API and the module-level shared instance, making constructor options required, and expanding test coverage first. Includes a consumer migration example. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZusPpnLpewhvkmrd2UV7y
Expand from 6 to 23 cases covering previously untested behavior, driving the class through its public API and real dispatched DOM events. Harness (test/setup.ts, test/helpers.ts): - Stub canvas export (toDataURL/toBlob) with a controllable blob result. - Make the FakeImage size configurable (landscape/portrait fit scenarios). - Capture the ResizeObserver callback so resize can be triggered in tests. - Add event-factory helpers: firePointer, fireSliderInput, triggerResize. New/relocated tests under test/: - core: construction, getCropInfo, error paths (moved from script.test.ts). - export: getDataUrl/getBlob (+ null-blob rejection), download anchor/click, export-canvas scaling. - zoom: slider-driven zoomScale, min/max scale clamping and custom options. - pan: full move clamping (both axes/bounds) and a pointer-drag sequence. - pinch: two-pointer zoomDelta growth and maxScale limit. - resize: debounced onResize via fake timers, plus the no-image no-op. Test-only change; script.ts and the published bundles are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RZusPpnLpewhvkmrd2UV7y
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
2 participants
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
This PR brings the cropo project up to date with modern tooling and best practices. The library code behavior is unchanged, but the build system, linting, testing, and TypeScript configuration have been completely refreshed after a long maintenance pause.
Key Changes
Build & Distribution:
microbundleto tsup (esbuild-based)package.jsonexports to properly declare all entry points (import/require/unpkg)package-lock.jsonto version control for reproducibilityTypeScript & Type Safety:
tsconfig.jsonwithstrict: truemode enabledscript.tsto satisfy strict null/initialization checks using definite-assignment assertions (!) on properties initialized viaload*methodsnpm run typecheckscriptLinting:
.eslintrc.json+ unmaintainedeslint-config-standardto ESLint 9 flat config (eslint.config.mjs)typescript-eslintfor proper TypeScript lintingnpm run lintscriptTesting:
test/setup.tswith lightweight stubs for Canvas 2D context, HTMLImageElement, and ResizeObserverscript.test.tswith initial test suite covering:npm testscriptCI/CD:
ci.ymlthat runs typecheck, lint, test, and build on every push/PRnpm-publish.ymlto run the same quality gates before publishingcheckout@v4,setup-node@v4,codeql-action@v3)Demo Site (
docsSrc/):tailwind.config.jsto use moderncontentkey instead of deprecatedpurgeautoprefixer(no longer needed with Tailwind 3)start,build,clean)Documentation:
ROADMAP.mdoutlining the path to1.0.0, including planned breaking changes:Notable Implementation Details
!) are used on properties likecanvas,img,scalethat are initialized asynchronously vialoadCanvas()andloadImageFromUrl()methods, satisfying TypeScript strict mode while preserving the existing lazy-initialization patternqueueMicrotaskto simulate the browser's image load lifecycle without requiring real network callsscript.tsis imported, ensuring the deprecated module-levelnew Cropo({})instance can be testedenginesfield)https://claude.ai/code/session_01RZusPpnLpewhvkmrd2UV7y