Add support for vendor files and external css

jupyterlab/lab.html

@@ -15,6 +15,9 @@ Distributed under the terms of the Modified BSD License.
     {% endif %}
     <script src="{{static_url("components/jquery/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script> <!-- window.$ -->
     <script src="{{static_url("components/jquery-ui/ui/minified/jquery-ui.min.js") }}" type="text/javascript" charset="utf-8"></script> <!-- extends window.$ -->
+    <link href="{{static_prefix}}/vendor.css" rel="stylesheet">
+    <link href="{{static_prefix}}/CodeMirror.css" rel="stylesheet">
+    <link href="{{static_prefix}}/main.css" rel="stylesheet">
 </head>
 
 
@@ -26,9 +29,11 @@ Distributed under the terms of the Modified BSD License.
   "wsUrl": "{{ws_url| urlencode}}",
   "notebookPath": "{{notebook_path | urlencode}}"
 }</script>
+
 <script src="{{static_prefix}}/phosphor.bundle.js" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_prefix}}/services.bundle.js" type="text/javascript" charset="utf-8"></script>
-<script src="{{static_prefix}}/codemirror.bundle.js" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_prefix}}/vendor.bundle.js" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_prefix}}/CodeMirror.bundle.js" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_prefix}}/jupyterlab.bundle.js" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_prefix}}/main.bundle.js" type="text/javascript" charset="utf-8"></script>
 </body>

jupyterlab/package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.5",
+    "find-imports": "^0.5.0",
     "json-loader": "^0.5.4",
     "rimraf": "^2.5.0",
     "style-loader": "^0.13.0",

jupyterlab/webpack.config.js

@@ -6,9 +6,14 @@
 require('es6-promise').polyfill();
 
 var fs = require('fs');
+var webpack = require("webpack");
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var helpers = require('jupyterlab/scripts/extension_helpers');
 var shimmer = require('./shim-maker');
-var webpack = require("webpack");
+
+// Get the CodeMirror files to create external bundle.
+var CodeMirrorFiles = helpers.CODEMIRROR_FILES;
+CodeMirrorFiles.push('codemirror/lib/codemirror.js');
 
 // Create the Phosphor and JupyterLab shims.
 try {
@@ -16,12 +21,13 @@ try {
 } catch(err) {
   // Already exists
 }
+
 fs.writeFileSync('./build/phosphor-shim.js', shimmer('phosphor', 'lib'));
 var jlabShim = shimmer('jupyterlab', 'lib', /.*index\.js$/);
 fs.writeFileSync('./build/jupyterlab-shim.js', jlabShim);
 
 var loaders = [
-  { test: /\.css$/, loader: 'style-loader!css-loader' },
+  { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
   { test: /\.json$/, loader: 'json-loader' },
   { test: /\.html$/, loader: 'file-loader' },
   // jquery-ui loads some images
@@ -31,7 +37,7 @@ var loaders = [
   { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
   { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
   { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
-  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
+  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
 ]
 
 
@@ -40,12 +46,14 @@ module.exports = [
 {
   entry: {
     'main': './index.js',
-    'jupyterlab': './build/jupyterlab-shim.js'
+    'jupyterlab': './build/jupyterlab-shim.js',
+    'CodeMirror': CodeMirrorFiles,
+    'vendor': helpers.VENDOR_FILES
   },
   output: {
     path: __dirname + '/build',
     filename: '[name].bundle.js',
-    publicPath: 'lab/',
+    publicPath: './',
     library: '[name]'
   },
   node: {
@@ -58,24 +66,24 @@ module.exports = [
     loaders: loaders
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin("jupyterlab", "jupyterlab.bundle.js")
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "jupyterlab",
+      filename: "jupyterlab.bundle.js",
+      chunks: ['main']
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "vendor",
+      filename: "vendor.bundle.js"
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "CodeMirror",
+      filename: "CodeMirror.bundle.js",
+      chunks: ['jupyterlab']
+    }),
+    new ExtractTextPlugin("[name].css")
   ],
   externals: helpers.BASE_EXTERNALS
 },
-// Codemirror bundle
-{
-   entry: 'codemirror',
-   output: {
-      filename: 'codemirror.bundle.js',
-      path: './build',
-      library: 'codemirror'
-   },
-   module: {
-    loaders: loaders
-   },
-   bail: true,
-   devtool: 'source-map'
-},
 // Jupyter-js-services bundle
 {
     entry: 'jupyter-js-services',

scripts/extension_helpers.js

@@ -2,6 +2,20 @@
 // Distributed under the terms of the Modified BSD License.
 
 var path = require('path');
+var findImports = require('find-imports');
+
+// Get the list of vendor files.
+var VENDOR_FILES = findImports('../lib/**/*.js', { flatten: true });
+var CODEMIRROR_FILES = VENDOR_FILES.filter(function(importPath) {
+  return importPath.indexOf('codemirror') !== -1;
+});
+var codemirrorPaths = CODEMIRROR_FILES.map(function(importPath) {
+  return importPath.replace('.js', '');
+});
+VENDOR_FILES = VENDOR_FILES.filter(function (importPath) {
+  return (importPath.indexOf('codemirror') === -1 && 
+          importPath.indexOf('phosphor') === -1);
+});
 
 /*
   Helper scripts to be used by extension authors (and extension extenders) in a
@@ -55,10 +69,6 @@ var BASE_EXTERNALS = [
     },
     {
       'jupyter-js-services': 'jupyter.services',
-      'codemirror': 'codemirror',
-      'codemirror/lib/codemirror': 'codemirror',
-      '../lib/codemirror': 'codemirror',
-      '../../lib/codemirror': 'codemirror',
       'jquery': '$',
       'jquery-ui': '$'
     }
@@ -71,12 +81,19 @@ var DEFAULT_EXTERNALS = BASE_EXTERNALS + [
       // JupyterLab imports get mangled to use the external bundle.
       regex = /^jupyterlab\/lib\/([a-z\/]+)$/;
       if(regex.test(request)) {
-          console.log(request);
           var matches = regex.exec(request)[1];
           var lib = 'var jupyterlab.' + matches.split('/').join('.');
           return callback(null, lib);
       }
+      if (codemirrorPaths.indexOf(request) !== -1) {
+        return callback(null, 'var CodeMirror');
+      }
       callback();
+    },
+    {
+      'codemirror': 'CodeMirror',
+      '../lib/codemirror': 'CodeMirror',
+      '../../lib/codemirror': 'CodeMirror',
     }
 ]
 
@@ -170,5 +187,7 @@ function upstream_externals(_require) {
 module.exports = {
   upstream_externals: upstream_externals,
   validate_extension: validate_extension,
-  BASE_EXTERNALS: BASE_EXTERNALS
+  BASE_EXTERNALS: BASE_EXTERNALS,
+  CODEMIRROR_FILES: CODEMIRROR_FILES,
+  VENDOR_FILES: VENDOR_FILES
 };