Camunda Modeler Plugin Helpers 🔌

Helper functions and core utility exports for bundling your Camunda Modeler client plugins.

Warning

This library re-exposes core utilities that you want to use as you develop plug-ins for the Camunda Modeler. If a plug-in uses any of the utilities, i.e. React, then it must consume them via the respective helper export. Use our webpack plug-in to accomplish that automatically, or use a source mod / configure your plug-in bundler accordingly.

Usage

Install the plug-in:

npm install camunda-modeler-plugin-helpers

Use any of the exposed utilities.

API

bpmn-js

Register plugin to be passed as additional module:

import {
  registerBpmnJSPlugin
} from 'camunda-modeler-plugin-helpers';

const BpmnJSModule = {
  __init__: [ 'myService' ],
  myService: [ 'type', ... ]
};

registerBpmnJSPlugin(BpmnJSModule);

Register a custom moddle extension:

import {
  registerBpmnJSModdleExtension
} from 'camunda-modeler-plugin-helpers';

var moddleDescriptor = {
  name: 'my descriptor',
  uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',
  prefix: 'mydesc',

  ...
};

registerBpmnJSModdleExtension(moddleDescriptor);

UI Components

Components exported for use in Camunda Modeler client plugins:

• Fill
• Modal
• Overlay
• Section
• ToggleSwitch
• TextInput
• CachedComponent

import Fill from 'camunda-modeler-plugin-helpers/components/Fill.js';

function MyReactExtension() {
  return <Fill ... />;
}

Higher-Order Function Helpers

These higher-order components (HOCs) enhance functionality:

• WithCache - pass cache and forward refs to a wrapped component.

• WithCachedState - lazy-load a wrapped component.

Helper Functions

• createTab - helper function to create Tab components to be used with the TabProvider via the Comp#createCachedState method.

Properties Panel

Should be used to access various properties panel exports:

import { useService } from 'camunda-modeler-plugin-helpers/vendor/bpmn-js-properties-panel.js';
import { useState } from 'camunda-modeler-plugin-helpers/vendor/@bpmn-io/properties-panel/preact/hooks.js';

React

Should be used in place of react imports.

import React, { useEffect } from 'camunda-modeler-plugin-helpers/vendor/react.js';

Carbon

Should be used in place of @carbon/react imports:

import { Button, Theme, TextInput } from 'camunda-modeler-plugin-helpers/vendor/@carbon/react.js';
import { Add } from 'camunda-modeler-plugin-helpers/vendor/@carbon/icons-react.js';

Additional Resources

• camunda-modeler-webpack-plugin - Bundle your libraries for use within the Camunda Modeler

License

MIT