@h4md1/visual-image-tool 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -5
- package/dist/{visual-image-tool.js → visual-image-tool.cjs} +257 -165
- package/dist/visual-image-tool.cjs.map +1 -0
- package/dist/visual-image-tool.esm.js +257 -162
- package/dist/visual-image-tool.esm.js.map +1 -1
- package/dist/visual-image-tool.umd.js +1 -1
- package/dist/visual-image-tool.umd.js.map +1 -1
- package/package.json +24 -8
- package/src/index.js +3 -6
- package/src/visual-image-tool.js +255 -155
- package/src/visual-image-tool.test.js +150 -0
- package/dist/visual-image-tool.js.map +0 -1
package/README.md
CHANGED
|
@@ -23,13 +23,13 @@ npm install @h4md1/visual-image-tool
|
|
|
23
23
|
|
|
24
24
|
```javascript
|
|
25
25
|
// ES modules import (recommended)
|
|
26
|
-
import VisualImageTool from "@h4md1/visual-image-tool";
|
|
26
|
+
import { VisualImageTool } from "@h4md1/visual-image-tool";
|
|
27
27
|
|
|
28
28
|
// OR CommonJS import
|
|
29
|
-
const VisualImageTool = require("@h4md1/visual-image-tool");
|
|
29
|
+
const { VisualImageTool } = require("@h4md1/visual-image-tool");
|
|
30
30
|
|
|
31
31
|
// OR direct usage via script tag (UMD)
|
|
32
|
-
// <script src="node_modules/image-tool/dist/image-tool.umd.js"></script>
|
|
32
|
+
// <script src="node_modules/@h4md1/visual-image-tool/dist/visual-image-tool.umd.js"></script>
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
### 2. Initialization
|
|
@@ -188,7 +188,7 @@ The tool uses the `onChange` callback to notify about changes. This callback rec
|
|
|
188
188
|
|
|
189
189
|
```jsx
|
|
190
190
|
import React, { useEffect, useRef } from "react";
|
|
191
|
-
import VisualImageTool from "@h4md1/visual-image-tool";
|
|
191
|
+
import { VisualImageTool } from "@h4md1/visual-image-tool";
|
|
192
192
|
|
|
193
193
|
function ImageEditor() {
|
|
194
194
|
const imageRef = useRef(null);
|
|
@@ -235,7 +235,7 @@ function ImageEditor() {
|
|
|
235
235
|
</template>
|
|
236
236
|
|
|
237
237
|
<script>
|
|
238
|
-
import VisualImageTool from "@h4md1/visual-image-tool";
|
|
238
|
+
import { VisualImageTool } from "@h4md1/visual-image-tool";
|
|
239
239
|
|
|
240
240
|
export default {
|
|
241
241
|
data() {
|
|
@@ -299,6 +299,22 @@ This project uses a combination of tools for code formatting and linting to ensu
|
|
|
299
299
|
|
|
300
300
|
These formatting checks are automatically enforced in the CI pipeline (see `.github/workflows/code-quality.yml`) to maintain code quality.
|
|
301
301
|
|
|
302
|
+
## Tests
|
|
303
|
+
|
|
304
|
+
This project uses [Vitest](https://vitest.dev/) and [JSDOM](https://github.com/jsdom/jsdom) for unit tests. They cover the main public API.
|
|
305
|
+
|
|
306
|
+
```bash
|
|
307
|
+
npm test
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
Watch mode:
|
|
311
|
+
|
|
312
|
+
```bash
|
|
313
|
+
npm run test:watch
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
Tests also run in GitHub Actions on pushes and pull requests to `main`.
|
|
317
|
+
|
|
302
318
|
## License
|
|
303
319
|
|
|
304
320
|
MIT
|