Document script loading issues with DynamicFrame

[danstewart]

Scripts do not load synchronously.

Basic example:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/filepond.min.js" ></script>

<script>
    console.log("Hit inline script");    
    console.log(window.FilePond);
</script>

On a normal page this works fine, but within binder we cannot wait for the first script to load before firing the second one.

---

Solutions

1. Load dependencies outside of the frame
2. Use other events to tell when things are ready, eg:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/filepond.min.js" ></script>

<script>
    console.log("Hit inline script");
    document.addEventListener("FilePond:loaded", () => {
        console.log("FilePond is ready");
        console.log(window.FilePond);
    });
</script>

---

Notes

I've tried various things to make this work but no luck.

We grab the HTML response for the frame then go recreate all the script tags so they actually load, but when we add the body to the DOM it seems each script loads async.