Access an already instancied JS file

How-to Discussions
1

Hi.
I apologize if this is a repeated question but the answers I found didn’t solve my problem.

I want to access a instance of a JS file in other JS file somewhere else im my project.
the structure would be somenthing like this:

Main.ux

<App>
	<JavaScript File="someJS.js"/>
</App>

someJS.js

var someValue = "value";

module.exports = {
	someValue : someValue 
}

another.ux

<JavaScript File="anotherJS.js"/>

anotherJS.js

var otherValue = someValue;

I know that this is not the correct way to get this values but I already tried some things.

I’ve already tried to give a global name to my JS load markup but it dosent work.

Main.ux

<App>
	<JavaScript File="someJS.js" ux:Global="nameSomeJS"/>
</App>

anotherJS.js

var nSomeJS = require("nameSomeJS");
var otherValue = nSomeJS.someValue;

this approach gives the following error

LOG: Error: JavaScript error in anotherJS.js line 1: Error message: Uncaught require(): module not found: nameSomeJS
    File name: anotherJS.js
    Line number: 1
    Source line: (function(module, exports, require, popupAlert, showPopupEvent) { var t = require("nameSomeJS");
     in Fuse.Reactive.JavaScript<C:\Users\AppData\Local\Fusetools\Packages\Fuse.Reactive\0.44.1\$.uno:1670>

I’ve also tried to require the JS file the but it generates a new instance of the module.exports object and the changes made in the required object does not propagate to the JS file loaded in the Main.ux file.

anotherJS.js

var nSomeJS = require("someJS.js");
nSomeJS.someValue = otherValue; //this works but not the way I want

I was able to achieve what I want using userEvents and functions in my JS file to access and change my variables but I was wondering if there is a more direct, and efficient way to do this.

2

Hi!

In order to access js variables across files they should be defined as freestanding js-files (instead of declared with <JavaScript /> in UX).

Make sure you add these javascript files as Bundle files in your unoproj (https://www.fusetools.com/docs/assets/bundle)

Here is an example:
shared js module:
shared.js

var foo = "Bar";
module.exports = { foo: foo };

MainView.ux

<App>
  <JavaScript>
    var sharedFoo = require("shared").foo;
  </JavaScript>
</App>

and this can be done from any other module:
CustomClass.ux

<Panel ux:Class="CustomClass">
  <JavaScript>
    var sharedFoo = require("shared").foo;
  </JavaScript>
</Panel>

did this answer your question?

3

Thank you very much for your answer.
I was able to achieve what I wanted creating uno classes but this approach is simpler.
My goal was to create some global variables that could be accessed and changed anywhere in the project to control user states in the app.

Trying your suggestion I got this output.

shared.js

var someValue = "standard value";
module.exports.someValue = someValue;

Main.ux

<App>
	<JavaScript>
		var s1 = require("shared");
		console.log("first call:"+s1.someValue);

		module.exports.valueUX = s1.someValue;
	</JavaScript>
	<JavaScript>
		var s2 = require("shared");
		s2.someValue = "new value";
	</JavaScript>
	<JavaScript>
	var s3 = require("shared");
		console.log("third call :"+s3.someValue);
	</JavaScript>
	<Text Value="{valueUX}"/>
</App>

Screen

new value

Monitor

LOG: first call:new value
LOG: third call :new value

As you can see I managed to change the value of someValue globally and even the UX got the value update. But I just can’t understand why my first log did not output “standard value” since I only changed someValue in the second JavaScript tag.

4

Hi!

In this case you can’t be certain of when each JavaScript module is evaluated; the order should be considered undefined. It is also a very bad idea to have several JavaScript tags next to each other. I would suggest sticking with one per class.