Packager upgrades (codesandbox#411)

* Packager upgrades

* Add faster resolving of depenendency versions

* Resolve main api

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/SearchDependencies.js

@@ -103,7 +103,12 @@ export default class SearchDependencies extends React.PureComponent {
   hitToVersionMap = new Map();
 
   handleSelect = hit => {
-    const version = this.hitToVersionMap.get(hit);
+    let version = this.hitToVersionMap.get(hit);
+
+    if (!version && hit.tags) {
+      version = hit.tags.latest;
+    }
+
     this.props.onConfirm(hit.name, version);
   };
 

packages/app/src/sandbox/eval/npm/fetch-npm-module.js

@@ -3,7 +3,8 @@ import * as pathUtils from 'common/utils/path';
 import resolve from 'browser-resolve';
 
 import type { Module } from '../entities/module';
-import Manager, { Manifest } from '../manager';
+import Manager from '../manager';
+import type { Manifest } from '../manager';
 
 import DependencyNotFoundError from '../../errors/dependency-not-found-error';
 import getDependencyName from '../utils/get-dependency-name';
@@ -76,8 +77,13 @@ function downloadDependency(depName: string, depVersion: string, path: string) {
     ''
   );
 
+  const isGitHub = /\//.test(depVersion);
+  const url = isGitHub
+    ? `https://cdn.jsdelivr.net/gh/${depVersion}${relativePath}`
+    : `https://unpkg.com/${depName}@${depVersion}${relativePath}`;
+
   packages[path] = window
-    .fetch(`https://unpkg.com/${depName}@${depVersion}${relativePath}`)
+    .fetch(url)
     .then(x => {
       if (x.ok) {
         return x.text();

packages/app/src/sandbox/npm/fetch-dependencies.js

@@ -13,6 +13,8 @@ type Dependencies = {
 const RETRY_COUNT = 60;
 const debug = _debug('cs:sandbox:packager');
 
+const host = process.env.CODESANDBOX_HOST;
+
 const VERSION = 1;
 
 const BUCKET_URL =
@@ -81,9 +83,39 @@ function dependenciesToBucketPath(dependencies: Object) {
     .join('%2B')}.json`;
 }
 
+async function getAbsoluteDependencies(dependencies: Object) {
+  const nonAbsoluteDependencies = Object.keys(dependencies).filter(dep => {
+    const version = dependencies[dep];
+
+    const isAbsolute = /^\d+\.\d+\.\d+$/.test(version);
+
+    return !isAbsolute && !/\//.test(version);
+  });
+
+  const newDependencies = { ...dependencies };
+
+  await Promise.all(
+    nonAbsoluteDependencies.map(async dep => {
+      try {
+        const data = await window
+          .fetch(`${host}/api/v1/dependencies/${dep}@${dependencies[dep]}`)
+          .then(x => x.json())
+          .then(x => x.data);
+
+        newDependencies[dep] = data.version;
+      } catch (e) {
+        /* ignore */
+      }
+    })
+  );
+
+  return newDependencies;
+}
+
 async function getDependencies(dependencies: Object) {
-  const dependencyUrl = dependenciesToQuery(dependencies);
-  const bucketDependencyUrl = dependenciesToBucketPath(dependencies);
+  const absoluteDependencies = await getAbsoluteDependencies(dependencies);
+  const dependencyUrl = dependenciesToQuery(absoluteDependencies);
+  const bucketDependencyUrl = dependenciesToBucketPath(absoluteDependencies);
 
   setScreen({ type: 'loading', text: 'Downloading Dependencies...' });
   try {
@@ -92,15 +124,14 @@ async function getDependencies(dependencies: Object) {
     );
     return bucketManifest;
   } catch (e) {
-    dispatch(actions.notifications.show('Bundling dependencies...'));
+    dispatch(actions.notifications.show('Resolving dependencies...'));
 
     // The dep has not been generated yet...
     const { url } = await requestPackager(
       `${PACKAGER_URL}/${dependencyUrl}`,
       'POST'
     );
 
-    setScreen({ type: 'loading', text: 'Downloading Dependencies...' });
     return requestPackager(`${BUCKET_URL}/${url}`);
   }
 }