neutrino-preset-cep

neutrino-preset-cep is a Neutrino preset that supports creating plugins for Adobe's CEP (Common Extensibility Platform).

Get Started

npm install --save-dev neutrino-preset-cep

module.exports = {
  use: ['neutrino-preset-cep']
}

Additionally, you'll need to provide some configuration options in your package.json (or in the .neutrinorc.js file). See the Configuration section below for more details.

Project Layout

neutrino-preset-cep follows the standard project layout specified by Neutrino. This means that by default all project source code should live in a directory named src in the root of the project. Any ExtendScript source code should live in a directory named extendscript in the root of the project, since it is compiled differently. Any static assets found in static in the root of the project will be copied directly to the build directory. For example, static/test.png will be copied to build/test.png and static/foo/test.png will be copied to build/foo/test.png.

Configuration

Here is the minimal configuration you'll need in package.json in order for this preset to function properly:

{
  "name": "test-plugin",
  "version": "0.0.1",
  "manifest": {
    "extensions": {
      "panel": {
        "type": "panel",
        "title": "Adobe CEP Plugin"
      }
    }
  }
}

In this example, you'll be creating a plugin called "Adobe CEP Plugin" (with the identifier test-plugin), with the following notes:

• Frontend Source Code located at src/panel.jsx
• ExtendScript Code located at extendscript/panel.js

More Complete Configuration

Here is an example of more complete configuration located in package.json:

{
  "name": "adobe-plugin",
  "version": "0.0.1",
  "manifest": {
    "bundleName": "Adobe Plugin",
    "bundleId": "com.my-company.adobe-plugin",
    "hosts": {
      "AEFT": "13.0"
    },
    "requiredRuntimes": {
      "CSXS": "6.0"
    },
    "extensions": {
      "panel": {
        "type": "panel",
        "title": "Adobe Plugin",
        "size": [300, 300],
        "minSize": [200, 200],
        "maxSize": [400, 400]
      },
      "tutorial": {
        "type": "dialog",
        "title": "Adobe Plugin Tutorial",
        "size": [800, 600],
        "minSize": [800, 600],
        "maxSize": [800, 600]
      }
    }
  }
}

If you don't want to put your configuration in the package.json file, you can specify configuration inside the options like so:

module.exports = {
  use: ['neutrino-preset-cep', {
    packageJson: {
      name: 'adobe-plugin',
      version: '0.0.1',
      manifest: {
        foo: 'bar'
      }
    }
  }]
}

Customizing

neutrino-preset-cep has the following options for itself:

• options.packageJson - Supply an object for this field similar to the structure of the package.json file. A detailed explanation on how to use this feature is above.
• options.externals - Any additional externals defined here are sent straight into Webpack. Use this if you are using a module that requires internal Node APIs (like fs or child_process). A few externals are already defined by default. These are mocked in the development environment to allow developers to debug in the browser.

This preset makes use of the following presets and middleware, with their configuration paths specified.

• @neutrinojs/react - options.react
• @neutrinojs/compile-loader - options.compileLoader
• neutrino-middleware-wrapper - options.wrapper
• neutrino-middleware-xml - options.xml
• neutrino-middleware-jsxbin - options.jsxbin

So this means you could have configuration like so:

module.exports = {
  use: ['neutrino-preset-cep', {
    react: {},
    compileLoader: {},
    wrapper: {},
    xml: {},
    jsxbin: {}
  }]
}

Features

• Supports React for the extension frontends.
• Transpiles ExtendScript support back to ES5 and compiles using JSXBin.
• Generates a manifest.xml file in the proper CSXS folder using properties defined in package.json