Use webpackbin as bundler

Ives van Hoorne · Ives van Hoorne · commit 8ffb3acaef01 · 2017-04-10T22:22:24.000+02:00
diff --git a/src/app/store/entities/reducer.js b/src/app/store/entities/reducer.js
@@ -9,7 +9,7 @@ import moduleReducer from './sandboxes/modules/reducer';
 import directoryReducer from './sandboxes/directories/reducer';
 import userReducer from './sandboxes/users/reducer';
 
-const d = _debug('cw:app:store:reducers:entities');
+const d = _debug('cs:app:store:reducers:entities');
 
 const entityReducers = {
   sandboxes: sandboxReducer,
diff --git a/src/app/store/entities/sandboxes/actions.js b/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 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';
diff --git a/src/app/store/entities/sandboxes/bundle-loader.js b/src/app/store/entities/sandboxes/bundle-loader.js
@@ -1,26 +1,34 @@
+import { singleSandboxSelector } from 'app/store/entities/sandboxes/selectors';
+
 import callApi from '../../services/api';
-import delay from '../../services/delay';
+
+const getDependencyString = npmDependencies => {
+  return Object.keys(npmDependencies)
+    .map(dep => `${dep}@${npmDependencies[dep]}`)
+    .join('+');
+};
 
 export default function fetch(actions, id: string) {
-  return async (dispatch: Function) => {
+  return async (dispatch: Function, getState: Function) => {
     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;
-    }
+    const sandbox = singleSandboxSelector(getState(), { id });
+    const dependencyString = getDependencyString(sandbox.npmDependencies);
+
+    const baseUrl = `https://cdn.jsdelivr.net/webpack/v1/${dependencyString}`;
 
-    while (true) {
-      await delay(1000);
-      const result = await callApi(`/bundler/bundle/${firstResult.hash}`);
+    const manifest = await callApi(`${baseUrl}/manifest.json`);
+
+    const result = {
+      manifest,
+      url: `${baseUrl}/dll.js`,
+    };
+
+    dispatch({
+      type: actions.SUCCESS,
+      result,
+    });
 
-      if (result.manifest) {
-        return result;
-      }
-    }
+    return result;
   };
 }
diff --git a/src/app/store/services/api.js b/src/app/store/services/api.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,12 @@ export type BodyType = {
   jwt: ?string,
 };
 
+const getUrl = (url: string) => {
+  if (url.startsWith('https://')) return url;
+
+  return url.split('')[0] === '/' ? url : `${API_ROOT}${url}`;
+};
+
 /**
  * Sends a request to the API and returns a promise with camelized response
  */
@@ -29,9 +34,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 };
 
diff --git a/src/sandbox/eval/js.js b/src/sandbox/eval/js.js
@@ -59,9 +59,14 @@ export default function evaluateJS(
       // eslint-disable-line no-unused-vars
       if (/^\w/.test(path)) {
         // So it must be a dependency
-        const dependencyManifest = manifest[path] || manifest[`${path}.js`];
-        if (dependencyManifest) {
-          return window.dependencies(dependencyManifest.id);
+        const dependencyModuleIdString = manifest.externals[path] ||
+          manifest.externals[`${path}.js`];
+
+        const dependencyModuleId = dependencyModuleIdString.match(
+          /dll_bundle\((.*)\)/
+        )[1];
+        if (dependencyModuleId) {
+          return window.dll_bundle(dependencyModuleId);
         } else {
           throw new DependencyNotFoundError(path);
         }
diff --git a/src/sandbox/index.js b/src/sandbox/index.js
@@ -20,12 +20,13 @@ let url = null;
 
 async function addDependencyBundle() {
   if (url !== '') {
+    window.dll_bundle = null;
     const script = document.createElement('script');
     script.setAttribute('src', url);
     script.setAttribute('async', false);
     document.head.appendChild(script);
 
-    while (window.dependencies == null) {
+    while (window.dll_bundle == null) {
       await delay(100);
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -20,12 +20,13 @@ let url = null;`
`20`	`20`
`21`	`21`	`async function addDependencyBundle() {`
`22`	`22`	`if (url !== '') {`
	`23`	`+ window.dll_bundle = null;`
`23`	`24`	`const script = document.createElement('script');`
`24`	`25`	`script.setAttribute('src', url);`
`25`	`26`	`script.setAttribute('async', false);`
`26`	`27`	`document.head.appendChild(script);`
`27`	`28`
`28`		`- while (window.dependencies == null) {`
	`29`	`+ while (window.dll_bundle == null) {`
`29`	`30`	`await delay(100);`
`30`	`31`	`}`
`31`	`32`	`}`