Simplify app example.

We could do more automation by, for example, templating the index.js using the extension list in package.json. However, I think it’s better to make the app example as simple as possible to understand, and leave automated templating to a more advanced example like the federated example.

examples/app/index.js

@@ -5,45 +5,48 @@ import { PageConfig } from '@jupyterlab/coreutils';
 // eslint-disable-next-line
 __webpack_public_path__ = PageConfig.getOption('fullStaticUrl') + '/';
 
-// This must be after the public path is set.
-// This cannot be extracted because the public path is dynamic.
-require('./build/style.js');
+// This must be after the public path is set so CSS assets can load properly.
+import('./build/style.js');
 
-window.addEventListener('load', async function () {
-  const JupyterLab = require('@jupyterlab/application').JupyterLab;
+// These imports should match the list of extensions in package.json (listed
+// separately there so the webpack config Build.ensureAssets step can copy
+// extension assets to the build directory). These import statements assume
+// the JupyterLab plugins are the default export from each package.
+const extensions = [
+  import('@jupyterlab/application-extension'),
+  import('@jupyterlab/apputils-extension'),
+  import('@jupyterlab/codemirror-extension'),
+  import('@jupyterlab/completer-extension'),
+  import('@jupyterlab/console-extension'),
+  import('@jupyterlab/csvviewer-extension'),
+  import('@jupyterlab/docmanager-extension'),
+  import('@jupyterlab/filebrowser-extension'),
+  import('@jupyterlab/fileeditor-extension'),
+  import('@jupyterlab/help-extension'),
+  import('@jupyterlab/imageviewer-extension'),
+  import('@jupyterlab/inspector-extension'),
+  import('@jupyterlab/launcher-extension'),
+  import('@jupyterlab/mainmenu-extension'),
+  import('@jupyterlab/markdownviewer-extension'),
+  import('@jupyterlab/mathjax2-extension'),
+  import('@jupyterlab/notebook-extension'),
+  import('@jupyterlab/rendermime-extension'),
+  import('@jupyterlab/running-extension'),
+  import('@jupyterlab/settingeditor-extension'),
+  import('@jupyterlab/shortcuts-extension'),
+  import('@jupyterlab/statusbar-extension'),
+  import('@jupyterlab/terminal-extension'),
+  import('@jupyterlab/theme-dark-extension'),
+  import('@jupyterlab/theme-light-extension'),
+  import('@jupyterlab/tooltip-extension'),
+  import('@jupyterlab/translation-extension'),
+  import('@jupyterlab/ui-components-extension')
+];
 
-  const mods = [
-    require('@jupyterlab/application-extension'),
-    require('@jupyterlab/apputils-extension'),
-    require('@jupyterlab/codemirror-extension'),
-    require('@jupyterlab/completer-extension'),
-    require('@jupyterlab/console-extension'),
-    require('@jupyterlab/csvviewer-extension'),
-    require('@jupyterlab/docmanager-extension'),
-    require('@jupyterlab/fileeditor-extension'),
-    require('@jupyterlab/filebrowser-extension'),
-    require('@jupyterlab/help-extension'),
-    require('@jupyterlab/imageviewer-extension'),
-    require('@jupyterlab/inspector-extension'),
-    require('@jupyterlab/launcher-extension'),
-    require('@jupyterlab/mainmenu-extension'),
-    require('@jupyterlab/markdownviewer-extension'),
-    require('@jupyterlab/mathjax2-extension'),
-    require('@jupyterlab/notebook-extension'),
-    require('@jupyterlab/rendermime-extension'),
-    require('@jupyterlab/running-extension'),
-    require('@jupyterlab/settingeditor-extension'),
-    require('@jupyterlab/shortcuts-extension'),
-    require('@jupyterlab/statusbar-extension'),
-    require('@jupyterlab/terminal-extension'),
-    require('@jupyterlab/theme-dark-extension'),
-    require('@jupyterlab/theme-light-extension'),
-    require('@jupyterlab/tooltip-extension'),
-    require('@jupyterlab/translation-extension'),
-    require('@jupyterlab/ui-components-extension')
-  ];
+window.addEventListener('load', async function () {
+  const JupyterLab = import('@jupyterlab/application').JupyterLab;
   const lab = new JupyterLab();
-  lab.registerPluginModules(mods);
+  lab.registerPluginModules(extensions);
   /* eslint-disable no-console */
   console.log('Starting app');
   await lab.start();

examples/app/package.json

@@ -62,35 +62,35 @@
     "whatwg-fetch": "^3.0.0"
   },
   "jupyterlab": {
-    "extensions": {
-      "@jupyterlab/application-extension": "",
-      "@jupyterlab/apputils-extension": "",
-      "@jupyterlab/codemirror-extension": "",
-      "@jupyterlab/completer-extension": "",
-      "@jupyterlab/console-extension": "",
-      "@jupyterlab/csvviewer-extension": "",
-      "@jupyterlab/docmanager-extension": "",
-      "@jupyterlab/filebrowser-extension": "",
-      "@jupyterlab/fileeditor-extension": "",
-      "@jupyterlab/help-extension": "",
-      "@jupyterlab/imageviewer-extension": "",
-      "@jupyterlab/inspector-extension": "",
-      "@jupyterlab/launcher-extension": "",
-      "@jupyterlab/mainmenu-extension": "",
-      "@jupyterlab/markdownviewer-extension": "",
-      "@jupyterlab/mathjax2-extension": "",
-      "@jupyterlab/notebook-extension": "",
-      "@jupyterlab/rendermime-extension": "",
-      "@jupyterlab/running-extension": "",
-      "@jupyterlab/settingeditor-extension": "",
-      "@jupyterlab/shortcuts-extension": "",
-      "@jupyterlab/statusbar-extension": "",
-      "@jupyterlab/terminal-extension": "^3.0.1",
-      "@jupyterlab/theme-dark-extension": "",
-      "@jupyterlab/theme-light-extension": "",
-      "@jupyterlab/tooltip-extension": "",
-      "@jupyterlab/translation-extension": "",
-      "@jupyterlab/ui-components-extension": ""
-    }
+    "extensions": [
+      "@jupyterlab/application-extension",
+      "@jupyterlab/apputils-extension",
+      "@jupyterlab/codemirror-extension",
+      "@jupyterlab/completer-extension",
+      "@jupyterlab/console-extension",
+      "@jupyterlab/csvviewer-extension",
+      "@jupyterlab/docmanager-extension",
+      "@jupyterlab/filebrowser-extension",
+      "@jupyterlab/fileeditor-extension",
+      "@jupyterlab/help-extension",
+      "@jupyterlab/imageviewer-extension",
+      "@jupyterlab/inspector-extension",
+      "@jupyterlab/launcher-extension",
+      "@jupyterlab/mainmenu-extension",
+      "@jupyterlab/markdownviewer-extension",
+      "@jupyterlab/mathjax2-extension",
+      "@jupyterlab/notebook-extension",
+      "@jupyterlab/rendermime-extension",
+      "@jupyterlab/running-extension",
+      "@jupyterlab/settingeditor-extension",
+      "@jupyterlab/shortcuts-extension",
+      "@jupyterlab/statusbar-extension",
+      "@jupyterlab/terminal-extension",
+      "@jupyterlab/theme-dark-extension",
+      "@jupyterlab/theme-light-extension",
+      "@jupyterlab/tooltip-extension",
+      "@jupyterlab/translation-extension",
+      "@jupyterlab/ui-components-extension"
+    ]
   }
 }

examples/app/webpack.config.js

@@ -4,27 +4,10 @@ const data = require('./package.json');
 const webpack = require('webpack');
 const Build = require('@jupyterlab/builder').Build;
 
-const jlab = data.jupyterlab;
-
-// Create a list of application extensions and mime extensions from
-// jlab.extensions
-const extensions = {};
-const mimeExtensions = {};
-
-for (const key of jlab.extensions) {
-  const {
-    jupyterlab: { extension, mimeExtension }
-  } = require(`${key}/package.json`);
-  if (extension !== undefined) {
-    extensions[key] = extension === true ? '' : extension;
-  }
-  if (mimeExtension !== undefined) {
-    mimeExtensions[key] = mimeExtension === true ? '' : mimeExtension;
-  }
-}
-
+// Generate webpack config to copy extension assets to the build directory,
+// such as setting schema files, theme assets, etc.
 const extensionAssetConfig = Build.ensureAssets({
-  packageNames: [...Object.keys(jlab.extensions ?? {}), ...Object.keys(jlab.mimeExtensions ?? {})],
+  packageNames: data.jupyterlab.extensions,
   output: './build'
 });
 
@@ -35,9 +18,6 @@ module.exports = [
       path: __dirname + '/build',
       filename: 'bundle.js'
     },
-    // node: {
-    //   fs: 'empty'
-    // },
     bail: true,
     devtool: 'source-map',
     mode: 'development',