Transition to new packager (codesandbox#8)

* Transition to new packager

* log to raven

Author: CompuIves

src/app/store/entities/sandboxes/actions.js

@@ -1,15 +1,14 @@
 // @flow
 import { push } from 'react-router-redux';
+import type { Module, Directory } from 'common/types';
 
 import { createAPIActions, doRequest } from '../../api/actions';
 import { normalizeResult } from '../actions';
 import notificationActions from '../../notifications/actions';
 import entity from './entity';
-import fetchBundle from './bundle-loader';
-import type { Module } from './modules/entity';
+import fetchBundle from './bundler';
 import moduleEntity from './modules/entity';
 import moduleActions from './modules/actions';
-import type { Directory } from './directories/entity';
 import directoryEntity from './directories/entity';
 import directoryActions from './directories/actions';
 import { singleSandboxSelector } from './selectors';

src/app/store/entities/sandboxes/bundle-loader.js

@@ -0,0 +1,5 @@
+export default (dependencies: Object) =>
+  Object.keys(dependencies)
+    .sort()
+    .map(name => `${name}@${dependencies[name]}`)
+    .join('+');

src/app/store/entities/sandboxes/bundler/dependencies-to-query.js

@@ -0,0 +1,13 @@
+import dependenciesToQuery from './dependencies-to-query';
+
+it('creates a right query', () => {
+  const packages = {
+    react: 'latest',
+    'react-dom': '15.5.3',
+    '@angular/core': '14.0.0',
+  };
+
+  expect(dependenciesToQuery(packages)).toEqual(
+    '@angular/[email protected]+react@[email protected]'
+  );
+});

src/app/store/entities/sandboxes/bundler/dependencies-to-query.test.js

@@ -0,0 +1,76 @@
+import _debug from 'app/utils/debug';
+
+import callApi from '../../../services/api';
+import delay from '../../../services/delay';
+
+import dependenciesToQuery from './dependencies-to-query';
+import { singleSandboxSelector } from '../selectors';
+import logError from '../../../../utils/error';
+
+const debug = _debug('cs:app:packager');
+
+/**
+ * Request the packager, if retries > 4 it will throw if something goes wrong
+ * otherwise it will retry again with an incremented retry
+ *
+ * @param {string} query The dependencies to call
+ */
+async function requestPackager(query: string) {
+  let retries = 0;
+
+  while (true) {
+    debug(`Trying to call packager for ${retries} time`);
+    try {
+      await callApi(
+        `https://cdn.jsdelivr.net/webpack/v1/${query}/manifest.json`,
+      );
+      return;
+    } catch (e) {
+      if (retries < 5) {
+        retries += 1;
+      } else {
+        throw e;
+      }
+    }
+  }
+}
+
+async function callNewPackager(dependencies: Object) {
+  // New Packager flow
+  try {
+    const dependencyUrl = dependenciesToQuery(dependencies);
+
+    await requestPackager(dependencyUrl);
+  } catch (e) {
+    logError(e, { level: 'warning', service: 'packager' });
+  }
+}
+
+export default function fetch(actions, id: string) {
+  return async (dispatch: Function, getState: Function) => {
+    const sandbox = singleSandboxSelector(getState(), { id });
+    if (sandbox) {
+      callNewPackager(sandbox.npmDependencies);
+    }
+
+    dispatch({ type: actions.REQUEST, initial: true, id });
+    const firstResult = await callApi('/bundler/bundle', null, {
+      method: 'POST',
+      body: { id },
+    });
+    dispatch({ type: actions.SUCCESS, result: firstResult });
+
+    if (firstResult.manifest) {
+      return firstResult;
+    }
+
+    while (true) {
+      await delay(1000);
+      const result = await callApi(`/bundler/bundle/${firstResult.hash}`);
+
+      if (result.manifest) {
+        return result;
+      }
+    }
+  };
+}

src/app/store/entities/sandboxes/bundler/index.js

@@ -2,7 +2,6 @@
 import { camelizeKeys, decamelizeKeys } from 'humps';
 import axios from 'axios';
 
-import getJwt from '../user/utils/jwt';
 import { optionsToParameterizedUrl } from '../../utils/url-generator';
 
 const API_ROOT = '/api/v1/';
@@ -14,6 +13,14 @@ export type BodyType = {
   jwt: ?string,
 };
 
+function getUrl(endpoint: string) {
+  if (endpoint.startsWith('http')) {
+    return endpoint;
+  }
+
+  return endpoint.split('')[0] === '/' ? endpoint : `${API_ROOT}${endpoint}`;
+}
+
 /**
  * Sends a request to the API and returns a promise with camelized response
  */
@@ -25,9 +32,7 @@ export default (async function callApi(
   if (!endpoint) throw new Error('No endpoint is given');
 
   // If it is an absolute url.
-  const url = endpoint.split('')[0] === '/'
-    ? endpoint
-    : `${API_ROOT}${endpoint}`;
+  const url = getUrl(endpoint);
 
   const options = { url, method };
 

src/app/store/services/api.js

@@ -1,5 +1,19 @@
 const getDebugger = () => {
-  if (process.env.NODE_ENV !== 'development') return () => () => {};
+  if (process.env.NODE_ENV === 'production') {
+    // Return a debugger that will log to sentry
+    return (key: string) => (message: string) => {
+      if (typeof window.Raven === 'object') {
+        try {
+          Raven.captureMessage(message, {
+            level: 'info',
+            logger: key,
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    };
+  }
 
   const debug = require('debug'); // eslint-disable-line global-require
   debug.enable('cs:*');