@remotion/shapes 4.0.85 → 4.0.87

package/dist/components/render-svg.js

@@ -26,6 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderSvg = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const does_react_support_canary_1 = require("../utils/does-react-support-canary");
 const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, debug, instructions, ...props }) => {
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
@@ -39,7 +41,10 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, deb
             ...(pathStyle !== null && pathStyle !== void 0 ? pathStyle : {}),
         };
     }, [pathStyle]);
-    return ((0, jsx_runtime_1.jsxs)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: [(0, jsx_runtime_1.jsx)("path", { "transform-origin": transformOrigin, d: path, style: actualPathStyle, ...props }), debug
+    const reactSupportsTransformOrigin = (0, does_react_support_canary_1.doesReactSupportTransformOriginProperty)(react_dom_1.version);
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: [(0, jsx_runtime_1.jsx)("path", { "transform-origin": reactSupportsTransformOrigin ? undefined : transformOrigin, 
+                // @ts-expect-error
+                transformOrigin: reactSupportsTransformOrigin ? transformOrigin : undefined, d: path, style: actualPathStyle, ...props }), debug
                 ? instructions.map((i, index) => {
                     if (i.type === 'C') {
                         const prevInstruction = index === 0

package/dist/utils/does-react-support-canary.d.ts

@@ -0,0 +1 @@
+export declare const doesReactSupportTransformOriginProperty: (version: string) => boolean;

package/dist/utils/does-react-support-canary.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.doesReactSupportTransformOriginProperty = void 0;
+const doesReactSupportTransformOriginProperty = (version) => {
+    if (version.includes('canary') || version.includes('experimental')) {
+        const last8Chars = parseInt(version.slice(-8), 10);
+        return last8Chars > 20230209;
+    }
+    const [major, minor] = version.split('.').map(Number);
+    return major > 18 || (major === 18 && minor >= 3);
+};
+exports.doesReactSupportTransformOriginProperty = doesReactSupportTransformOriginProperty;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/shapes",
-  "version": "4.0.85",
+  "version": "4.0.87",
   "description": "Utility functions and components for SVG shapes",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -13,6 +13,7 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "devDependencies": {
+    "@types/react-dom": "18.0.11",
     "@jonny/eslint-config": "3.0.276",
     "@testing-library/react": "^13.4.0",
     "@types/node": "18.14.6",
@@ -38,7 +39,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@remotion/paths": "4.0.85"
+    "@remotion/paths": "4.0.87"
   },
   "scripts": {
     "formatting": "prettier src --check",