@remotion/skia 3.3.93 → 3.3.95

package/dist/cjs/SkiaCanvas.js

@@ -11,18 +11,20 @@ const remotion_1 = require("remotion");
  */
 const SkiaCanvas = ({ children, height, width, style, ...otherProps }) => {
     const contexts = remotion_1.Internals.useRemotionContexts();
+    const mergedStyles = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            width,
+            height,
+            ...((_a = style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [height, style, width]);
     const props = (0, react_1.useMemo)(() => {
         return {
-            style: [
-                {
-                    width,
-                    height,
-                },
-                style,
-            ],
+            style: mergedStyles,
             ...otherProps,
         };
-    }, [height, otherProps, style, width]);
+    }, [mergedStyles, otherProps]);
     return ((0, jsx_runtime_1.jsx)(react_native_skia_1.Canvas, { ...props, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: children }) }));
 };
 exports.SkiaCanvas = SkiaCanvas;

package/dist/cjs/enable.js

@@ -4,7 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableSkia = void 0;
-const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
+const bundler_1 = require("@remotion/bundler");
+const fs_1 = __importDefault(require("fs"));
 /**
  * @description A function that modifies the default Webpack configuration to make the necessary changes to support Skia.
  * @see [Documentation](https://www.remotion.dev/docs/skia/enable-skia)
@@ -15,11 +16,23 @@ const enableSkia = (currentConfiguration) => {
         ...currentConfiguration,
         plugins: [
             ...((_a = currentConfiguration.plugins) !== null && _a !== void 0 ? _a : []),
-            new copy_webpack_plugin_1.default({
-                patterns: [
-                    { from: 'node_modules/canvaskit-wasm/bin/full/canvaskit.wasm' },
-                ],
-            }),
+            new (class CopySkiaPlugin {
+                apply(compiler) {
+                    compiler.hooks.thisCompilation.tap('AddSkiaPlugin', (compilation) => {
+                        compilation.hooks.processAssets.tapPromise({
+                            name: 'copy-skia',
+                            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+                        }, async () => {
+                            const src = require.resolve('canvaskit-wasm/bin/full/canvaskit.wasm');
+                            if (compilation.getAsset(src)) {
+                                // Skip emitting the asset again because it's immutable
+                                return;
+                            }
+                            compilation.emitAsset('/canvaskit.wasm', new bundler_1.webpack.sources.RawSource(await fs_1.default.promises.readFile(src)));
+                        });
+                    });
+                }
+            })(),
         ],
         resolve: {
             ...currentConfiguration.resolve,

package/dist/esm/enable.mjs

@@ -1,4 +1,5 @@
-import CopyPlugin from 'copy-webpack-plugin';
+import { webpack } from '@remotion/bundler';
+import fs from 'fs';
 
 /**
  * @description A function that modifies the default Webpack configuration to make the necessary changes to support Skia.
@@ -10,11 +11,23 @@ const enableSkia = (currentConfiguration) => {
         ...currentConfiguration,
         plugins: [
             ...((_a = currentConfiguration.plugins) !== null && _a !== void 0 ? _a : []),
-            new CopyPlugin({
-                patterns: [
-                    { from: 'node_modules/canvaskit-wasm/bin/full/canvaskit.wasm' },
-                ],
-            }),
+            new (class CopySkiaPlugin {
+                apply(compiler) {
+                    compiler.hooks.thisCompilation.tap('AddSkiaPlugin', (compilation) => {
+                        compilation.hooks.processAssets.tapPromise({
+                            name: 'copy-skia',
+                            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+                        }, async () => {
+                            const src = require.resolve('canvaskit-wasm/bin/full/canvaskit.wasm');
+                            if (compilation.getAsset(src)) {
+                                // Skip emitting the asset again because it's immutable
+                                return;
+                            }
+                            compilation.emitAsset('/canvaskit.wasm', new webpack.sources.RawSource(await fs.promises.readFile(src)));
+                        });
+                    });
+                }
+            })(),
         ],
         resolve: {
             ...currentConfiguration.resolve,

package/dist/esm/index.mjs

@@ -9,18 +9,20 @@ import { Internals } from 'remotion';
  */
 const SkiaCanvas = ({ children, height, width, style, ...otherProps }) => {
     const contexts = Internals.useRemotionContexts();
+    const mergedStyles = useMemo(() => {
+        var _a;
+        return {
+            width,
+            height,
+            ...((_a = style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [height, style, width]);
     const props = useMemo(() => {
         return {
-            style: [
-                {
-                    width,
-                    height,
-                },
-                style,
-            ],
+            style: mergedStyles,
             ...otherProps,
         };
-    }, [height, otherProps, style, width]);
+    }, [mergedStyles, otherProps]);
     return (jsx(Canvas, { ...props, children: jsx(Internals.RemotionContextProvider, { contexts: contexts, children: children }) }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/skia",
-  "version": "3.3.93",
+  "version": "3.3.95",
   "description": "Utilities for using react-native-skia in Remotion",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -16,20 +16,18 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "copy-webpack-plugin": "11",
-    "remotion": "3.3.93"
+    "remotion": "3.3.95"
   },
   "peerDependencies": {
-    "@remotion/bundler": "3.3.93",
-    "@shopify/react-native-skia": "^0.1.190",
+    "@shopify/react-native-skia": "^0.1.191",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.266",
-    "@remotion/bundler": "3.3.93",
+    "@remotion/bundler": "3.3.95",
     "@rollup/plugin-typescript": "^8.2.0",
-    "@shopify/react-native-skia": "^0.1.190",
+    "@shopify/react-native-skia": "^0.1.191",
     "@types/react": "18.0.26",
     "@types/react-native": "^0.69.2",
     "eslint": "8.25.0",
@@ -37,7 +35,7 @@
     "prettier-plugin-organize-imports": "^2.3.4",
     "react": "18.0.0",
     "react-dom": "18.0.0",
-    "remotion": "3.3.93",
+    "remotion": "3.3.95",
     "rollup": "^2.70.1",
     "typescript": "^4.7.0"
   },