Enforce appended script ordering

[timkelty]

Summary

• Load appended scripts in order via native script insertion.
• Queue appendHeadHtml() / appendBodyHtml() so existing non-awaited call sites still complete in order.
• Stop relying on app/resource-js for this path, while leaving the controller in place as a deprecated.

Reproduce

On any CP page, open DevTools and enable network throttling to make the race easier to reproduce, then run:

delete window.__appendTest;

(async () => {
  await Craft.appendBodyHtml(
    '<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"><\/script>'
  );

  await Craft.appendBodyHtml(
    '<script>window.__appendTest = typeof dayjs; console.log("append test:", window.__appendTest);<\/script>'
  );
})();

Before this fix, this can still log undefined, because the returned promise does not wait for appended external scripts to finish loading. With this fix, it should log function.

To verify the shared queue for existing non-awaited call sites:

delete window.__headBodyTest;

Craft.appendHeadHtml(
  '<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"><\/script>'
);

Craft.appendBodyHtml(
  '<script>window.__headBodyTest = typeof dayjs; console.log("head/body test:", window.__headBodyTest);<\/script>'
);

With this fix, it should log function.

Background

The earlier app/resource-js fallback was introduced in 1a958a7. It could appear to help because it converted cross-domain CP resource URLs into same-origin requests, keeping jQuery on its same-origin loading path. But the append flow still relied on jQuery's script handling, so dependent appended scripts were not guaranteed to execute in order.

Relevant jQuery issues:

• append() doesn't guarantee sequential execution of <script> tags jquery/jquery#4801
• DOM inserted scripts should run asynchronously jquery/jquery#1895

[brandonkelly]

Craft.appendHeadHtml() is an async function. If you add await to those calls, it works as expected.

delete window.__appendTest;

(async () => {
    await Craft.appendBodyHtml(
      '<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"><\/script>'
    );

    await Craft.appendBodyHtml(
      '<script>window.__appendTest = typeof dayjs; console.log("append test:", window.__appendTest);<\/script>'
    );
})();

[timkelty]

Craft.appendHeadHtml() is an async function. If you add await to those calls, it works as expected.

It is declared as async, but it doesn't await anything, so its promise doesn’t wait for appended external scripts to finish loading.

app/resource-js technically fixed this by forcing CP resources to be same-origin, which keeps jQuery on its same-origin loading path. But that relies on jQuery internals rather than explicitly enforcing execution order, and it forces requests that should go to the CDN back through PHP.