How to make variable visible outside of app.js?

Hi! Good evening for all!
Any body know, why it`s happened and how to fix it?

i wan`t some code make outside of app.js
and if no other mentions of BpmnModeler
then they just dissapearing from app.js

how i can make

propertiesPanelModule,
propertiesProviderModule
+
BpmnModeler
available in index.html ?

//////////////////////////
// app.js
//////////////////////////

import BpmnModeler from 'bpmn-js/lib/Modeler';

function createBpmnModeller(cfg){ // disapeared after compilation
	return new BpmnModeler(cfg);
}

// no other calls or references to BpmnModeler here

//////////////////////////
// index.html
//////////////////////////

< script src="app.js" ></ script >
< script >
$(function() {
	// here
	var bpmnModObj = new BpmnModeler({ 
		// ...
		additionalModules: [
			propertiesPanelModule,
			propertiesProviderModule
		],
		moddleExtensions: {
			camunda: camundaModdleDescriptor
		}
		// ...
	)};
	
	// ... some code ...
</ script >

i got:

Uncaught ReferenceError: BpmnModeler is not defined
Uncaught ReferenceError: createBpmnModeller is not defined

Even if i make:

// app.js
function myFunc1() {
  myFunc2();
}

function myFunc2() {
  alert('func2');
}

i see those function inside eval()

but they not available outside of app.js:

Uncaught ReferenceError: myFunc3 is not defined

image

i assume need tricks like this?

  it('should expose globals', function() {

    var BpmnJS = window.BpmnJS; // this trick

    // then
    expect(BpmnJS).to.exist; // what is it?
    expect(new BpmnJS()).to.exist; // what is it?
  });

what function it() meaning?

Now i got next problem:

in app.js
compiled-in jQuery:
import $ from 'jquery';

i didnt want this because i already got jQuery on my page how i can translate link into app.js from web page - over window.$`
?

It seems like you got general problems here with bundling your web application to make it available in the browser. That’s nothing that really depends on the bpmn.io toolkit. I’d suggest to gather more knowledge about this, first.

what function it() meaning?

Welcome to our test environment. We use mocha, chai, karma, and friends. I’d also recommend having a look at these concepts.

One note: please try to concentrate one thread for one question. It will otherwise extremely hard for us to help you in an orderly manner.

1 Like

Of course i have a problem, i have a big problem.

Where? i can`t find any human-readable centralized-structured documentation, anywere. That i can use.
It’s a very pity to lose so much time on simple things. it makes me crazy :frowning:

When i use jQuery or other library - i just use them, i havent to compile it each time for extension or downloading 3gb of other sources (for the sake of 400kb sources). I cant explain how it`s terrible. it absolutely crazy.

I love interface and visual part of bpmn.io - it very nice, but i absolutely hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate! hate!

hate sources inside it.

Suggestion: I doubt that anyone is able to help you with the style of communication you are doing here. Please try to be kind and formalize your request for support in an orderly, structured manner. It’s not likely that you have to download that amount of data (3 GB) to use our libraries, by far not. So I think it really depends on your local setup.

If you want us to help you, please try to create an environment/style of communication that makes it at least doable for us to do so. We will always keep on trying to support you if we can.

Thank you :heart:

3 Likes

Without the source code there is no UI so how can you love the UI but hate the source code? :sob:

Please take @Niklas_Kiefer reply seriously. We do not accept abusive communication in our forum.

Stay factual, stay constructive, and we may be able to help you. Continue to rage like this and risk being banned from this place.

4 Likes

Sorry, i try to explain this widely:

i didnt have screenshots now, but with installing node-js they also download 3gb of sources
and i didn`t know why, but they also install Python + ton of other software
now on my machine iv got 5 different instalation of python ( hello windows! )

When i reads docs on first time i expected to receive something like 500-1000Kb of js-code
like in jQuery:

<script src="/bpmn/bpmn2-main.js">
<script src="/bpmn/bpmn2-properties-panel.js">

But not those tone of programs.

then when i compiled bpmn2-properties-panel.js
compilier make me one big file of sources with compiled in jQuery (inside app.js)
and i absolutely cant edit those or somehow translate variables
i spend 2 days only for installing and compiling those
and it`s didnt done yet… i cant use lib still.
it takes spend week or more just for those basic operations, how i see.

Again sorry for rage, but im compelled say that, because i didnt expect thinks like that and i didnt see this somewhere else. its very new practice for me.
i realy have some big troubles with understanding all of it.

Now i stop with that. Sorry again.

Without the source code there is no UI so how can you love the UI but hate the source code?

I build my web-app without a ton of codding. All interfaces, tables, windows, most of ETL i make in config or visually. And i didnt need to code a lot of things, excepts some data-processing.
All sites i also make visually, i just design them, even e-commerce projects or other stuff.

So we (world) already have many no-code or less-code solutions and in future will have much less developers than now. Every line of code it`s like manufactory labor. Then humanity came up with water pumps and the rest technology. Soo with developers now or later will be same situation.

In our days it`s only first steps in this direction.

i already gave some examples:

all question based on this pack:

1. in those sources:

// file: app.js
import $ from 'jquery';

i didn`t want jQuery in compiled package (inside /dist/app.js file )
because a already have on my page (over script tag)

2. I need init

////////////////////////////
// file: page.html
////////////////////////////

initBpmnModeller(...);

// i must call loadDiagramData() this there
// but iw got:
// Uncaught ReferenceError: "loadDiagramData" is not defined
$.get('/some/link/to/receive.xml',loadDiagramData,'get'); // some ajax-function


////////////////////////////
// file: app.js
////////////////////////////

initBpmnModeller(args){
	// ...
}

function createNewDiagram() {
  openDiagram(diagramXML);
}

// but with function defined here
function loadDiagramData(xmlReceivedFromWebPage) {
  openDiagram(xmlReceivedFromWebPage);
}


import diagramXML from '../resources/newDiagram.bpmn';

3. Question:

is there any way to write my extension in ( page.html ) ?
without compiling of (app.js)

but with installing node-js they also download 3gb of sources
and i didn`t know why, but they also install Python + ton of other software
now on my machine iv got 5 different instalation of python ( hello windows! )

But to understand: how is this related to bpmn.io? We can’t control how you setup your local dev environment. And we have nothing to do with python, I promise! :raised_hand:

is there any way to write my extension in ( page.html ) ?

You don’t need to bundle bpmn-js, the basic Modeler/ Viewer is also available in a pre-packaged version.

However, once things get more complicated, it’s likely you need an extra bundling step to make it run inside the browser. That’s nothing that depends on bpmn-io, that’s a fact by the JS ecosystem. Browsers like Chrome become better and better to provide all the features out-of-the-box. Unfortunately, there is no 100% coverage so far.

2 Likes

How i can make it works with properties-panel.js ? Any examples didn`t help me - all of them falls with errors.

Im already tryied to do this and didn`t work. Possibly i make mistake or some other stuff.