@pundima-lakshan/bpmn-form-extended NPM

Acknowledgments

This is a fork from EinArlyn/bpmn-form-extended library to be used in my own project

bpmn-form-extended

The library is intended to expand the bpmn-js component base. Allows you to add custom components to the bpmn-js model.

Project structure

assets

css - folder with css files
fonts - font folder
js - folder with js files
svg - folder with svg files

custom components

components - folder with custom components
properties-panel - folder with custom property panels
index.js - file for importing all custom components

form-js - overriding form-js library functions

base-form.js - overriding the basic functions of the form-js library
form-editor.js - description and configuration of the form editor
form-viewer.js - description and settings for viewing forms

How to add your own component

Create a component folder in the components folder
Create a file index.js in the component folder
Implement the component in the index.js file
Import the component into the index.js file in the custom/components folder
Add a component class and register it
Add a new component to RenderExtension

How to add your own properties panel

Create a properties panel folder in the properties-panel folder
Create a file index.js in the properties panel folder
Implement the properties panel in the index.js file
Import the properties panel into the index.js file in the custom/properties-panel folder
Add a property panel class and register it
Add a new property panel to PropertiesPanelExtension

How to add a library to a React + Vite project

Install the library using npm

npm install @einarlyn/bpmn-form-extended

Importing css styles in a folder of your choice (example: main.js)

import "@einarlyn/bpmn-form-extended/dist/assets/css/styles.css";

Along the path src/plugins we create a file minifyBundles.ts and place the following code in it

import { minify } from "terser";

const minifyBundles = () => {
  return {
    name: "minifyBundles",
    async generateBundle(_options: any, bundle: any) {
      for (const key in bundle) {
        if (bundle[key].type === "chunk" && !key.includes("customFormEditor")) {
          const minifyCode = await minify(bundle[key].code, {
            sourceMap: false,
          });
          bundle[key].code = minifyCode.code;
        } else if (
          bundle[key].type === "chunk" &&
          key.includes("customFormEditor")
        ) {
          bundle[key].code = bundle[key].code.replaceAll(
            "formFields2",
            "formFields"
          );

          const minifyCode = await minify(bundle[key].code, {
            mangle: {
              reserved: ["RangeField", "formFields.register", "formFields"],
            },
            sourceMap: false,
          });
          bundle[key].code = minifyCode.code;
        }
      }
      return bundle;
    },
  };
};

export default minifyBundles;

In the vite.config.ts file we add the property optimizeDeps

optimizeDeps: {
    exclude: [
      '@einarlyn/bpmn-form-extended',
    ],
  },

In the vite.config.ts file add the minifyBundles plugin

build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('bpmn-form-extended')) {
            return 'customFormEditor';
          }

          return 'app';
        },
      },
      plugins: [minifyBundles()],
    },
    minify: false,
  },

Create type declarations in decs.d.ts to stop typescript from complaining

declare module "@einarlyn/bpmn-form-extended";

Usage in React project

...
 const formEditor = new FormEditor({
      container: editorContainerRef.current,
      // additionalModules: [RangeField, FileEditorField, RangeFieldPropertiesProvider],
    }).customForm;
...