abstract-image - npm Package Compare versions

Comparing version 10.0.5 to 11.0.1

CHANGELOG.md

@@ -5,5 +5,9 @@ # Change Log
 
+## [11.0.0] - 2024-11-29
+
+- createReactSvg -> ReactSvg (jsx-syntax), make it React 19 compatible
+
 ## [10.0.0] - 2024-11-29
 
-- ~~Switch to ES Modules from CommonJS~~
+- ~~Switch to ES Modules from CommonJS~~ Libraries should be in commonjs, for now...
 
@@ -10,0 +14,0 @@ ## [9.0.0] - 2024-11-28

lib/__stories__/react-svg-export/example-1.stories.js

@@ -46,3 +46,3 @@ "use strict";
     const image = AbstractImage.createAbstractImage(AbstractImage.createPoint(0, 0), AbstractImage.createSize(400, 400), AbstractImage.white, components);
-    const svg = AbstractImage.createReactSvg(image);
+    const svg = React.createElement(AbstractImage.ReactSvg, { image: image });
     return (React.createElement("div", null,
@@ -49,0 +49,0 @@ React.createElement("h1", null, "React Svg"),

lib/exporters/react-svg-export-image.d.ts

@@ -1,2 +0,2 @@
-import * as React from "react";
+import React from "react";
 import * as AbstractImage from "../model/index.js";
@@ -10,3 +10,6 @@ export interface ReactSvgCallbacks {
 export type MouseCallback = (id: string | undefined, point: AbstractImage.Point) => void;
-export declare function createReactSvg(image: AbstractImage.AbstractImage, callbacks?: ReactSvgCallbacks): React.ReactElement<{}>;
+export declare function ReactSvg({ image, callbacks, }: {
+    readonly image: AbstractImage.AbstractImage;
+    readonly callbacks?: ReactSvgCallbacks;
+}): React.JSX.Element;
 //# sourceMappingURL=react-svg-export-image.d.ts.map

lib/exporters/react-svg-export-image.js

@@ -35,11 +35,14 @@ "use strict";
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createReactSvg = createReactSvg;
+exports.ReactSvg = ReactSvg;
 const B64 = __importStar(require("base64-js"));
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const AbstractImage = __importStar(require("../model/index.js"));
-function createReactSvg(image, callbacks) {
+function ReactSvg({ image, callbacks, }) {
     const cb = callbacks || {};
     const id = "ai_root";
-    return (React.createElement("svg", { id: id, width: `${image.size.width}px`, height: `${image.size.height}px`, viewBox: [0, 0, image.size.width, image.size.height].join(" "), onClick: _callback(cb.onClick, id), onDoubleClick: _callback(cb.onDoubleClick, id), onMouseMove: _callback(cb.onMouseMove, id), onContextMenu: _callback(cb.onContextMenu, id) }, image.components.map((c, i) => (React.createElement(Component, { key: i, component: c })))));
+    return (react_1.default.createElement("svg", { id: id, width: `${image.size.width}px`, height: `${image.size.height}px`, viewBox: [0, 0, image.size.width, image.size.height].join(" "), onClick: _callback(cb.onClick, id), onDoubleClick: _callback(cb.onDoubleClick, id), onMouseMove: _callback(cb.onMouseMove, id), onContextMenu: _callback(cb.onContextMenu, id) }, image.components.map((c, i) => (react_1.default.createElement(Component, { key: i, component: c })))));
 }
@@ -79,14 +82,14 @@ function _callback(callback, rootId) {
         case "group":
-            return (React.createElement("g", { name: component.name }, component.children.flatMap((c, i) => (React.createElement(Component, { key: i, component: c })))));
+            return (react_1.default.createElement("g", { name: component.name }, component.children.flatMap((c, i) => (react_1.default.createElement(Component, { key: i, component: c })))));
         case "binaryimage":
             const url = getImageUrl(component.format, component.data);
-            return (React.createElement("image", { x: component.topLeft.x, y: component.topLeft.y, width: component.bottomRight.x - component.topLeft.x, height: component.bottomRight.y - component.topLeft.y, id: makeIdAttr(component.id), href: url }));
+            return (react_1.default.createElement("image", { x: component.topLeft.x, y: component.topLeft.y, width: component.bottomRight.x - component.topLeft.x, height: component.bottomRight.y - component.topLeft.y, id: makeIdAttr(component.id), href: url }));
         case "line": {
             const strokeDasharray = component.strokeDashStyle.dashes.length > 0 ? component.strokeDashStyle.dashes.join(" ") : undefined;
             const strokeDashoffset = component.strokeDashStyle.dashes.length > 0 ? component.strokeDashStyle.offset : undefined;
-            return (React.createElement("line", { id: makeIdAttr(component.id), x1: component.start.x, y1: component.start.y, x2: component.end.x, y2: component.end.y, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset }));
+            return (react_1.default.createElement("line", { id: makeIdAttr(component.id), x1: component.start.x, y1: component.start.y, x2: component.end.x, y2: component.end.y, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset }));
         }
         case "text": {
             if (!component.text) {
-                return React.createElement(React.Fragment, null);
+                return react_1.default.createElement(react_1.default.Fragment, null);
             }
@@ -96,3 +99,3 @@ const alignmentBaseline = getBaselineAdjustment(component.verticalGrowthDirection);
             const lines = component.text !== null ? component.text.split("\n") : [];
-            const tSpans = lines.map((t, i) => (React.createElement(TSpan, { key: t, text: t, x: component.position.x, y: component.position.y + i * component.fontSize, fontSize: component.fontSize, alignmentBaseline: alignmentBaseline, lineHeight: component.fontSize })));
+            const tSpans = lines.map((t, i) => (react_1.default.createElement(TSpan, { key: t, text: t, x: component.position.x, y: component.position.y + i * component.fontSize, fontSize: component.fontSize, alignmentBaseline: alignmentBaseline, lineHeight: component.fontSize })));
             const baseStyle = {
@@ -104,4 +107,4 @@ textAnchor: getTextAnchor(component.horizontalGrowthDirection),
             };
-            return (React.createElement(React.Fragment, null,
-                component.strokeThickness > 0 && component.strokeColor && (React.createElement("text", { style: {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                component.strokeThickness > 0 && component.strokeColor && (react_1.default.createElement("text", { style: {
                         ...baseStyle,
@@ -111,3 +114,3 @@ stroke: colorToRgb(component.strokeColor),
                     }, transform: transform }, tSpans)),
-                React.createElement("text", { style: { ...baseStyle, fill: colorToRgb(component.textColor) }, transform: transform, id: makeIdAttr(component.id) }, tSpans)));
+                react_1.default.createElement("text", { style: { ...baseStyle, fill: colorToRgb(component.textColor) }, transform: transform, id: makeIdAttr(component.id) }, tSpans)));
         }
@@ -121,3 +124,3 @@ case "ellipse": {
             const strokeDashoffset = component.strokeDashStyle.dashes.length > 0 ? component.strokeDashStyle.offset : undefined;
-            return (React.createElement("ellipse", { id: makeIdAttr(component.id), cx: cx, cy: cy, rx: rx, ry: ry, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fillOpacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) }));
+            return (react_1.default.createElement("ellipse", { id: makeIdAttr(component.id), cx: cx, cy: cy, rx: rx, ry: ry, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fillOpacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) }));
         }
@@ -128,3 +131,3 @@ case "polyline": {
             const strokeDashoffset = component.strokeDashStyle.dashes.length > 0 ? component.strokeDashStyle.offset : undefined;
-            return (React.createElement("polyline", { id: makeIdAttr(component.id), points: linePoints, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fill: "none" }));
+            return (react_1.default.createElement("polyline", { id: makeIdAttr(component.id), points: linePoints, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fill: "none" }));
         }
@@ -135,3 +138,3 @@ case "polygon": {
             const strokeDashoffset = component.strokeDashStyle.dashes.length > 0 ? component.strokeDashStyle.offset : undefined;
-            return (React.createElement("polygon", { id: makeIdAttr(component.id), points: points, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fillOpacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) }));
+            return (react_1.default.createElement("polygon", { id: makeIdAttr(component.id), points: points, stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fillOpacity: colorToOpacity(component.fillColor), fill: colorToRgb(component.fillColor) }));
         }
@@ -141,6 +144,6 @@ case "rectangle": {
             const strokeDashoffset = component.strokeDashStyle.dashes.length > 0 ? component.strokeDashStyle.offset : undefined;
-            return (React.createElement("rect", { id: makeIdAttr(component.id), x: component.topLeft.x, y: component.topLeft.y, width: Math.abs(component.bottomRight.x - component.topLeft.x), height: Math.abs(component.bottomRight.y - component.topLeft.y), stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fillOpacity: colorToOpacity(component.fillColor), ...(component.radius ? { rx: component.radius.x.toString(), ry: component.radius.y.toString() } : {}), fill: colorToRgb(component.fillColor) }));
+            return (react_1.default.createElement("rect", { id: makeIdAttr(component.id), x: component.topLeft.x, y: component.topLeft.y, width: Math.abs(component.bottomRight.x - component.topLeft.x), height: Math.abs(component.bottomRight.y - component.topLeft.y), stroke: colorToRgb(component.strokeColor), strokeWidth: component.strokeThickness, strokeOpacity: colorToOpacity(component.strokeColor), strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, fillOpacity: colorToOpacity(component.fillColor), ...(component.radius ? { rx: component.radius.x.toString(), ry: component.radius.y.toString() } : {}), fill: colorToRgb(component.fillColor) }));
         }
         default:
-            return React.createElement(React.Fragment, null);
+            return react_1.default.createElement(react_1.default.Fragment, null);
     }
@@ -184,10 +187,10 @@ }
         if (inside) {
-            tags.push(React.createElement("tspan", { key: i, baselineShift: "sub", alignmentBaseline: alignmentBaseline, style: { fontSize: (fontSize * 0.8).toString() + "px" } }, splitText));
+            tags.push(react_1.default.createElement("tspan", { key: i, baselineShift: "sub", alignmentBaseline: alignmentBaseline, style: { fontSize: (fontSize * 0.8).toString() + "px" } }, splitText));
         }
         else {
-            tags.push(React.createElement("tspan", { key: i, alignmentBaseline: alignmentBaseline }, splitText));
+            tags.push(react_1.default.createElement("tspan", { key: i, alignmentBaseline: alignmentBaseline }, splitText));
         }
         inside = !inside;
     }
-    return (React.createElement("tspan", { x: x, y: y, height: lineHeight.toString() + "px" }, tags));
+    return (react_1.default.createElement("tspan", { x: x, y: y, height: lineHeight.toString() + "px" }, tags));
 }
@@ -194,0 +197,0 @@ function getBaselineAdjustment(d) {

lib/index.js

@@ -28,3 +28,2 @@ "use strict";
 __exportStar(require("./exporters/eps-export-image.js"), exports);
-//dummy
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "abstract-image",
-  "version": "10.0.5",
+  "version": "11.0.1",
   "description": "Dynamically create images using code or JSX and render to any format",
@@ -23,4 +23,3 @@ "repository": "https://github.com/dividab/abstract-visuals/tree/master/packages/abstract-image",
     "base64-js": "^1.5.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1"
   },
@@ -30,7 +29,6 @@ "devDependencies": {
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "vite": "^6.0.1",
     "vitest": "^2.1.6"
   },
-  "gitHead": "abd31eaf1d1e0b039725958bda658910454f50e6"
+  "gitHead": "5f7b5c5a34806b8e6bd9cf42bdf51e985de65c3a"
 }

src/index.ts

@@ -13,2 +13,1 @@ export * from "./model/abstract-image.js";
 export * from "./exporters/eps-export-image.js";
-//dummy

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

190918

increased by0.31%

Dependency count

2

decreased by-33.33%

Dev dependency count

4

decreased by-20%

Lines of code

3209

increased by0.22%

Dependency changes

• - Removedreact-dom@^18.3.1

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)