Intro to Packages

Packages in aeppic are a way to extend functionality. They are a standardized method of exposing javascript code, vue components, or assets to an aeppic web application.

Why package ?

Dynamic code can be a security and stability risk. All methods of dynamic code are thus to be handled via linking it to an aeppic document which includes versioning and accountability.

The only exception is via the server configuration which allows to statically define html/css/script files of any origin, but is handled by the server administrator anyway.

aeppic.json

Each package is a zip file in a package document. The zip includes an aeppic.json describing the content of the package. Once you have an aeppic.json (See below) it can be used to create the zip with ae-pkg pack . -o releases which is a command exposed by @aeppic/package. That is the reason why the package.json of packages usually have a release script which does exactly that.

The aeppic.json used in the workflow package:

aeppic.json

{
  "type": "module",
  "exports": {
    ".": "./dist/@aeppic-packages/workflow.js"
  },
  "assets": [
  ],
  "components": [
    "WorkflowGraph"
  ]
}

This is a very minimal example which defines an ESM javascript package.

It exposes a single javascript module file to be loaded and all it's exports are made available by aeppic under the global packages variable inside e.g a controller.

The export endpoint "." represents the default endpoint to import.

Components

When the export also contains vue components these can be named under components which makes them available to Designs and Layouts.

{
  ...
 "components": [
    "MonacoEditor"
  ],
  ...
}

A vue component that requires access to Aeppic can use inject with getAeppicContent which allows access to Aeppic via this.getAeppicContext('<name-of-component-type-getting-context>' /*, this.document - optional aeppic document to link to */)

export default {
  template: '<div>GRAPH</div>',
  ...
  inject: ['getAeppicContext'],
  ...
  data() {
    const Aeppic = this.getAeppicContext('my-component' /*, this.document */) 
    ...
  }
}

Assets and Stylesheets

When the components or main file require other assets these can be listed in the the assets or stylesheets sections. Stylesheets get loaded automatically.

{ 
  ...
  "assets": [
    "./dist",
  ],
  "styles": [
    "./dist/stylesheet.css"
  ]
  ...
}