fusepilot/parcel-plugin-cep

Zero configuration CEP extension builder for Parcel

Parcel CEP Plugin

Zero configuration CEP extension builder for Parcel.

Quick Start

git clone https://github.com/fusepilot/parcel-plugin-cep-starter.git
cd parcel-plugin-cep-starter
npm
npm run start

Open your CC app of choice, find your extension under Window > Extensions, and start developing.

Building

To create a production build:

npm run build

Packaging

To create a .zxp for deployment:

npm run zxp

A versioned .zxp file will be placed inside archive.

CEP Configuration

You can configure CEP a either through environment variables or the package.json of your project.

package.json

"cep": {
    "name": "My Extension",
    "id": "com.mycompany.myextension",
    "hosts": "*"
}

Environment Variables

Either set thorugh your terminal or add to the .env file.

NAME="My Extension"
BUNDLE_ID="com.mycompany.myextension"
HOSTS="*"

Options

Id

This is the unique id of the extension.

Version

This sets the version of the bundle.

Name

This sets the name of extension as it will show in the application.

Hosts

By default, the extension will target all known Adobe hosts. To target specific hosts, uncomment the HOSTS variable to .env and modify the list of the hosts you want to target.

For example, to target just Illustrator and After Effects, you would add this to your .env file:

HOSTS="ILST, AEFT"

And to target specific versions:

HOSTS="ILST, IDSN@*, [email protected], AEFT@[5.0,10.0]"

This will target all versions of Illustrator and In Design, Photoshop 6.0, and After Effects 5.0 - 10.0.

Icon

To add a custom panel icon, add all icon files inside the public folder and set their paths inside your .env file:

ICON_NORMAL="./assets/icon-normal.png"
ICON_ROLLOVER="./assets/icon-rollover.png"
ICON_DARK_NORMAL="./assets/icon-dark.png"
ICON_DARK_ROLLOVER="./assets/icon-dark-rollover.png"

Cerificate Signing

In order to create a valid ZXP, you will need to provide the following variables replaced with the correct information inside your .env.

CERTIFICATE_COUNTRY="US"
CERTIFICATE_PROVINCE="CA"
CERTIFICATE_ORG="MyCompany"
CERTIFICATE_NAME="com.mycompany"
CERTIFICATE_PASSWORD="mypassword"

Panel Size

PANEL_WIDTH=500
PANEL_HEIGHT=500

Communicating with Extendscript

There are few functions that you can import from the cep-interface package to ease Extendscript communication from CEP.

loadExtendscript(extendScriptFileName: string): Promise

Loads and evaluates the specified file in the src/extendscript directory. Returns a promise with the result.

import { loadExtendscript } from 'cep-interface'

loadExtendscript('index.jsx')

evalExtendscript(code: string): Promise

Evaluates the specified code. Returns a Promise.

import { evalExtendscript } from 'cep-interface'

evalExtendscript('alert("Hello!");') // alerts "Hello!" inside the app

If you return a JSON string using json2 or similar from Extendscript, you can get the parsed result.

import { evalExtendscript } from 'cep-interface'

evalExtendscript('JSON.stringifiy({foo: "bar"});')
  .then(result => console.log(result)) // prints {foo: "bar"}
  .catch(error => console.warn(error))

Other functions

There are a few other functions available in addition.

openURLInDefaultBrowser(url: string)

import { openURLInDefaultBrowser } from 'cep-interface'

openURLInDefaultBrowser('www.google.com')

Opens the url in the default browser. Will also work when viewing outside the target application in a browser.

parcel-plugin-cep's Issues

Problem: Not finding extendscript files

I believe there's an issue with loadExtendscript() not finding extendscript files.

This is the error I'm getting in the browser from my panel:

This is the error in AE:

The parcel-plugin-cep-starter isn't even working from a clean install (git clone). It's not loading any of the info that the index.jsx is getting.

[bug] Downgrade parcel-bundler version from 1.12.4 to 1.12.3

Hi!

I think the parcel-bundler should be downgrade to 1.12.3, because semver keeps throwing:
Ref: https://stackoverflow.com/questions/66459081/parcel-semver-bug

\parcel-plugin-cep-starter\src\jsx\index.jsx.ts: Invalid Version: undefined
[1]     at new SemVer (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\semver\semver.js:314:11)
[1]     at compare (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\semver\semver.js:647:10)
[1]     at lt (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\semver\semver.js:688:10)
[1]     at C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\@babel\preset-env\lib\index.js:276:22
[1]     at Object.default (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\@babel\helper-plugin-utils\lib\index.js:22:12)
[1]     at getEnvPlugins (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\parcel-bundler\src\transforms\babel\env.js:62:34)
[1]     at getEnvConfig (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\parcel-bundler\src\transforms\babel\env.js:12:25)
[1]     at async getBabelConfig (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\parcel-bundler\src\transforms\babel\config.js:32:19)
[1]     at async babelTransform (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\parcel-bundler\src\transforms\babel\transform.js:6:16)
[1]     at async JSAsset.pretransform (C:\Users\guirc\chiligumvideos\parcel-plugin-cep-starter\node_modules\parcel-bundler\src\assets\JSAsset.js:83:5)

Proper way to use an icon

I tried to add a custom icon to my extension, but I couldn't find a way to make the necessary assets available within the build.

import './assets/icon-*.png'

This kinda works, but parcel still moves the file and appends a random hash to its name, which breaks the reference within the manifest.

Any ideas how to solve this problem?

Let's work together!

Hey Michael,

I am Koen Schmeets and developer for MtMograph.
I have been working full time the last years making extensions for After Effects and Premiere Pro, and like you I was frustrated with the (out of the box) developer experience so I worked on creating a bundler and packager for Adobe extensions. The latest state of that work is found here:
https://github.com/adobe-extension-tools

I have also been working with Parcel and wanted to create a plugin for it, and then (luckily) stumbled on your package.

I really like the work you have done, and think together we can make it even better!

For example, live .jsx reloading!

import {readFileSync} from 'fs';
const Buffer = Buffer || cep_node.Buffer

const jsxBundle = readFileSync('./dist/index.jsx.js').toString()
console.log(jsxBundle.length)
evalExtendscript(jsxBundle)

Anyways, just curious if you are up for a collaboration and if so, let's talk about it on some chat platform?

My email is [email protected] you can also find me on google hangouts.
Curious to hear your thoughts!

• Koen

npm i hangs on install

Specifically it's hanging on fetchMetadata: sill resolveWithNewModule [email protected] checking installable status

Prefix environment variables

Hey, I think we should prefix the environment variables to avoid collision, so in stead of NAME=... perhaps EXTENSION_NAME=... ?

Support MinSize and MaxSize for resizable extension

A manifest.xml file can have MinSize and MaxSize tags in Geometry tag like Size tag for building resizable extension. Specification is here: CEP 8#extension-size, CEP 9#extension-size.

I want to use this feature and I think it is not difficult because they are same with panelWidth and panelHeight. I'll send a pull request for it.

UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty

Any idea what this is? Using NPM or Yarn gives this same warning. Dug through the source a bit, but can't find what's attempting to rename node_modules...

[0] (node:27017) UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty, rename '/Users/.../adobe_extensions/project_dir/node_modules' -> '/Users/.../adobe_extensions/project_dir/node_modules_temp'
[0] (node:27017) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
[0] (node:27017) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Explicit production .debug option

Through DEBUG_PORT and ENABLE_PROUDUCTION_DEBUG env flags.

DEBUG_PORT specifies the port for both development and production.
ENABLE_PROUDUCTION_DEBUG enables output of .debug file during production build.

Why copy dependencies

At the moment all dependencies get copied (or linked) into the dist folder. Parcel should take care of all the dependencies – so why bother?

I noticed this because I started using yarn workspaces, which installs all dependencies in the workspace root. This caused my build to fail.

It works great for me without copyDependencies().