@remotion/skia 4.0.0-alpha.217 → 4.0.0-alpha10

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.
Files changed (5) hide show
  1. package/dist/cjs/SkiaCanvas.js +10 -8
  2. package/dist/cjs/enable.js +25 -8
  3. package/dist/esm/enable.mjs +25 -8
  4. package/dist/esm/index.mjs +10 -8
  5. package/package.json +76 -78
package/dist/cjs/SkiaCanvas.js CHANGED
@@ -11,18 +11,20 @@ const remotion_1 = require("remotion");
11
11
  */
12
12
  const SkiaCanvas = ({ children, height, width, style, ...otherProps }) => {
13
13
  const contexts = remotion_1.Internals.useRemotionContexts();
14
+ const mergedStyles = (0, react_1.useMemo)(() => {
15
+ var _a;
16
+ return {
17
+ width,
18
+ height,
19
+ ...((_a = style) !== null && _a !== void 0 ? _a : {}),
20
+ };
21
+ }, [height, style, width]);
14
22
  const props = (0, react_1.useMemo)(() => {
15
23
  return {
16
- style: [
17
- {
18
- width,
19
- height,
20
- },
21
- style,
22
- ],
24
+ style: mergedStyles,
23
25
  ...otherProps,
24
26
  };
25
- }, [height, otherProps, style, width]);
27
+ }, [mergedStyles, otherProps]);
26
28
  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 }) }));
27
29
  };
28
30
  exports.SkiaCanvas = SkiaCanvas;
package/dist/cjs/enable.js CHANGED
@@ -4,22 +4,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.enableSkia = void 0;
7
- const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
7
+ const bundler_1 = require("@remotion/bundler");
8
+ const fs_1 = __importDefault(require("fs"));
8
9
  /**
9
10
  * @description A function that modifies the default Webpack configuration to make the necessary changes to support Skia.
10
11
  * @see [Documentation](https://www.remotion.dev/docs/skia/enable-skia)
11
12
  */
12
13
  const enableSkia = (currentConfiguration) => {
13
- var _a, _b;
14
+ var _a, _b, _c;
14
15
  return {
15
16
  ...currentConfiguration,
16
17
  plugins: [
17
18
  ...((_a = currentConfiguration.plugins) !== null && _a !== void 0 ? _a : []),
18
- new copy_webpack_plugin_1.default({
19
- patterns: [
20
- { from: 'node_modules/canvaskit-wasm/bin/full/canvaskit.wasm' },
21
- ],
22
- }),
19
+ new (class CopySkiaPlugin {
20
+ apply(compiler) {
21
+ compiler.hooks.thisCompilation.tap('AddSkiaPlugin', (compilation) => {
22
+ compilation.hooks.processAssets.tapPromise({
23
+ name: 'copy-skia',
24
+ stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
25
+ }, async () => {
26
+ const src = require.resolve('canvaskit-wasm/bin/full/canvaskit.wasm');
27
+ if (compilation.getAsset(src)) {
28
+ // Skip emitting the asset again because it's immutable
29
+ return;
30
+ }
31
+ compilation.emitAsset('/canvaskit.wasm', new bundler_1.webpack.sources.RawSource(await fs_1.default.promises.readFile(src)));
32
+ });
33
+ });
34
+ }
35
+ })(),
23
36
  ],
24
37
  resolve: {
25
38
  ...currentConfiguration.resolve,
@@ -37,9 +50,13 @@ const enableSkia = (currentConfiguration) => {
37
50
  '.tsx',
38
51
  '...',
39
52
  ],
53
+ alias: {
54
+ ...(_b = currentConfiguration.resolve) === null || _b === void 0 ? void 0 : _b.alias,
55
+ 'react-native$': 'react-native-web',
56
+ },
40
57
  },
41
58
  externals: {
42
- ...((_b = currentConfiguration.externals) !== null && _b !== void 0 ? _b : {}),
59
+ ...((_c = currentConfiguration.externals) !== null && _c !== void 0 ? _c : {}),
43
60
  'react-native-reanimated': "require('react-native-reanimated')",
44
61
  'react-native-reanimated/lib/reanimated2/core': "require('react-native-reanimated/lib/reanimated2/core')",
45
62
  },
package/dist/esm/enable.mjs CHANGED
@@ -1,20 +1,33 @@
1
- import CopyPlugin from 'copy-webpack-plugin';
1
+ import { webpack } from '@remotion/bundler';
2
+ import fs from 'fs';
2
3
 
3
4
  /**
4
5
  * @description A function that modifies the default Webpack configuration to make the necessary changes to support Skia.
5
6
  * @see [Documentation](https://www.remotion.dev/docs/skia/enable-skia)
6
7
  */
7
8
  const enableSkia = (currentConfiguration) => {
8
- var _a, _b;
9
+ var _a, _b, _c;
9
10
  return {
10
11
  ...currentConfiguration,
11
12
  plugins: [
12
13
  ...((_a = currentConfiguration.plugins) !== null && _a !== void 0 ? _a : []),
13
- new CopyPlugin({
14
- patterns: [
15
- { from: 'node_modules/canvaskit-wasm/bin/full/canvaskit.wasm' },
16
- ],
17
- }),
14
+ new (class CopySkiaPlugin {
15
+ apply(compiler) {
16
+ compiler.hooks.thisCompilation.tap('AddSkiaPlugin', (compilation) => {
17
+ compilation.hooks.processAssets.tapPromise({
18
+ name: 'copy-skia',
19
+ stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
20
+ }, async () => {
21
+ const src = require.resolve('canvaskit-wasm/bin/full/canvaskit.wasm');
22
+ if (compilation.getAsset(src)) {
23
+ // Skip emitting the asset again because it's immutable
24
+ return;
25
+ }
26
+ compilation.emitAsset('/canvaskit.wasm', new webpack.sources.RawSource(await fs.promises.readFile(src)));
27
+ });
28
+ });
29
+ }
30
+ })(),
18
31
  ],
19
32
  resolve: {
20
33
  ...currentConfiguration.resolve,
@@ -32,9 +45,13 @@ const enableSkia = (currentConfiguration) => {
32
45
  '.tsx',
33
46
  '...',
34
47
  ],
48
+ alias: {
49
+ ...(_b = currentConfiguration.resolve) === null || _b === void 0 ? void 0 : _b.alias,
50
+ 'react-native$': 'react-native-web',
51
+ },
35
52
  },
36
53
  externals: {
37
- ...((_b = currentConfiguration.externals) !== null && _b !== void 0 ? _b : {}),
54
+ ...((_c = currentConfiguration.externals) !== null && _c !== void 0 ? _c : {}),
38
55
  'react-native-reanimated': "require('react-native-reanimated')",
39
56
  'react-native-reanimated/lib/reanimated2/core': "require('react-native-reanimated/lib/reanimated2/core')",
40
57
  },
package/dist/esm/index.mjs CHANGED
@@ -9,18 +9,20 @@ import { Internals } from 'remotion';
9
9
  */
10
10
  const SkiaCanvas = ({ children, height, width, style, ...otherProps }) => {
11
11
  const contexts = Internals.useRemotionContexts();
12
+ const mergedStyles = useMemo(() => {
13
+ var _a;
14
+ return {
15
+ width,
16
+ height,
17
+ ...((_a = style) !== null && _a !== void 0 ? _a : {}),
18
+ };
19
+ }, [height, style, width]);
12
20
  const props = useMemo(() => {
13
21
  return {
14
- style: [
15
- {
16
- width,
17
- height,
18
- },
19
- style,
20
- ],
22
+ style: mergedStyles,
21
23
  ...otherProps,
22
24
  };
23
- }, [height, otherProps, style, width]);
25
+ }, [mergedStyles, otherProps]);
24
26
  return (jsx(Canvas, { ...props, children: jsx(Internals.RemotionContextProvider, { contexts: contexts, children: children }) }));
25
27
  };
26
28
 
package/package.json CHANGED
@@ -1,79 +1,77 @@
1
1
  {
2
- "name": "@remotion/skia",
3
- "version": "4.0.0-alpha.217+27eff7599",
4
- "description": "Utilities for using react-native-skia in Remotion",
5
- "main": "dist/cjs/index.js",
6
- "types": "dist/cjs/index.d.ts",
7
- "module": "dist/esm/index.mjs",
8
- "sideEffects": false,
9
- "scripts": {
10
- "lint": "eslint src --ext ts,tsx",
11
- "watch": "tsc -w",
12
- "build": "rollup --config rollup-enable.config.js && rollup --config rollup.config.js && tsc -d"
13
- },
14
- "author": "Jonny Burger <jonny@remotion.dev>, William Candillon <wcandillon@gmail.com>",
15
- "contributors": [],
16
- "license": "MIT",
17
- "repository": {
18
- "url": "https://github.com/remotion-dev/remotion"
19
- },
20
- "bugs": {
21
- "url": "https://github.com/remotion-dev/remotion/issues"
22
- },
23
- "dependencies": {
24
- "copy-webpack-plugin": "11",
25
- "remotion": "4.0.0-alpha.217+27eff7599"
26
- },
27
- "peerDependencies": {
28
- "@remotion/bundler": "workspace:*",
29
- "@shopify/react-native-skia": "^0.1.139",
30
- "react": ">=16.8.0",
31
- "react-dom": ">=16.8.0"
32
- },
33
- "devDependencies": {
34
- "@jonny/eslint-config": "3.0.266",
35
- "@remotion/bundler": "4.0.0-alpha.217+27eff7599",
36
- "@rollup/plugin-typescript": "^8.2.0",
37
- "@shopify/react-native-skia": "^0.1.139",
38
- "@types/react": "18.0.26",
39
- "@types/react-native": "^0.69.2",
40
- "eslint": "8.25.0",
41
- "prettier": "^2.7.1",
42
- "prettier-plugin-organize-imports": "^2.3.4",
43
- "react": "18.0.0",
44
- "react-dom": "18.0.0",
45
- "remotion": "workspace:*",
46
- "rollup": "^2.70.1",
47
- "typescript": "^4.7.0"
48
- },
49
- "keywords": [
50
- "remotion",
51
- "skia"
52
- ],
53
- "publishConfig": {
54
- "access": "public"
55
- },
56
- "exports": {
57
- "./package.json": "./package.json",
58
- ".": {
59
- "types": "./dist/cjs/index.d.ts",
60
- "module": "./dist/esm/index.mjs",
61
- "import": "./dist/esm/index.mjs",
62
- "require": "./dist/cjs/index.js"
63
- },
64
- "./enable": {
65
- "types": "./dist/cjs/enable.d.ts",
66
- "module": "./dist/esm/enable.mjs",
67
- "import": "./dist/esm/enable.mjs",
68
- "require": "./dist/cjs/enable.js"
69
- }
70
- },
71
- "typesVersions": {
72
- ">=1.0": {
73
- "enable": [
74
- "dist/esm/enable.d.ts"
75
- ]
76
- }
77
- },
78
- "gitHead": "27eff759935b19b666e29f4f46dd5bdd6214e188"
79
- }
2
+ "name": "@remotion/skia",
3
+ "version": "4.0.0-alpha10",
4
+ "description": "Utilities for using react-native-skia in Remotion",
5
+ "main": "dist/cjs/index.js",
6
+ "types": "dist/cjs/index.d.ts",
7
+ "module": "dist/esm/index.mjs",
8
+ "sideEffects": false,
9
+ "author": "Jonny Burger <jonny@remotion.dev>, William Candillon <wcandillon@gmail.com>",
10
+ "contributors": [],
11
+ "license": "MIT",
12
+ "repository": {
13
+ "url": "https://github.com/remotion-dev/remotion"
14
+ },
15
+ "bugs": {
16
+ "url": "https://github.com/remotion-dev/remotion/issues"
17
+ },
18
+ "dependencies": {
19
+ "remotion": "4.0.0-alpha10"
20
+ },
21
+ "peerDependencies": {
22
+ "@shopify/react-native-skia": "^0.1.191",
23
+ "react": ">=16.8.0",
24
+ "react-dom": ">=16.8.0"
25
+ },
26
+ "devDependencies": {
27
+ "@jonny/eslint-config": "3.0.266",
28
+ "@rollup/plugin-typescript": "^8.2.0",
29
+ "@shopify/react-native-skia": "^0.1.191",
30
+ "@types/react": "18.0.26",
31
+ "@types/react-native": "^0.69.2",
32
+ "eslint": "8.25.0",
33
+ "prettier": "^2.7.1",
34
+ "prettier-plugin-organize-imports": "^2.3.4",
35
+ "react": "18.0.0",
36
+ "react-dom": "18.0.0",
37
+ "rollup": "^2.70.1",
38
+ "typescript": "^4.7.0",
39
+ "@remotion/bundler": "4.0.0-alpha10",
40
+ "remotion": "4.0.0-alpha10"
41
+ },
42
+ "keywords": [
43
+ "remotion",
44
+ "skia"
45
+ ],
46
+ "publishConfig": {
47
+ "access": "public"
48
+ },
49
+ "exports": {
50
+ "./package.json": "./package.json",
51
+ ".": {
52
+ "types": "./dist/cjs/index.d.ts",
53
+ "module": "./dist/esm/index.mjs",
54
+ "import": "./dist/esm/index.mjs",
55
+ "require": "./dist/cjs/index.js"
56
+ },
57
+ "./enable": {
58
+ "types": "./dist/cjs/enable.d.ts",
59
+ "module": "./dist/esm/enable.mjs",
60
+ "import": "./dist/esm/enable.mjs",
61
+ "require": "./dist/cjs/enable.js"
62
+ }
63
+ },
64
+ "typesVersions": {
65
+ ">=1.0": {
66
+ "enable": [
67
+ "dist/esm/enable.d.ts"
68
+ ]
69
+ }
70
+ },
71
+ "scripts": {
72
+ "formatting": "prettier src --check",
73
+ "lint": "eslint src --ext ts,tsx",
74
+ "watch": "tsc -w",
75
+ "build": "rollup --config rollup-enable.config.js && rollup --config rollup.config.js && tsc -d"
76
+ }
77
+ }