Ship vega4-extension by default

buildutils/src/ensure-package.ts

@@ -38,9 +38,14 @@ export async function ensurePackage(
   let messages: string[] = [];
   let locals = options.locals || {};
   let cssImports = options.cssImports || [];
+  let differentVersions = options.differentVersions || [];
 
   // Verify dependencies are consistent.
   let promises = Object.keys(deps).map(async name => {
+    if (differentVersions.indexOf(name) !== -1) {
+      // Skip processing packages that can have different versions
+      return;
+    }
     if (!(name in seenDeps)) {
       seenDeps[name] = await getDependency(name);
     }
@@ -324,6 +329,11 @@ export interface IEnsurePackageOptions {
    * The css import list for the package.
    */
   cssImports?: string[];
+
+  /**
+   * Packages which are allowed to have multiple versions pulled in
+   */
+  differentVersions?: string[];
 }
 
 /**

buildutils/src/ensure-repo.ts

@@ -29,10 +29,14 @@ let UNUSED: Dict<string[]> = {
   '@jupyterlab/services': ['node-fetch', 'ws'],
   '@jupyterlab/testutils': ['node-fetch', 'identity-obj-proxy'],
   '@jupyterlab/test-csvviewer': ['csv-spectrum'],
+  '@jupyterlab/vega4-extension': ['vega', 'vega-lite'],
   '@jupyterlab/vega5-extension': ['vega', 'vega-lite'],
   '@jupyterlab/ui-components': ['@blueprintjs/icons']
 };
 
+// Packages that are allowed to have differing versions
+let DIFFERENT_VERSIONS: Array<string> = ['vega-lite', 'vega', 'vega-embed'];
+
 let SKIP_CSS: Dict<string[]> = {
   '@jupyterlab/application': ['@jupyterlab/rendermime'],
   '@jupyterlab/application-extension': ['@jupyterlab/apputils'],
@@ -308,7 +312,8 @@ export async function ensureIntegrity(): Promise<boolean> {
       missing: MISSING[name],
       unused,
       locals,
-      cssImports: cssImports[name]
+      cssImports: cssImports[name],
+      differentVersions: DIFFERENT_VERSIONS
     };
 
     if (name === '@jupyterlab/metapackage') {

buildutils/src/utils.ts

@@ -15,7 +15,7 @@ export function getLernaPaths(basePath = '.'): string[] {
   basePath = path.resolve(basePath);
   let baseConfig = require(path.join(basePath, 'package.json'));
   let paths: string[] = [];
-  for (let config of baseConfig.workspaces) {
+  for (let config of baseConfig.workspaces.packages) {
     paths = paths.concat(glob.sync(path.join(basePath, config)));
   }
   return paths.filter(pkgPath => {
@@ -227,7 +227,7 @@ export function getPackageGraph(): DepGraph<Dict<any>> {
         if (depName in locals) {
           depData = locals[depName];
         } else {
-          depData = require(`${depName}/package.json`);
+          depData = requirePackage(name, depName);
         }
         graph.addNode(depName, depData);
       }
@@ -237,3 +237,24 @@ export function getPackageGraph(): DepGraph<Dict<any>> {
 
   return graph;
 }
+
+/**
+ * Resolve a `package.json` in the `module` starting at resolution from the `parentModule`.
+ *
+ * We could just use "require(`${depName}/package.json`)", however this won't work for modules
+ * that are not hoisted to the top level.
+ */
+function requirePackage(parentModule: string, module: string) {
+  const packagePath = `${module}/package.json`;
+  let parentModulePath: string;
+  // This will fail when the parent module cannot be loaded, like `@jupyterlab/test-root`
+  try {
+    parentModulePath = require.resolve(parentModule);
+  } catch {
+    return require(packagePath);
+  }
+  const requirePath = require.resolve(packagePath, {
+    paths: [parentModulePath]
+  });
+  return require(requirePath);
+}

dev_mode/imports.css

@@ -32,4 +32,5 @@
 @import url('~@jupyterlab/terminal-extension/style/index.css');
 @import url('~@jupyterlab/tooltip-extension/style/index.css');
 @import url('~@jupyterlab/vdom-extension/style/index.css');
+@import url('~@jupyterlab/vega4-extension/style/index.css');
 @import url('~@jupyterlab/vega5-extension/style/index.css');

dev_mode/package.json

@@ -2,6 +2,11 @@
   "name": "@jupyterlab/application-top",
   "version": "1.0.0-alpha.13",
   "private": true,
+  "workspaces": {
+    "nohoist": [
+      "@jupyterlab/vega*-extension/vega*/**"
+    ]
+  },
   "scripts": {
     "build": "webpack",
     "build:prod": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.prod.config.js",
@@ -63,6 +68,7 @@
     "@jupyterlab/tooltip": "^1.0.0-alpha.12",
     "@jupyterlab/tooltip-extension": "^1.0.0-alpha.12",
     "@jupyterlab/vdom-extension": "^1.0.0-alpha.12",
+    "@jupyterlab/vega4-extension": "^1.0.0-alpha.12",
     "@jupyterlab/vega5-extension": "^1.0.0-alpha.12",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/application": "^1.6.3",
@@ -153,6 +159,7 @@
       "@jupyterlab/javascript-extension": "",
       "@jupyterlab/json-extension": "",
       "@jupyterlab/pdf-extension": "",
+      "@jupyterlab/vega4-extension": "",
       "@jupyterlab/vega5-extension": ""
     },
     "name": "JupyterLab",
@@ -246,6 +253,7 @@
       "@jupyterlab/theme-light-extension": "../packages/theme-light-extension",
       "@jupyterlab/tooltip-extension": "../packages/tooltip-extension",
       "@jupyterlab/vdom-extension": "../packages/vdom-extension",
+      "@jupyterlab/vega4-extension": "../packages/vega4-extension",
       "@jupyterlab/vega5-extension": "../packages/vega5-extension"
     }
   }

dev_mode/webpack.config.js

@@ -10,6 +10,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var webpack = require('webpack');
 var DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 var Visualizer = require('webpack-visualizer-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 var Build = require('@jupyterlab/buildutils').Build;
 var package_data = require('./package.json');
@@ -125,7 +126,10 @@ const plugins = [
     title: jlab.name || 'JupyterLab'
   }),
   new webpack.HashedModuleIdsPlugin(),
-  new JupyterFrontEndPlugin({})
+  new JupyterFrontEndPlugin({}),
+  new MiniCssExtractPlugin({
+    filename: '[name].[chunkhash].css'
+  })
 ];
 
 if (process.argv.includes('--analyze')) {
@@ -145,12 +149,24 @@ module.exports = [
     },
     optimization: {
       splitChunks: {
-        chunks: 'all'
+        chunks: 'all',
+        // Put all CSS in one chunk, otherwise we get some out of order issues
+        cacheGroups: {
+          styles: {
+            name: 'styles',
+            test: /\.css$/,
+            chunks: 'all',
+            enforce: true
+          }
+        }
       }
     },
     module: {
       rules: [
-        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, 'css-loader']
+        },
         { test: /\.md$/, use: 'raw-loader' },
         { test: /\.txt$/, use: 'raw-loader' },
         {

jupyterlab/staging/package.json

@@ -2,6 +2,11 @@
   "name": "@jupyterlab/application-top",
   "version": "1.0.0-alpha.13",
   "private": true,
+  "workspaces": {
+    "nohoist": [
+      "@jupyterlab/vega*-extension/vega*/**"
+    ]
+  },
   "scripts": {
     "build": "webpack",
     "build:prod": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.prod.config.js",

jupyterlab/staging/webpack.config.js

@@ -10,6 +10,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var webpack = require('webpack');
 var DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 var Visualizer = require('webpack-visualizer-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 var Build = require('@jupyterlab/buildutils').Build;
 var package_data = require('./package.json');
@@ -125,7 +126,11 @@ const plugins = [
     title: jlab.name || 'JupyterLab'
   }),
   new webpack.HashedModuleIdsPlugin(),
-  new JupyterFrontEndPlugin({})
+  new JupyterFrontEndPlugin({}),
+  new MiniCssExtractPlugin({
+    filename: '[name].css',
+    chunkFilename: '[id].css'
+  })
 ];
 
 if (process.argv.includes('--analyze')) {
@@ -145,12 +150,21 @@ module.exports = [
     },
     optimization: {
       splitChunks: {
-        chunks: 'all'
+        chunks: 'all',
+        // Put all CSS in one chunk, otherwise we get some out of order issues
+        cacheGroups: {
+          styles: {
+            name: 'styles',
+            test: /\.css$/,
+            chunks: 'all',
+            enforce: true
+          }
+        }
       }
     },
     module: {
       rules: [
-        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+        { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
         { test: /\.md$/, use: 'raw-loader' },
         { test: /\.txt$/, use: 'raw-loader' },
         {

package.json

@@ -1,20 +1,25 @@
 {
   "private": true,
-  "workspaces": [
-    "dev_mode",
-    "examples/*",
-    "packages/*",
-    "packages/services/examples/node",
-    "packages/services/examples/browser",
-    "packages/services/examples/typescript-browser-with-output",
-    "buildutils",
-    "buildutils/template",
-    "buildutils/test-template",
-    "tests",
-    "tests/test-*",
-    "testutils",
-    "jupyterlab/tests/mock_packages/extension"
-  ],
+  "workspaces": {
+    "packages": [
+      "dev_mode",
+      "examples/*",
+      "packages/*",
+      "packages/services/examples/node",
+      "packages/services/examples/browser",
+      "packages/services/examples/typescript-browser-with-output",
+      "buildutils",
+      "buildutils/template",
+      "buildutils/test-template",
+      "tests",
+      "tests/test-*",
+      "testutils",
+      "jupyterlab/tests/mock_packages/extension"
+    ],
+    "nohoist": [
+      "@jupyterlab/vega*-extension/vega*/**"
+    ]
+  },
   "scripts": {
     "add:sibling": "node buildutils/lib/add-sibling.js",
     "analyze": "jlpm run analyze:dev",

packages/metapackage/package.json

@@ -103,6 +103,7 @@
     "@jupyterlab/ui-components": "^1.0.0-alpha.12",
     "@jupyterlab/vdom": "^1.0.0-alpha.12",
     "@jupyterlab/vdom-extension": "^1.0.0-alpha.12",
+    "@jupyterlab/vega4-extension": "^1.0.0-alpha.12",
     "@jupyterlab/vega5-extension": "^1.0.0-alpha.12"
   },
   "devDependencies": {

packages/metapackage/src/index.ts

@@ -65,4 +65,5 @@ import '@jupyterlab/tooltip';
 import '@jupyterlab/tooltip-extension';
 import '@jupyterlab/ui-components';
 import '@jupyterlab/vdom-extension';
+import '@jupyterlab/vega4-extension';
 import '@jupyterlab/vega5-extension';

packages/metapackage/tsconfig.json

@@ -219,6 +219,9 @@
     {
       "path": "../vdom-extension"
     },
+    {
+      "path": "../vega4-extension"
+    },
     {
       "path": "../vega5-extension"
     }