fix(Types): fix race condition in loading types

src/livecodes/core.ts

@@ -313,7 +313,12 @@ const createIframe = (container: HTMLElement, result = '', service = sandboxServ
     resultLanguages = getEditorLanguages();
   });
 
-const loadModuleTypes = async (editors: Editors, config: Config, force = false) => {
+const loadModuleTypes = async (
+  editors: Editors,
+  config: Config,
+  loadAll = false,
+  force = false,
+) => {
   if (typeof editors?.script?.addTypes !== 'function') return;
   const scriptLanguage = config.script.language;
   if (['typescript', 'javascript'].includes(mapLanguage(scriptLanguage)) || force) {
@@ -327,6 +332,7 @@ const loadModuleTypes = async (editors: Editors, config: Config, force = false)
     const libs = await typeLoader.load(
       getConfig().script.content + '\n' + getConfig().markup.content,
       configTypes,
+      loadAll,
       force,
     );
     libs.forEach((lib) => editors.script.addTypes?.(lib, force));
@@ -729,7 +735,7 @@ const changeLanguage = async (language: Language, value?: string, isUpdate = fal
   await setSavedStatus();
   dispatchChangeEvent();
   addConsoleInputCodeCompletion();
-  loadModuleTypes(editors, getConfig());
+  loadModuleTypes(editors, getConfig(), /* loadAll = */ true);
   await applyLanguageConfigs(language);
 };
 
@@ -3458,7 +3464,7 @@ const handleCustomSettings = () => {
         setCustomSettingsMark();
         await setSavedStatus();
         if (customSettings.types) {
-          loadModuleTypes(editors, getConfig(), /* force */ true);
+          loadModuleTypes(editors, getConfig(), /* loadAll = */ true, /* force */ true);
         }
       }
       customSettingsEditor?.destroy();
@@ -4149,7 +4155,7 @@ const bootstrap = async (reload = false) => {
   setExternalResourcesMark();
   setCustomSettingsMark();
   updateCompiledCode();
-  loadModuleTypes(editors, getConfig());
+  loadModuleTypes(editors, getConfig(), /* loadAll = */ true);
   compiler.load(Object.values(editorLanguages || {}), getConfig()).then(() => {
     if (!getConfig().autoupdate) {
       setLoading(false);

src/livecodes/types/default-types.ts

@@ -3,7 +3,5 @@ import type { Types } from '../models';
 import { modulesService } from '../services/modules';
 
 export const getDefaultTypes = (): Types => ({
-  react: modulesService.getUrl('@types/react/index.d.ts'),
-  'react-dom': modulesService.getUrl('@types/react-dom/index.d.ts'),
-  'react-dom/client': modulesService.getUrl('@types/react-dom/client.d.ts'),
+  livecodes: modulesService.getUrl('livecodes/livecodes.d.ts'),
 });

src/livecodes/types/type-loader.ts

@@ -2,17 +2,20 @@
 import type { EditorLibrary, Types } from '../models';
 import { getImports, hasUrlImportsOrExports } from '../compiler/import-map';
 import { typesService } from '../services/types';
-import { objectFilter, removeDuplicates, safeName } from '../utils/utils';
+import { objectFilter, safeName } from '../utils/utils';
 
 export const createTypeLoader = (baseUrl: string) => {
   let loadedTypes: Types = {};
+  const libs: EditorLibrary[] = [];
 
   const getTypeContents = async (type: Types): Promise<EditorLibrary> => {
     let content = '';
     const name = Object.keys(type)[0];
     const value = Object.values(type)[0];
     const url = typeof value === 'string' ? value : value.url;
-
+    if (loadedTypes[name]) {
+      return { filename: '', content: '' };
+    }
     if (url) {
       try {
         const res = await fetch(url);
@@ -46,19 +49,23 @@ export const createTypeLoader = (baseUrl: string) => {
         }),
         {},
       );
+    if (content.trim() === '') {
+      loadedTypes = prevTypes;
+      return { filename: '', content: '' };
+    }
     loadedTypes = { ...prevTypes, ...type };
-    return {
+    const lib = {
       filename: `file:///node_modules/${safeName(name)}/index.d.ts`,
       content,
     };
+    libs.push(lib);
+    return lib;
   };
 
   const loadTypes = (types: Types) =>
-    Promise.all(
-      removeDuplicates(Object.keys(types)).map((t) => getTypeContents({ [t]: types[t] })),
-    );
+    Promise.all(Object.keys(types).map((t) => getTypeContents({ [t]: types[t] })));
 
-  const load = async (code: string, configTypes: Types, forceLoad = false) => {
+  const load = async (code: string, configTypes: Types, loadAll = false, forceLoad = false) => {
     const imports = getImports(code);
 
     const codeTypes: Types = imports.reduce((accTypes, lib) => {
@@ -101,7 +108,8 @@ export const createTypeLoader = (baseUrl: string) => {
         value.autoload === true,
     );
 
-    return loadTypes({ ...codeTypes, ...fetchedTypes, ...autoloadTypes });
+    const newLibs = await loadTypes({ ...codeTypes, ...fetchedTypes, ...autoloadTypes });
+    return loadAll ? libs : newLibs;
   };
 
   return {