Loader when compiling Spell about bpmn-js-examples HOT 12 OPEN

"Alternatively you'd need to split-up the extension (to be transpiled individually) and the integration into your Angular app. ..."

How can do this?

1️⃣ You create your customizations in a fork of https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension. That project compiles JSX -> JS.

2️⃣ Consume the transpiled JS resources produced in 1️⃣ in your Angular app.

To get additional feedback on this case I'd ask you to create a topic in our forum and cross-reference this thread. Maybe users already solved this issue in a simpler manner.

from bpmn-js-examples.

Could you specify the exact project you're trying?

from bpmn-js-examples.

Yes. sure.

i tried to realize this one:
https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension

but my compiler seems to need another loader for compile that row of code. It seems that i must to configure Babel aproppriately. It's correct? There is another solution more simple?

from bpmn-js-examples.

Indeed. The project uses JSX and you need to add the babel-loader to transpile it to plain javascript: https://medium.com/@sivaraj-v/basic-webpack-4-and-es5-to-es6-transpiler-using-babel-dc66e72c86c6.

from bpmn-js-examples.

But in my project i don't have webpack.config.js, in order to add directive about babel. I only have tsconfig.json

from bpmn-js-examples.

You do, as the error message indicates. At least it seems to be used under the hood.

What you need to enable is transpilation of JSX (inside an Angular project). Not sure how that works. Alternatively you'd need to split-up the extension (to be transpiled individually) and the integration into your Angular app.

from bpmn-js-examples.

"Alternatively you'd need to split-up the extension (to be transpiled individually) and the integration into your Angular app. ..."
How can do this?

from bpmn-js-examples.

OK ... i found a complete solution to convert SpellProps.js(x) in SpellProps.js, in pure mode.
`"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});

exports["default"] = _default;

var _propertiesPanel = require("@bpmn-io/properties-panel");
var _bpmnJsPropertiesPanel = require("bpmn-js-properties-panel");
var _react = require("react");

function _default(element) {
return [{
id: 'spell',
element: element,
component: Spell,
isEdited: _propertiesPanel.isTextFieldEntryEdited
}];
}

function Spell(props) {
var element = props.element,
id = props.id;
var modeling = (0, _bpmnJsPropertiesPanel.useService)('modeling');
var translate = (0, _bpmnJsPropertiesPanel.useService)('translate');
var debounce = (0, _bpmnJsPropertiesPanel.useService)('debounceInput');

var getValue = function getValue() {
return element.businessObject.spell || '';
};

var setValue = function setValue(value) {
return modeling.updateProperties(element, {
spell: value
});
};

return _react.createElement(_propertiesPanel.TextFieldEntry, {
id: id,
element: element,
description: translate('Apply a black magic spell'),
label: translate('Spell'),
getValue: getValue,
setValue: setValue,
debounce: debounce
});
}
`

and this is the output...

Now in browser, on the console, i find this error : " Uncaught (in promise): TypeError: Cannot add property __, object is not extensible" ... It's a bug?! or ... what?

from bpmn-js-examples.

can anyone help me?

from bpmn-js-examples.

@burn83 This looks like another Angular <-> bpmn.io tooling incompatibility issue.

Please share a codesandbox that allows us to reproduce this behavior.

We aim for compatibility with existing UI frameworks. Experience has shown that some (Angular, Vue) do interesting magic though that you may need to disable for bpmn-js to work reliably.

from bpmn-js-examples.

We plan to simplify our examples to not use JSX/transpilation anymore (#206). That should workaround most of the complications you mentioned in this issue.

from bpmn-js-examples.

in my project, vue2， it doesn't work

from bpmn-js-examples.