Merge pull request #450 from live-codes/types

improve loading types
live-codes · Oct 12, 2023 · 1db73be · 1db73be
2 parents 6acaa10 + 7cdd9b2
commit 1db73be
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
@@ -17,13 +17,20 @@ export const importsPattern =
 
 export const dynamicImportsPattern = /(import\s*?\(\s*?((?:".*?")|(?:'.*?'))\s*?\))/g;
 
-export const getImports = (code: string) =>
+export const getImports = (code: string, removeSpecifier = false) =>
   [
     ...[...removeComments(code).matchAll(new RegExp(importsPattern))],
     ...[...removeComments(code).matchAll(new RegExp(dynamicImportsPattern))],
-  ].map((arr) => arr[2].replace(/"/g, '').replace(/'/g, ''));
+  ]
+    .map((arr) => arr[2].replace(/"/g, '').replace(/'/g, ''))
+    .map((mod) => {
+      if (!removeSpecifier || !isBare(mod) || !mod.includes(':')) {
+        return mod;
+      }
+      return mod.split(':')[1];
+    });
 
-const needsBundler = (mod: string) =>
+const needsBundler = /* @__PURE__ */ (mod: string) =>
   !mod.startsWith('https://deno.bundlejs.com/') &&
   !mod.startsWith('https://edge.bundlejs.com/') &&
   !mod.endsWith('#nobundle') &&
@@ -36,23 +43,23 @@ const needsBundler = (mod: string) =>
     mod.endsWith('.jsx') ||
     mod.endsWith('.tsx'));
 
-const isBare = (mod: string) =>
+export const isBare = /* @__PURE__ */ (mod: string) =>
   !mod.startsWith('https://') &&
   !mod.startsWith('http://') &&
   !mod.startsWith('.') &&
   !mod.startsWith('/') &&
   !mod.startsWith('data:') &&
   !mod.startsWith('blob:');
 
-const isStylesheet = (mod: string) =>
+const isStylesheet = /* @__PURE__ */ (mod: string) =>
   (mod.endsWith('.css') ||
     mod.endsWith('.scss') ||
     mod.endsWith('.sass') ||
     mod.endsWith('.less') ||
     mod.endsWith('.styl')) &&
   !mod.startsWith('./style');
 
-export const findImportMapKey = (mod: string, importmap: Record<string, string>) =>
+export const findImportMapKey = /* @__PURE__ */ (mod: string, importmap: Record<string, string>) =>
   Object.keys(importmap).find((key) => key === mod || mod.startsWith(key + '/'));
 
 export const createImportMap = (code: string, config: Config, fallbackToCdn = true) =>

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
@@ -657,7 +657,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     const npmPackageHoverProvider: Monaco.languages.HoverProvider = {
       provideHover(model, position) {
         const content = model.getLineContent(position.lineNumber);
-        let pkg = getImports(content)[0];
+        let pkg = getImports(content, /* removeSpecifier= */ true)[0];
         if (!pkg) return;
 
         if (
@@ -668,8 +668,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
           pkg.startsWith('blob:')
         ) {
           return;
-        } else if (/^(skypack|unpkg|jsdelivr|esm|esm\.run|esm\.sh|bundle\.run)\:/.test(pkg)) {
-          pkg = pkg.replace(/^(skypack|unpkg|jsdelivr|esm|esm\.run|esm\.sh|bundle\.run)\:/, '');
         }
         // remove version
         // pkg = pkg.replace(/(^@?([^@])+)(.*)/g, `$1`);

diff --git a/src/livecodes/services/types.ts b/src/livecodes/services/types.ts
@@ -1,26 +1,25 @@
+/* eslint-disable import/no-internal-modules */
+import { isBare } from '../compiler/import-map';
 import type { Types } from '../models';
-import { allowedOrigin } from './allowed-origin';
 
 export const typesService = {
   getTypeUrls: async (types: string[]) => {
-    let fetchedTypes: Types = {};
-    if (types.length > 0 && allowedOrigin()) {
-      try {
-        const api = 'https://api.livecodes.io/types';
-        const res = await fetch(api, {
-          method: 'POST',
-          mode: 'cors',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ types }),
-        });
-        fetchedTypes = await res.json();
-      } catch {
-        //
-      }
-    }
+    const fetchedTypes: Types = {};
+    await Promise.all(
+      types.map(async (type) => {
+        if (!isBare(type)) return;
+        try {
+          const mod = type.includes(':') ? type.split(':')[1] : type;
+          const res = await fetch('https://esm.sh/' + mod);
+          if (!res.ok) return;
+          const typesUrl = res.headers.get('X-Typescript-Types');
+          if (!typesUrl) return;
+          fetchedTypes[type] = typesUrl;
+        } catch {
+          // ignore
+        }
+      }),
+    );
     return fetchedTypes;
   },
 };