After Effects .jsx Script Runner (tsx version)
- Windows
- Mac Os (not supported yet)
Usage
Open Adobe After Effects, and open .jsx
or .tsx
file in vscode, you can get the cammand in editor title /context menu/ command
fail?
- make sure you have a
ts
environment (nodejs...)
- make sure you get a right tsconfig-ae.json/tsconfig.json configuration file( if you don't have a
tsconfig-ae.json
, extension will use tsconfig.json
instead)
tsconfig.json
donot add extra commas (like this {... [ opA:1, opB:2,] ...})
How it works
- Use child_process to retrieve the location of the running After Effects application.
- Search for the
tsconfig-ae.json
file, if not found, fall back to using tsconfig.json
. to get the outDir
option.
- Search for the
rollup.config.js
file, if found, create tsx-link.json
file, write input
and output
, then use rollup -c
to compile.(replace using tsc
)
- Run the final script.
tsconfig.json
outDir
: AE Script run directory
ES3
: AE Script version
types-for-adobe :AE Script type support
your tsconfig.json
(for testing your ae script) like:
{
"compilerOptions": {
"target": "ES3",
"ignoreDeprecations": "5.0",
"strict": true,
"noLib": true,
"outDir": "./dist",
"jsx": "preserve",
"useDefineForClassFields": false,
"noUnusedParameters": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"noEmit": false,
"resolveJsonModule": true,
"esModuleInterop": true,
"types": ["./node_modules/types-for-adobe/AfterEffects/22.0"]
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules"]
}
rollup
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex.
▷ install
npm install typescript rollup rollup-plugin-typescript2 --save-dev
▷ Import Sample
// A.tsx
export const str = "Hello World";
// B.tsx
import {num} from "./A"
alert(str)
▷ rollup.config.js
import typescript from "rollup-plugin-typescript2";
import * as fs from "fs";
// tsk-link.json(auto generate)
const readJSONFile = (filePath) => {
const data = fs.readFileSync(filePath, { encoding: "utf8" });
return JSON.parse(data);
};
const tsx_link = readJSONFile("./tsx-link.json");
export default {
input: tsx_link["input"],
output: {
file: tsx_link["output"],
format: "iife",
name: "MyApp",
},
plugins: [
typescript({
tsconfig: "tsconfig.json",
}),
],
};
sample file containing
/.vscode
dist
src
--/lib
--/public
--/utils
--main.tsx
tsconfig-ae.json
tsconfig.json
rollup.config.js
tsx-link.json(auto generate)
Reference
atarabi.ae-script-runner
vscode-ae-script-linker