Update tests for standalone

visgl · Nov 1, 2019 · 7027583 · 7027583
1 parent 2abdb2d
commit 7027583
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 71 deletions.
diff --git a/modules/jupyter-widget/src/index.js b/modules/jupyter-widget/src/index.js
@@ -16,10 +16,7 @@ if (dataBaseUrl) {
   window.__webpack_public_path__ = `${dataBaseUrl}nbextensions/pydeck/nb_extension`;
 }
 
-const widget = dataBaseUrl ? require('./widget') : {};
-const [DeckGLModel, DeckGLView] = [widget.DeckGLModel, widget.DeckGLView];
-
 export {MODULE_VERSION, MODULE_NAME} from './version';
-export {DeckGLModel, DeckGLView};
+export {DeckGLModel, DeckGLView} from './widget';
 export {createDeck} from './utils';
 export {fetchDependencies} from './fetch-dependencies';
diff --git a/modules/jupyter-widget/src/index.standalone.js b/modules/jupyter-widget/src/index.standalone.js
@@ -0,0 +1,18 @@
+import {MODULE_VERSION, MODULE_NAME} from './version';
+import {createDeck} from './utils';
+import {fetchDependencies} from './fetch-dependencies';
+
+const deckglwidget = {
+  MODULE_VERSION,
+  MODULE_NAME,
+  createDeck,
+  fetchDependencies
+};
+
+/* global window, global */
+const _global = typeof window === 'undefined' ? global : window;
+_global.deckglwidget = {};
+
+Object.assign(_global.deckglwidget, deckglwidget);
+
+module.exports = _global.deck;
diff --git a/modules/jupyter-widget/webpack.config.js b/modules/jupyter-widget/webpack.config.js
@@ -4,74 +4,100 @@ const path = require('path');
 const packageVersion = require('./package.json').version;
 const webpack = require('webpack');
 
-const config = {
-  /**
-   * Embeddable @deck.gl/jupyter-widget bundle
-   *
-   * This bundle is almost identical to the notebook extension bundle. The only
-   * difference is in the configuration of the webpack public path for the
-   * static assets.
-   *
-   * The target bundle is always `dist/index.js`, which is the path required by
-   * the custom widget embedder.
-   */
-  entry: './src/index.js',
-  output: {
-    filename: 'index.js',
-    path: path.resolve(__dirname, 'dist'),
-    libraryTarget: 'amd'
-  },
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        // Compile ES2015 using babel
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: /src/,
-        options: {
-          presets: [['@babel/preset-env', {forceAllTransforms: true}]],
-          // all of the helpers will reference the module @babel/runtime to avoid duplication
-          // across the compiled output.
-          plugins: [
-            '@babel/transform-runtime',
-            'inline-webgl-constants',
-            ['remove-glsl-comments', {patterns: ['**/*.glsl.js']}]
-          ]
-        }
-      }
+const rules = [
+  {
+    // Compile ES2015 using babel
+    test: /\.js$/,
+    loader: 'babel-loader',
+    include: /src/,
+    options: {
+      presets: [['@babel/preset-env', {forceAllTransforms: true}]],
+      // all of the helpers will reference the module @babel/runtime to avoid duplication
+      // across the compiled output.
+      plugins: [
+        '@babel/transform-runtime',
+        'inline-webgl-constants',
+        ['remove-glsl-comments', {patterns: ['**/*.glsl.js']}]
+      ]
+    }
+  }
+];
+
+const externals = [
+  '@jupyter-widgets/base',
+  'deck.gl',
+  'mapbox-gl',
+  'h3',
+  's2Geometry',
+  'loaders.gl/csv'
+];
+
+const config = [
+  {
+    /**
+     * Embeddable @deck.gl/jupyter-widget bundle
+     *
+     * This bundle is almost identical to the notebook extension bundle. The only
+     * difference is in the configuration of the webpack public path for the
+     * static assets.
+     *
+     * The target bundle is always `dist/index.js`, which is the path required by
+     * the custom widget embedder.
+     */
+    entry: './src/index.js',
+    output: {
+      filename: 'index.js',
+      path: path.resolve(__dirname, 'dist'),
+      libraryTarget: 'amd'
+    },
+    devtool: 'source-map',
+    module: {
+      rules
+    },
+    // Packages that shouldn't be bundled but loaded at runtime
+    externals,
+    plugins: [
+      // Uncomment for bundle size debug
+      // new (require('webpack-bundle-analyzer')).BundleAnalyzerPlugin()
     ]
   },
-  // Packages that shouldn't be bundled but loaded at runtime
-  externals: [
-    '@jupyter-widgets/base',
-    'deck.gl',
-    'mapbox-gl',
-    'h3',
-    's2Geometry',
-    'loaders.gl/csv'
-  ],
-  plugins: [
-    // Uncomment for bundle size debug
-    // new (require('webpack-bundle-analyzer')).BundleAnalyzerPlugin()
-  ]
-};
-
-module.exports = env => {
-  if (env && env.dev) {
-    config.mode = 'development';
-    config.devServer = {
-      contentBase: path.join(__dirname, 'dist')
-    };
-  } else {
-    config.mode = 'production';
+  /**
+   * Embeddable bundle exclusively with the standalone version of @deck.gl/jupyter-widget,
+   * which removes the Jupyter-specific libraries (e.g., @jupyter-widget/base) from the tool
+   */
+  {
+    entry: './src/index.standalone.js',
+    output: {
+      filename: 'index.standalone.js',
+      path: path.resolve(__dirname, 'dist'),
+      libraryTarget: 'umd'
+    },
+    devtool: 'source-map',
+    externals,
+    name: 'deckwidget',
+    module: {
+      rules
+    },
+    plugins: []
   }
+];
 
-  config.plugins.push(
-    new webpack.DefinePlugin({
-      __VERSION__: JSON.stringify(packageVersion)
-    })
-  );
+module.exports = env => {
+  for (const c of config) {
+    if (env && env.dev) {
+      c.mode = 'development';
+      c.devServer = {
+        contentBase: path.join(__dirname, 'dist')
+      };
+    } else {
+      c.mode = 'production';
+    }
 
+    c.plugins.push(
+      new webpack.DefinePlugin({
+        __VERSION__: JSON.stringify(packageVersion)
+      })
+    );
+  }
   return config;
 };
diff --git a/test/render/jupyter-widget-test.html b/test/render/jupyter-widget-test.html
@@ -13,11 +13,12 @@
   <script type="text/javascript" src='/node_modules/s2-geometry/src/s2geometry.js'></script>
   <script type="text/javascript" src='/node_modules/@loaders.gl/csv/dist/dist.min.js'></script>
   <script type="text/javascript" src='/modules/main/dist.min.js'></script>
-  <script type="text/javascript" src='/modules/jupyter-widget/dist/index.js'></script>
+  <script type="text/javascript" src='/modules/jupyter-widget/dist/index.standalone.js'></script>
   <script type="text/javascript">
+
 function render(jsonInput) {
-  createDeck({
-    dependencies: 
+  deckglwidget.createDeck({
+    dependencies: {deck, mapboxgl, loaders},
     mapboxApiKey: 'NO_API_KEY', 
     container: document.getElementById('app'),
     jsonInput,