Dmn-js 1.1.1 usage

Developers
1

Hi!

I try to upgrade from dmn-js ^0.11.0 to 1.1.1 but when I try to grunt my project it throws the following error when working on grunt-browserify task:

import EditingManager from ‘dmn-js-shared/lib/base/EditingManager’;
ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’

I saw in the dmn-js code base that it migrated to ES2015 and so I tried to use babelify transformator to deal with ES2015 code but without success.

Is there any working example how to use new dmn-js 1.1.1 package with grunt and grunt-browserify?

Thank you for your help in advance.
Rómeó Nagy

2

Hey,

how did you add the babel transform?

We’re using the new dmn-js in the Camunda Modeler.

3

Hi,

package.json:

…
“devDependencies”:{
“chai”:“3.5.0”,
“grunt”:“1.0.1”,
“grunt-browserify”:“5.2.0”,
“babelify”: “7.3.0”,
“babel-preset-env”: “1.6.1”,
“grunt-cli”:“1.2.0”,
“grunt-concat-css”:“0.3.2”,
“grunt-contrib-clean”:“1.1.0”,
“grunt-contrib-concat”:“1.0.1”,
“grunt-contrib-connect”:“1.0.2”,
“grunt-contrib-copy”:“1.0.0”,
“grunt-contrib-cssmin”:“2.2.1”,
“grunt-contrib-jshint”:“1.1.0”,
“grunt-contrib-less”:“1.4.1”,
“grunt-contrib-uglify”:“3.2.1”,
“grunt-contrib-watch”:“1.0.0”,
“grunt-jsdoc”:“2.2.0”,
“grunt-karma”:“2.0.0”,
“grunt-string-replace”:“1.3.1”,
“karma”:“1.7.1”,
“karma-browserify”:“5.1.2”,
“karma-chai”:“0.1.0”,
“karma-chrome-launcher”:“2.2.0”,
“karma-firefox-launcher”:“1.0.1”,
“karma-fixture”:“0.2.6”,
“karma-html2js-preprocessor”:“1.1.0”,
“karma-ie-launcher”:“1.0.0”,
“karma-mocha”:“1.3.0”,
“load-grunt-tasks”:“3.5.2”,
“mocha”:“3.5.3”,
“mocha-test-container-support”:“0.2.0”,
“time-grunt”:“1.4.0”
},
“dependencies”:{
“bpmn-js”:“0.25.2”,
“bpmn-js-differ”:“0.3.0”,
“bpmn-js-properties-panel”:“0.18.5”,
“bpmn-js-transaction-boundaries”:“0.1.1”,
“bpmn-moddle”:“1.2.0”,
“camunda-bpmn-moddle”:“0.13.0”,
“camunda-cmmn-moddle”:“1.0.0”,
“cmmn-js”:“0.8.0”,
“cmmn-js-properties-panel”:“0.3.1”,
“diagram-js-origin”:“0.15.2”,
“dmn-js”:“1.1.1”,
“jquery”:“3.2.1”
}

Gruntfile.js:

 ... 
browserify: {
     modeler: {
    	options: {
    	      browserifyOptions: {
    			insertGlobalVars: {
    			process: function() {
    		    	    return 'undefined';
    			},
    			Buffer: function() {
    			     return 'undefined';
    			}
    		}
    	  },
    	  transform: [['babelify', {presets: ['env']}]]
    	},
        files: {
             '<%= config.dist %>/bundle.js': ['<%= config.sources %>/modeler/index.js']
       }
    }
},
...
4

Hi!

Finally grunt build procedure is working but still cannot use Editor or Viewer module.
Should I require the following modules to create new Editor or Viewer?

var DmnEditor = require(‘dmn-js-decision-table/lib/Editor’);
var DmnViewer = require(‘dmn-js-decision-table/lib/Viewer’);
var DrdModeler = require(‘dmn-js-drd/lib/Modeler’);
var DrdViewer = require(‘dmn-js-drd/lib/NavigatedViewer’);

and instantiate as e.g.: ?

new DmnModeler({
container: '#dmnPanel
});

Can you write a small example or update or create a new dmn-js example which using the new 1.1.1 version of dmn-js?

Thank you.

5

Thanks for your urgent interest in dmn-js@1.x. We’ll create examples as well as migration guides from dmn-js@0.x to dmn-js@1 as soon as we reached feature parity and stability on the 1.x branch.

Please bear with us until we get these things done. :slightly_smiling_face: