Download dependencies seperately and merge in bundler (codesandbox#3880)

* Download dependencies seperately and merge in bundler

* Fix loading dependencies with a dash in the version

Fixes codesandbox#3782

* Clean up fetching packages

* Add new packager to service worker

Author: CompuIves

packages/app/config/webpack.prod.js

@@ -286,7 +286,7 @@ module.exports = merge(commonConfig, {
           },
         },
         {
-          urlPattern: /prod-packager-packages\.csb\.dev/,
+          urlPattern: /prod-packager-packages\.codesandbox\.io/,
           handler: 'fastest',
           options: {
             cache: {

packages/app/src/sandbox/eval/utils/get-dependency-name.test.ts

@@ -22,4 +22,10 @@ describe('getDependencyName', () => {
       '@angular/core/4.4.3'
     );
   });
+
+  it('can find a simple dependency name with beta tag', () => {
+    expect(getDependencyName('reakit/1.0.0-beta.16/lib/Component')).toBe(
+      'reakit/1.0.0-beta.16'
+    );
+  });
 });

packages/app/src/sandbox/eval/utils/get-dependency-name.ts

@@ -5,7 +5,7 @@ export default function getDependencyName(path: string) {
   if (path.startsWith('@')) {
     dependencyName += `/${dependencyParts.shift()}`;
   }
-  if (dependencyParts[0] && /^\d+\.\d+\.\d+$/.test(dependencyParts[0])) {
+  if (dependencyParts[0] && /^\d+\.\d+\.\d+.*$/.test(dependencyParts[0])) {
     // Make sure to include the aliased version if it's part of it
     dependencyName += `/${dependencyParts.shift()}`;
   }

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

@@ -1,6 +1,7 @@
 import _debug from '@codesandbox/common/lib/utils/debug';
 import { getAbsoluteDependencies } from '@codesandbox/common/lib/utils/dependencies';
 import { actions, dispatch } from 'codesandbox-api';
+import { mergeDependencies } from 'sandbox/version-resolving/merge-dependency';
 
 import setScreen from '../status-screen';
 import delay from '../utils/delay';
@@ -60,7 +61,7 @@ function callApi(url: string, method = 'GET') {
  *
  * @param {string} query The dependencies to call
  */
-async function requestPackager(url, method = 'GET') {
+async function requestPackager(url: string, method = 'GET') {
   let retries = 0;
 
   // eslint-disable-next-line no-constant-condition
@@ -85,17 +86,8 @@ async function requestPackager(url, method = 'GET') {
   }
 }
 
-function dependenciesToBucketPath(dependencies: Object) {
-  return `v${VERSION}/combinations/${Object.keys(dependencies)
-    .sort()
-    .map(
-      // Paths starting with slashes don't work with cloudfront, even escaped. So we remove the slashes
-      dep =>
-        `${encodeURIComponent(dep.replace('/', '-').replace('@', ''))}@${
-          dependencies[dep]
-        }`
-    )
-    .join('%2B')}.json`;
+function dependencyToPackagePath(name: string, version: string) {
+  return `v${VERSION}/packages/${name}/${version}.json`;
 }
 
 /**
@@ -115,44 +107,50 @@ async function getDependencies(
   dependencies: Object,
   showLoadingFullScreen: boolean
 ) {
-  const absoluteDependencies = await getAbsoluteDependencies(
-    removeSpacesFromDependencies(dependencies)
-  );
-  const dependencyUrl = dependenciesToQuery(absoluteDependencies);
-  const bucketDependencyUrl = dependenciesToBucketPath(absoluteDependencies);
-
   setScreen({
     type: 'loading',
     text: 'Downloading Dependencies...',
     showFullScreen: showLoadingFullScreen,
   });
 
-  try {
-    const bucketManifest = await callApi(
-      `${BUCKET_URL}/${bucketDependencyUrl}`
-    );
-    return bucketManifest;
-  } catch (e) {
-    setScreen({
-      type: 'loading',
-      text: 'Resolving Dependencies...',
-      showFullScreen: showLoadingFullScreen,
-    });
-
-    // The dep has not been generated yet...
-    const { url } = await requestPackager(
-      `${PACKAGER_URL}/${dependencyUrl}`,
-      'POST'
-    );
-
-    setScreen({
-      type: 'loading',
-      text: 'Downloading Dependencies...',
-      showFullScreen: showLoadingFullScreen,
-    });
-
-    return requestPackager(`${BUCKET_URL}/${url}`);
-  }
+  const absoluteDependencies = await getAbsoluteDependencies(
+    removeSpacesFromDependencies(dependencies)
+  );
+
+  const deps = await Promise.all(
+    Object.keys(absoluteDependencies).map(async name => {
+      const version = absoluteDependencies[name];
+      const dep = { [name]: version };
+
+      const dependencyUrl = dependenciesToQuery(dep);
+      const bucketDependencyUrl = dependencyToPackagePath(name, version);
+      const fullUrl = `${BUCKET_URL}/${bucketDependencyUrl}`;
+
+      try {
+        const bucketManifest = await callApi(fullUrl);
+        return bucketManifest;
+      } catch (e) {
+        setScreen({
+          type: 'loading',
+          text: 'Resolving Dependencies...',
+          showFullScreen: showLoadingFullScreen,
+        });
+
+        // The dep has not been generated yet...
+        await requestPackager(`${PACKAGER_URL}/${dependencyUrl}`, 'POST');
+
+        setScreen({
+          type: 'loading',
+          text: 'Downloading Dependencies...',
+          showFullScreen: showLoadingFullScreen,
+        });
+
+        return requestPackager(fullUrl);
+      }
+    })
+  );
+
+  return mergeDependencies(deps);
 }
 
 export async function fetchDependencies(