React Load Addon JS libraries in order

Hello,

I'm trying to load the P5 library with two addon libraries, P5Dom and P5Sound, on a react application.

On the traditional stack just adding them to the header in order works fine.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js">

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js">

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js">

I've tried external source and bringing the scripts internal and run into the addons loading before P5 loads.  Making both addons dependent on the P5 script doesn't fix the issue

Network stack loads them in correct order, but the addons are much smaller and finish/execute before their dependent script is loaded

I've also tried lazy loading the libraries with a call back to load the addons, but then they don't get initialized on the page just added to the header.

Looking for help on what I'm missing to get these loaded in order.  

Is there a way to force scripts to wait for the dependent script to finish loading?

Regards,

Don

EDIT:

Here's how you can make scripts dependent on one another in Mobile and Reactive Web:

1. In the Interface tab, locate the Scripts folder. For organization, you might want to create a folder for the P5 script files (right-click and select Add Folder).
2. Right-click the new folder and select Import Script. Locate the p5_min.js (main P5 library) and select it, then click Open.
3. Repeat step 3 for the two dependent libraries.
4. For each of the dependencies, select the imported script in the tree (under the Scripts\P5 folder), and use the Required Scripts property to assign the p5_min.js as a dependency. This should ensure that the main library is loaded before the dependent libraries.

https://success.outsystems.com/Documentation/11/Reference/OutSystems_Language/Mobile_Interfaces/Adding_Data_and_Logic/Script

Thank you for the reply Andrew.

In my post above I have a screenshot of that dependency where P5_sound is dependent on P5_min.  

React will still load them asynchronously.  P5Sound's request is sent after P5_min but downloads and executes due to it being significantly smaller payload.

This is jank, but wrapping the dependent scripts in a timeout function to delay their load solves the issue.  I would much prefer a call back feature to load dependent libraries after the main library has loaded.

Donald Monpas wrote:

Apologies for missing that...

It's possible that you might need to consider turning your P5 stuff into one or more React components to make this work. I think part of the issue is that you're wanting to use a JS library that draws on the screen with another library that is abstracting and controlling the rendering lifecycle, and then also dealing with dependent libraries to boot.

Any chance you can share a small OML of the working version with the timeout function? With that as a starting point, I can try some ideas to see if there's an easier (and less janky) way.

Donald Monpas wrote:

Hi Donald,

I think you should add depedency of RequireScript client action from system and use that. It works exactly like you want. 

Here is its document link.

https://success.outsystems.com/Documentation/11/Reference/OutSystems_APIs/System_Actions#RequireScript