You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create a `rollup.config.js`[configuration file](https://www.rollupjs.org/guide/en/#configuration-files), import the plugin, and add it to the `plugins` array:
26
26
27
27
```js
28
-
importafterEffectJsxfrom"./rollup-plugin-ae-jsx";
29
-
importpkgfrom"./package.json";
28
+
importafterEffectJsxfrom'./rollup-plugin-ae-jsx';
29
+
importpkgfrom'./package.json';
30
30
31
31
exportdefault {
32
-
input:"src/index.ts",
32
+
input:'src/index.ts',
33
33
output: {
34
-
file:"dist/index.jsx",
35
-
format:"es",
34
+
file:'dist/index.jsx',
35
+
format:'es',
36
36
},
37
37
external:Object.keys(pkg.dependencies),
38
38
plugins: [afterEffectJsx()],
@@ -44,13 +44,86 @@ export default {
44
44
45
45
Then call `rollup` either via the [CLI](https://www.rollupjs.org/guide/en/#command-line-reference) or the [API](https://www.rollupjs.org/guide/en/#javascript-api).
46
46
47
-
## Proccess
47
+
## Options
48
+
49
+
### `wrap`
50
+
51
+
Type: `boolean`\
52
+
Default: `false`
53
+
54
+
Wraps compiled code in a `get()` function. See [Wrapping](#wrapping) for more detail.
55
+
56
+
## Process
48
57
49
58
1. Creating a list of the exported functions and variables from the index file
3. Converting function and variable declarations into `.jsx` compliant syntax
52
61
4. Wrapping in braces (`{}`)
53
62
63
+
## Wrapping
64
+
65
+
Compiling code that references top level functions or variables will error when run in After Effects, since each exported property is isolated from the surrounding code.
66
+
67
+
For example the following source code:
68
+
69
+
```js
70
+
functionadd(a, b) {
71
+
return a + b;
72
+
}
73
+
74
+
functiongetFour() {
75
+
returnadd(2, 2);
76
+
}
77
+
78
+
export { add, getFour };
79
+
```
80
+
81
+
Will compile to the following `.jsx` file:
82
+
83
+
```js
84
+
{
85
+
add(a, b) {
86
+
return a + b;
87
+
},
88
+
getFour() {
89
+
returnadd(2, 2); // error, add is not defined
90
+
}
91
+
}
92
+
```
93
+
94
+
Which will error, since `add()` is not defined within the scope of `getFour()`.
95
+
96
+
This can be solved by wrapping all of your code in a parent function, which `rollup-plugin-jsx` will do for you if `wrap` is set to true.
97
+
98
+
```js
99
+
// rollup.config.js
100
+
plugins: [afterEffectJsx({ wrap:true })],
101
+
```
102
+
103
+
The compiled `.jsx` would then be:
104
+
105
+
```js
106
+
{
107
+
get() {
108
+
functionadd(a, b) {
109
+
return a + b;
110
+
}
111
+
112
+
functiongetFour() {
113
+
returnadd(2, 2);
114
+
}
115
+
116
+
return { add, getFour }
117
+
}
118
+
}
119
+
```
120
+
121
+
You then would need to call `.get()` in your expressions:
0 commit comments