diff --git a/src/livecodes/UI/deploy.ts b/src/livecodes/UI/deploy.ts index 43c128a8f..8c2a70824 100644 --- a/src/livecodes/UI/deploy.ts +++ b/src/livecodes/UI/deploy.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-internal-modules */ import type { createEventsManager } from '../events'; import type { createModal } from '../modal'; import type { createNotifications } from '../notifications'; @@ -8,9 +9,9 @@ import type { } from '../languages'; import { deployScreen, resultTemplate } from '../html'; import { autoCompleteUrl } from '../vendors'; -import { deploy, deployFile, deployedConfirmation } from '../deploy'; -// eslint-disable-next-line import/no-internal-modules +import { deploy, deployFile, deployedConfirmation } from '../deploy/deploy'; import { getUserRepos } from '../services/github'; +import { bypassAMD, loadScript } from '../utils/utils'; import { generateQrCode } from './qrcode'; import { getExistingRepoButton, @@ -204,11 +205,12 @@ export const createDeployUI = async ({ await publish(user, name, message, commitSource, newRepo); }); - let autoComplete: any; - import(autoCompleteUrl).then(async () => { - autoComplete = (globalThis as any).autoComplete; + modal.show(deployContainer, { isAsync: true }); + newRepoNameInput.focus(); - if (!user) return; + if (!user) return; + + bypassAMD(() => loadScript(autoCompleteUrl, 'autoComplete')).then(async (autoComplete: any) => { const publicRepos = await getUserRepos(user); eventsManager.addEventListener(existingRepoNameInput, 'init', () => { @@ -239,7 +241,4 @@ export const createDeployUI = async ({ autoCompleteJS.input.value = selection; }); }); - - modal.show(deployContainer, { isAsync: true }); - newRepoNameInput.focus(); }; diff --git a/src/livecodes/UI/qrcode.ts b/src/livecodes/UI/qrcode.ts index 38573dcd6..d261680c2 100644 --- a/src/livecodes/UI/qrcode.ts +++ b/src/livecodes/UI/qrcode.ts @@ -1,5 +1,5 @@ /* eslint-disable import/no-internal-modules */ -import { loadScript, safeName } from '../utils/utils'; +import { bypassAMD, loadScript, safeName } from '../utils/utils'; import { qrcodeUrl } from '../vendors'; export const generateQrCode = async ({ @@ -13,7 +13,7 @@ export const generateQrCode = async ({ title?: string; logo?: string; }) => { - const QRCode: any = await loadScript(qrcodeUrl, 'QRCode'); + const QRCode: any = await bypassAMD(() => loadScript(qrcodeUrl, 'QRCode')); container.style.visibility = 'hidden'; const qr = new QRCode(container, { text: url, diff --git a/src/livecodes/UI/sync-ui.ts b/src/livecodes/UI/sync-ui.ts index 9c058771e..6acf1f8e7 100644 --- a/src/livecodes/UI/sync-ui.ts +++ b/src/livecodes/UI/sync-ui.ts @@ -6,6 +6,7 @@ import type { User, UserData } from '../models'; import { syncScreen } from '../html'; import { autoCompleteUrl } from '../vendors'; import { getUserRepos } from '../services/github'; +import { bypassAMD, loadScript } from '../utils/utils'; import { getExistingRepoAutoSync, getExistingRepoForm, @@ -202,11 +203,12 @@ export const createSyncUI = async ({ updateSyncStatus({ inProgress: false, lastSync }); }); - let autoComplete: any; - import(autoCompleteUrl).then(async () => { - autoComplete = (globalThis as any).autoComplete; + modal.show(syncContainer, { isAsync: true }); + newRepoNameInput.focus(); + + if (!user) return; - if (!user) return; + bypassAMD(() => loadScript(autoCompleteUrl, 'autoComplete')).then(async (autoComplete: any) => { const repos = await getUserRepos(user, 'all'); eventsManager.addEventListener(existingRepoNameInput, 'init', () => { @@ -235,7 +237,4 @@ export const createSyncUI = async ({ autoCompleteJS.input.value = selection; }); }); - - modal.show(syncContainer, { isAsync: true }); - newRepoNameInput.focus(); }; diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts index 0f9dc4dbb..3277ae933 100644 --- a/src/livecodes/utils/utils.ts +++ b/src/livecodes/utils/utils.ts @@ -428,3 +428,17 @@ export const addAttrs = (el: HTMLElement, attributes: Record | s el.setAttribute(key, value.slice(1, -1)); } }; + +/** + * Bypasses the AMD module definition system by temporarily disabling it while executing the given function. + * + * @param fn - The function to execute. + * @return The result of executing the function. + */ +export const bypassAMD = /* @__PURE__ */ async (fn: () => Promise): Promise => { + const define = (globalThis as any).define; + (globalThis as any).define = undefined; + const result = await fn(); + (globalThis as any).define = define; + return result; +}; diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts index 7a6a44643..fd830fd75 100644 --- a/src/livecodes/vendors.ts +++ b/src/livecodes/vendors.ts @@ -26,7 +26,7 @@ export const astroBaseUrl = /* @__PURE__ */ getUrl('@hatemhosny/astro-internal@0 export const astroWasmURL = /* @__PURE__ */ getUrl('@astrojs/compiler@0.9.2/astro.wasm'); export const autoCompleteUrl = /* @__PURE__ */ getUrl( - '@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.js', + '@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js', ); export const babelUrl = /* @__PURE__ */ getUrl('@babel/standalone@7.22.4/babel.js');