fix(App): fix loading types in embeds

hatemhosny · hatemhosny · commit d5f727c51b12 · 2025-02-19T14:31:11.000+02:00
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -364,6 +364,10 @@ const loadModuleTypes = async (
   if (typeof editors?.script?.addTypes !== 'function') return;
   const scriptLanguage = config.script.language;
   if (['typescript', 'javascript'].includes(mapLanguage(scriptLanguage)) || force) {
+    if (compiler.isFake) {
+      // we need the real compiler for types
+      await reloadCompiler({ ...config, mode: 'full' });
+    }
     const configTypes = {
       ...getLanguageCompiler(config.markup.language)?.types,
       ...getLanguageCompiler(config.script.language)?.types,
@@ -449,7 +453,9 @@ const createCopyButtons = () => {
 };
 
 const createEditors = async (config: Config) => {
+  let isReload = false;
   if (editors) {
+    isReload = true;
     Object.values(editors).forEach((editor: CodeEditor) => editor.destroy());
     resetEditorModeStatus();
   }
@@ -539,6 +545,10 @@ const createEditors = async (config: Config) => {
   if (config.mode === 'codeblock') {
     createCopyButtons();
   }
+
+  if (isReload) {
+    loadModuleTypes(editors, config, /* loadAll = */ true);
+  }
 };
 
 const reloadEditors = async (config: Config) => {
@@ -1057,6 +1067,17 @@ const getResultPage = async ({
   return result;
 };
 
+const reloadCompiler = async (config: Config, force = false) => {
+  if (!compiler.isFake && !force) return;
+  compiler = (window as any).compiler = await getCompiler({
+    config,
+    baseUrl,
+    eventsManager,
+  });
+  setCache();
+  await getResultPage({});
+};
+
 const setLoading = (status: boolean) => {
   const loading = UI.getToolspaneLoader();
   if (!loading) return;
@@ -5394,8 +5415,11 @@ const initializePlayground = async (
   loadUserConfig(/* updateUI = */ false);
   setConfig(buildConfig({ ...getConfig(), ...appConfig }));
   configureModes({ config: getConfig(), isEmbed, isLite });
-  compiler = await getCompiler({ config: getConfig(), baseUrl, eventsManager });
-  (window as any).compiler = compiler;
+  compiler = (window as any).compiler = await getCompiler({
+    config: getConfig(),
+    baseUrl,
+    eventsManager,
+  });
   formatter = getFormatter(getConfig(), baseUrl, isEmbed);
   customEditors = createCustomEditors({ baseUrl, eventsManager });
   await loadI18n(getConfig().appLanguage);
@@ -5448,35 +5472,37 @@ const createApi = (): API => {
     const newAppConfig = buildConfig({ ...currentConfig, ...newConfig });
     const hasNewAppLanguage =
       newConfig.appLanguage && newConfig.appLanguage !== i18n?.getLanguage();
-    const reloadCompiler =
-      (currentConfig.mode === 'editor' || currentConfig.mode === 'codeblock') &&
-      newConfig.mode !== 'editor' &&
-      newConfig.mode !== 'codeblock' &&
-      compiler.isFake;
-    const reloadCodeEditors =
-      newConfig.mode != null &&
-      newConfig.mode !== currentConfig.mode &&
-      (['codeblock', 'result'].includes(currentConfig.mode) ||
-        ['codeblock', 'result'].includes(newConfig.mode!));
+    const shouldRun =
+      newConfig.mode != null && newConfig.mode !== 'editor' && newConfig.mode !== 'codeblock';
+    const shouldReloadCompiler = shouldRun && compiler.isFake;
+    const shouldReloadCodeEditors = (() => {
+      if (newConfig.editor != null && !(newConfig.editor in editors.markup)) return true;
+      if (newConfig.mode != null) {
+        if (newConfig.mode !== 'result' && editors.markup.isFake) return true;
+        if (newConfig.mode !== 'codeblock' && editors.markup.codejar) return true;
+      }
+      return false;
+    })();
 
     setConfig(newAppConfig);
 
     if (hasNewAppLanguage) {
       changeAppLanguage(newConfig.appLanguage!);
       return newAppConfig;
     }
-    if (reloadCompiler) {
-      compiler = await getCompiler({ config: getConfig(), baseUrl, eventsManager });
-      await run();
+    if (shouldReloadCompiler) {
+      await reloadCompiler(newAppConfig);
     }
-    if (reloadCodeEditors) {
+    if (shouldReloadCodeEditors) {
       await createEditors(newAppConfig);
     }
     await applyConfig(newConfig);
     const content = getContentConfig(newConfig as Config);
     const hasContent = Object.values(content).some((value) => value != null);
     if (hasContent) {
       await loadConfig(newAppConfig);
+    } else if (shouldRun) {
+      await run();
     }
     return newAppConfig;
   };
diff --git a/src/livecodes/types/type-loader.ts b/src/livecodes/types/type-loader.ts
@@ -94,10 +94,11 @@ export const createTypeLoader = (baseUrl: string) => {
     if (!code?.trim()) {
       return [];
     }
-    const types: EditorLibrary[] = await (window as any).compiler.typescriptFeatures({
-      feature: 'ata',
-      payload: code,
-    });
+    const types: EditorLibrary[] =
+      (await (window as any).compiler?.typescriptFeatures?.({
+        feature: 'ata',
+        payload: code,
+      })) ?? [];
     libs.push(...types);
     if (typeof callback === 'function') {
       types.forEach((type) => {
