134 lines
4.6 KiB
Markdown
134 lines
4.6 KiB
Markdown
|
# mmkr
|
||
|
|
||
|
> This project was create with [create-expression-lib](https://github.com/motiondeveloper/create-expression-lib)
|
||
|
|
||
|
## Use the library
|
||
|
|
||
|
1. Download the latest version from the releases page.
|
||
|
2. Import into After Effects and reference in your expressions
|
||
|
|
||
|
Learn more about writing `.jsx` files for After Effects here: https://motiondeveloper.com/blog/write-expressions-external-files/
|
||
|
|
||
|
## Development
|
||
|
|
||
|
1. **Clone project locally**
|
||
|
|
||
|
```sh
|
||
|
git clone repoUrl.git
|
||
|
cd mmkr
|
||
|
```
|
||
|
|
||
|
2. **Start Rollup**
|
||
|
|
||
|
Start Rollup in watch mode to automatically refresh your code as you make changes, by running:
|
||
|
|
||
|
```sh
|
||
|
npm run watch
|
||
|
```
|
||
|
|
||
|
_You can run also run a once off build:_ `npm run build`
|
||
|
|
||
|
3. **Edit the `src` files**
|
||
|
|
||
|
_The `index.ts` contains an example expression setup._
|
||
|
|
||
|
Any values exported from this file will be included in your library, for example:
|
||
|
|
||
|
```js
|
||
|
export { someValue };
|
||
|
```
|
||
|
|
||
|
4. **Import the `dist` file into After Effects**
|
||
|
|
||
|
Use the compiled output file as you would any other `.jsx` library. Any changes to the `src` files will be live updated, and After Effects will update the result of your expression.
|
||
|
|
||
|
5. **Distribute releases**
|
||
|
|
||
|
To distribute your output file using Github releases (via [Hub](https://github.com/github/hub)), use the command:
|
||
|
|
||
|
```sh
|
||
|
npm run release
|
||
|
```
|
||
|
|
||
|
This will use the GitHub CLI to create a new tag and release
|
||
|
|
||
|
The release version number is the `"version"` in `package.json`, and it will attach the `"main"` file to the release.
|
||
|
|
||
|
> You can add this version to the output file by placing the string `_npmVersion` in your code, which will be replaced with the version number in `package.json` at build time.
|
||
|
|
||
|
## After Effects API
|
||
|
|
||
|
> This template uses the [`expression-globals-typescript`](https://github.com/motiondeveloper/expression-globals-typescript) package to provide types for the expressions API.
|
||
|
|
||
|
### Classes
|
||
|
|
||
|
To create layers, compositions and properties, you can use the classes exported from the library. For example:
|
||
|
|
||
|
```ts
|
||
|
import { Comp, Layer } from 'expression-globals-typescript';
|
||
|
const thisComp = new Comp();
|
||
|
const thisLayer = new Layer();
|
||
|
```
|
||
|
|
||
|
To create properties (such as position or scale), you can use the `Property` class.
|
||
|
|
||
|
```ts
|
||
|
import { Property, Vector } from 'expression-globals-typescript';
|
||
|
const thisProperty = new Property<Vector>([0, 100]);
|
||
|
```
|
||
|
|
||
|
> The `Property` constructor takes a value to set as the property value, and a type (`<>`) to set as the type for the property.
|
||
|
|
||
|
### After Effects Types
|
||
|
|
||
|
You can import After Effect's specific types such as `Color` and `Vector` from the package to properly type your expressions.
|
||
|
|
||
|
#### _To see all the Types and Base Objects available, see the [`expression-globals-typescript`](https://github.com/motiondeveloper/expression-globals-typescript) source code._
|
||
|
|
||
|
## Testing
|
||
|
|
||
|
You can test your expression library code using [Jest](https://jestjs.io/), which comes pre-configured in this template repo.
|
||
|
|
||
|
You write tests in the `index.test.ts` file, importing the code you want to test from `index.ts`, for example:
|
||
|
|
||
|
```ts
|
||
|
import { welcome } from './index';
|
||
|
|
||
|
test('returns correct welcome string', () => {
|
||
|
expect(welcome('test')).toEqual('Welcome test!');
|
||
|
});
|
||
|
```
|
||
|
|
||
|
And then run the test suite:
|
||
|
|
||
|
```sh
|
||
|
npm run test
|
||
|
```
|
||
|
|
||
|
Which will run Jest in watch mode.
|
||
|
|
||
|
> You can learn more about testing using Jest from the [Jest docs](https://jestjs.io/docs/en/getting-started).
|
||
|
|
||
|
## Configuration
|
||
|
|
||
|
There a couple of files you may wish to change to reflect the content of your project:
|
||
|
|
||
|
- `package.json`:
|
||
|
- `version`: The current version of the library, which is used for releases and added to `dist` files.
|
||
|
- `main`: The build output file which will be attached to releases
|
||
|
- `rollup.config.js`:
|
||
|
- `input`: The source file to be built
|
||
|
- `typescript()`: Custom typescript compiler options
|
||
|
|
||
|
## How
|
||
|
|
||
|
- [expression-globals-typescript](https://github.com/motiondeveloper/expression-globals-typescript) mocks the After Effects expressions API in typescript, so you can use global functions and objects such as `linear()` and `time`, while also providing expression specific types such as `Layer`.
|
||
|
|
||
|
- [Rollup](https://rollupjs.org/) is a lightweight module bundler that handles outputting the `.jsx` file via the plugins below.
|
||
|
|
||
|
- The Rollup [Typescript plugin](https://www.npmjs.com/package/@rollup/plugin-typescript) runs the TypeScript compiler
|
||
|
|
||
|
- The Rollup plugin [rollup-plugin-ae-jsx](https://www.npmjs.com/package/rollup-plugin-ae-jsx) transforms the JavaScript output into After Effects JSON (`.jsx`) compliant syntax
|
||
|
|
||
|
- Testing via [Jest](https://jestjs.io/), and [ts-jest](https://github.com/kulshekhar/ts-jest)
|