fix(App): fix loading AMD modules (for autocomplete & qrcode)

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();
 };

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,

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();
 };

src/livecodes/utils/utils.ts

@@ -428,3 +428,17 @@ export const addAttrs = (el: HTMLElement, attributes: Record<string, string> | 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 <T = any>(fn: () => Promise<T>): Promise<T> => {
+  const define = (globalThis as any).define;
+  (globalThis as any).define = undefined;
+  const result = await fn();
+  (globalThis as any).define = define;
+  return result;
+};

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');