Repository navigation
Feat/revamp this - #183
Draft
tbolis wants to merge 79 commits into
Draft
Feat/revamp this#183tbolis wants to merge 79 commits into
tbolis wants to merge 79 commits into
Conversation
The root package is private; library metadata lives in packages/react-sketch. Require Node >=22 and pin local development to Node 24 via .nvmrc.
…ncies Adds test and test:coverage scripts to react-sketch and test, test:watch and test:coverage to the root, delegating to the react-sketch workspace.
Replace .eslintrc with eslint.config.js: typescript-eslint, eslint-plugin-react
(version detect), eslint-plugin-react-hooks and eslint-config-prettier.
Lint packages/**/*.{ts,tsx} only (specs get jest globals) and ignore the legacy
src/, examples/ and webpack/ folders until they are removed.
lint no longer auto-fixes; lint:fix does.
ts-jest type-checks spec files against tsconfig.spec.json; production sources
are type-checked by tsc, not by the test run. jest-canvas-mock is required
because fabric calls getContext("2d") while it is being imported.
The root jest.config.js pointed at the legacy src/ with enzyme for React 16. Tests now live in packages/react-sketch with their own jest config. .babelrc was only used by that setup and the legacy webpack/*.cfg.js files, which no script references.
Shared packages/tsconfig.packages.json now holds only compiler options (jsx react-jsx, module esnext, strict) with a react-sketch path that resolves relative to that file. include/exclude live in each package, and a new react-sketch tsconfig.build.json emits declarations only and skips spec files and dist. Stale baseUrl/typeRoots/composite settings removed.
Replace awesome-typescript-loader, CleanWebpackPlugin and the explicit terser plugin with ts-loader, output.clean and webpack's own production minification. react, react/jsx-runtime and fabric are externals, react moves to peerDependencies (^17 || ^18 || ^19) with React 19 dev dependencies. build runs webpack, then tsc emits dist/index.d.ts, and files/prepublishOnly/repository.directory are set. webpack and webpack-cli are declared once at the repo root. The root @types/react 17 and @types/react-dom are dropped so only one @types/react is installed, and csstype is bumped to match @types/react 19. types is set to [] so stray @types packages do not leak globals.
Typed ports of the legacy helpers. hexToRgbA throws a descriptive error, colorNameToHex returns undefined for unknown names (was false) and the indianred, mediumpurple and palevioletred entries are fixed.
Ports the legacy Utils spec with the import fixed and covers the new helpers.
Uses the legacy string values rectangle-label and default-tool.
pointer() is the single place reading a position from a canvas event and setInteractive() replaces the isDrawingMode/selection/forEachObject block repeated by every tool. Line uses both.
The rectangle now follows the pointer in every direction, including back across the start point (legacy kept a stale left/top).
A release without a preceding press no longer groups the previous arrow a second time.
Line width and color fall back to 1 and black like the Pencil.
Unused legacy state (the text prop, the object list) is not ported. The rectangle follows the pointer upwards too: legacy set left instead of top.
Unknown tools still fall back to the Pencil. The cursor is reset before a tool is configured, as the legacy component did when the tool changed, so Pan and DefaultTool cursors do not leak into the next tool.
Covers the factory and simulates mouse down/move/up on a fabric canvas for the geometry tools. Written for Jest, jsdom and jest-canvas-mock.
…leLabel, Select, DefaultTool) and utils
Use ts-loader (type checking moves to the typecheck script), css-loader 7, style-loader 4, source-map-loader 5, html-webpack-plugin 5.6 and webpack-dev-server 6 (static.directory, devMiddleware, port 23000), plus output.clean. react-sketch resolves to ../react-sketch/src/index.ts via resolve.alias so the showcase runs without a prebuilt dist. Add build and typecheck scripts, move css-loader/style-loader to devDependencies, and drop the duplicated loaders and awesome-typescript-loader from the root.
Scripts call yarn workspace directly, so wsrun (unmaintained, advisories without a fix) is removed.
moduleResolution node (node10) is deprecated in 6.0, so use bundler. baseUrl and typeRoots are already gone and types is explicit (empty). The showcase disables noUncheckedSideEffectImports, which 6.0 enables by default and flags the css imports. ts-loader and webpack work unchanged.
Keep the existing style: set trailingComma to es5 (Prettier 3 defaults to all) and rename the removed jsxBracketSameLine option to bracketSameLine. .prettierignore now ends with a newline, covers the legacy /src, /examples and /webpack folders (temporary, anchored so packages/*/src stays checked) and no longer skips markdown.
Add the prepare script and .husky/pre-commit (the husky 6 'husky.hooks' block in package.json was ignored). lint-staged now runs eslint --fix and prettier on ts/tsx and prettier on json/css/md/yml; the obsolete 'git add' and jest steps are gone. husky skips itself when HUSKY=0 or .git is missing. lint-staged 17 needs Node >=22.22.1, so stay on 16 to match engines >=22.
…2.1, package metadata)
The default of the Image URL field pointed to a third-party host (files.gamebanana.com). Use a bundled image, taken from the data URL of the addImg scenario, which webpack emits as an asset.
Replace the SketchApi stub and the casts (Canvas/api.ts) by a ref typed with the SketchField of react-sketch (Canvas/sketchRef.ts), and pass defaultValue, value, forceValue and onChange as typed properties. - undo, redo, copy, delete and their enabled state follow the canvas: the state (canUndo, canRedo, hasSelection) is read after onChange, mouse up and object added/removed instead of the select-tool rule. Paste is enabled once something was copied, as the canvas does not tell about its clipboard. - clear no longer sets an empty background, clear() drops the image itself. - SketchField is a pure component and the callbacks and style are stable, so the page state (undo button, selection) does not reload a forced value. - the scenario texts name the data files of the showcase instead of the legacy examples.
react-sketch accepts the opacity property but does not apply it (as in 0.5.x), so the slider changed nothing. Leave it out rather than pretend it works.
fabric 7.2/7.4 fix the stored XSS advisories (SVG export, Gradient colorStops) that have no patch on fabric 4.x. The public API is unchanged. Internally: - named exports instead of the fabric namespace, FabricObject/FabricImage - Promise based loadFromJSON, Image.fromURL and clone; copy and paste keep working back to back, as the pastes run in call order - the canvas keeps the fabric 4 defaults that fabric 7 changed (origin of the objects the library creates, right/middle click, context menu, object stacking) and clear() does not announce removals - getScenePoint/setDimensions instead of getPointer/setWidth/setHeight - the free drawing brush is created when a drawing tool needs it - the background is set by property instead of setBackgroundColor/Image - undo of a modification no longer sets read-only or nested properties
Sample data of the showcase (fabric 3/4 JSON) loads with the same objects, toJSON output loads again, the geometry of the shapes is the one fabric 4 produced, the pencil draws, undo and redo restore, and the methods (zoom, background, addImg, addText, copy/paste, removeSelected) behave as before.
The ^1.2.0 range was locked to 1.2.5 (prototype pollution advisory), which yarn audit reported through fabric > canvas > prebuild-install > rc. A lockfile merge with the 1.2.8 entry already present clears it. Also document the fabric 7 global of the UMD external and the JSON fromJSON accepts.
Also make the unmount explicit about the promise of the async dispose of fabric 7.
…hed versions (yarn audit clean)
…yle of the canvas
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
1 participant
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.
No description provided.