Update for Jlab 3

.github/workflows/build.yml

@@ -80,5 +80,6 @@ jobs:
         pip install jupyterlab
         # Make sure our lab extension was installed.
         jupyter labextension list 2>&1 | grep -ie "jupyter-widget-testwidgets.*OK"
-        # Make sure our lab extension can be linked.
-        jupyter labextension link
+        # Make sure our lab extension can be develop installed.
+        pip install jupyter_packaging==0.7.9
+        jupyter labextension develop . --overwrite

README.md

@@ -54,8 +54,8 @@ When developing your extensions, you need to manually enable your extensions wit
 notebook / lab frontend. For lab, this is done by the command:
 
 ```
-jupyter labextension install @jupyter-widgets/jupyterlab-manager --no-build
-jupyter labextension install .
+jupyter labextension develop --overwrite .
+npm run build
 ```
 
 For classic notebook, you can run:
@@ -71,6 +71,23 @@ you might also need another flag instead of `--sys-prefix`, but we won't cover t
 of those flags here.
 
 
+### How to see your changes
+#### Typescript:
+If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
+terminals to watch for changes in the extension's source and automatically rebuild the widget.
+
+```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
+npm run watch
+# Run JupyterLab in another terminal
+jupyter lab
+```
+
+After a change wait for the build to finish and then refresh your browser and the changes should take effect.
+
+#### Python:
+If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
+
 ## Releasing your initial packages:
 
 - Add tests

{{cookiecutter.github_project_name}}/.gitignore

@@ -145,7 +145,7 @@ $RECYCLE.BIN/
 # ----
 
 **/node_modules/
-{{ cookiecutter.python_package_name  }}/nbextension/static/index.*
+{{ cookiecutter.python_package_name  }}/nbextension/index.*
 {{ cookiecutter.python_package_name  }}/labextension/*.tgz
 
 # Coverage data

{{cookiecutter.github_project_name}}/README.md

@@ -12,20 +12,13 @@
 You can install using `pip`:
 
 ```bash
-pip install {{ cookiecutter.python_package_name  }}
-```
-
-Or if you use jupyterlab:
-
-```bash
-pip install {{ cookiecutter.python_package_name  }}
-jupyter labextension install @jupyter-widgets/jupyterlab-manager
+pip install {{ cookiecutter.python_package_name }}
 ```
 
 If you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
 the nbextension:
 ```bash
-jupyter nbextension enable --py [--sys-prefix|--user|--system] {{ cookiecutter.python_package_name  }}
+jupyter nbextension enable --py [--sys-prefix|--user|--system] {{ cookiecutter.python_package_name }}
 ```
 
 ## Development Installation
@@ -40,11 +33,11 @@ When developing your extensions, you need to manually enable your extensions wit
 notebook / lab frontend. For lab, this is done by the command:
 
 ```
-jupyter labextension install @jupyter-widgets/jupyterlab-manager --no-build
-jupyter labextension install .
+jupyter labextension develop --overwrite .
+npm run build
 ```
 
-For classic notebook, you can run:
+For classic notebook, you need to run:
 
 ```
 jupyter nbextension install --sys-prefix --symlink --overwrite --py {{ cookiecutter.python_package_name  }}
@@ -58,13 +51,14 @@ of those flags here.
 
 ### How to see your changes
 #### Typescript:
-To continuously monitor the project for changes and automatically trigger a rebuild, start Jupyter in watch mode:
-```bash
-jupyter lab --watch
-```
-And in a separate session, begin watching the source directory for changes:
+If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
+terminals to watch for changes in the extension's source and automatically rebuild the widget.
+
 ```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
 npm run watch
+# Run JupyterLab in another terminal
+jupyter lab
 ```
 
 After a change wait for the build to finish and then refresh your browser and the changes should take effect.

{{cookiecutter.github_project_name}}/install.json

@@ -0,0 +1,5 @@
+{
+  "packageManager": "python",
+  "packageName": "{{ cookiecutter.python_package_name }}",
+  "uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package {{ cookiecutter.python_package_name }}"
+}

{{cookiecutter.github_project_name}}/package.json

@@ -29,12 +29,13 @@
     "url": "https://github.com/{{ cookiecutter.github_organization_name }}/{{ cookiecutter.github_project_name }}"
   },
   "scripts": {
-    "build": "npm run build:lib && npm run build:nbextension",
-    "build:labextension": "npm run clean:labextension && mkdirp {{ cookiecutter.python_package_name }}/labextension && cd {{ cookiecutter.python_package_name }}/labextension && npm pack ../..",
+    "build": "npm run build:lib && npm run build:nbextension && npm run build:labextension:dev",
+    "build:prod": "npm run build:lib && npm run build:nbextension && npm run build:labextension",
+    "build:labextension": "jupyter labextension build .",
+    "build:labextension:dev": "jupyter labextension build --development True .",
     "build:lib": "tsc",
-    "build:nbextension": "webpack -p",
-    "build:all": "npm run build:labextension && npm run build:nbextension",
-    "clean": "npm run clean:lib && npm run clean:nbextension",
+    "build:nbextension": "webpack",
+    "clean": "npm run clean:lib && npm run clean:nbextension && npm run clean:labextension",
     "clean:lib": "rimraf lib",
     "clean:labextension": "rimraf {{ cookiecutter.python_package_name }}/labextension",
     "clean:nbextension": "rimraf {{ cookiecutter.python_package_name }}/nbextension/static/index.js",
@@ -51,9 +52,10 @@
     "watch:nbextension": "webpack --watch"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3"
+    "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4"
   },
   "devDependencies": {
+    "@jupyterlab/builder": "^3.0.0",
     "@phosphor/application": "^1.6.0",
     "@phosphor/widgets": "^1.6.0",
     "@types/expect.js": "^0.3.29",
@@ -85,11 +87,18 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.0",
     "ts-loader": "^5.2.1",
-    "typescript": "~3.8",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2"
+    "typescript": "~4.1.3",
+    "webpack": "^5",
+    "webpack-cli": "^4"
   },
   "jupyterlab": {
-    "extension": "lib/plugin"
+    "extension": "lib/plugin",
+    "outputDir": "{{ cookiecutter.python_package_name }}/labextension/",
+    "sharedPackages": {
+      "@jupyter-widgets/base": {
+        "bundled": false,
+        "singleton": true
+      }
+    }
   }
 }

{{cookiecutter.github_project_name}}/pyproject.toml

@@ -0,0 +1,3 @@
+[build-system]
+requires = ["jupyter_packaging==0.7.9", "jupyterlab==3.*", "setuptools>=40.8.0", "wheel"]
+build-backend = "setuptools.build_meta"

{{cookiecutter.github_project_name}}/setup.py

@@ -6,55 +6,58 @@
 
 from __future__ import print_function
 from glob import glob
+import os
 from os.path import join as pjoin
+from setuptools import setup, find_packages
 
 
-from setupbase import (
-    create_cmdclass, install_npm, ensure_targets,
-    find_packages, combine_commands, ensure_python,
-    get_version, HERE
+from jupyter_packaging import (
+    create_cmdclass,
+    install_npm,
+    ensure_targets,
+    combine_commands,
+    get_version,
 )
 
-from setuptools import setup
+HERE = os.path.dirname(os.path.abspath(__file__))
+
+
 
 
 # The name of the project
 name = '{{ cookiecutter.python_package_name }}'
 
-# Ensure a valid python version
-ensure_python('>=3.4')
-
-# Get our version
+# Get the version
 version = get_version(pjoin(name, '_version.py'))
 
-nb_path = pjoin(HERE, name, 'nbextension', 'static')
-lab_path = pjoin(HERE, name, 'labextension')
 
 # Representative files that should exist after a successful build
 jstargets = [
-    pjoin(nb_path, 'index.js'),
+    pjoin(HERE, name, 'nbextension', 'index.js'),
     pjoin(HERE, 'lib', 'plugin.js'),
 ]
 
+
 package_data_spec = {
     name: [
-        'nbextension/static/*.*js*',
-        'labextension/*.tgz'
+        'nbextension/**js*',
+        'labextension/**'
     ]
 }
 
+
 data_files_spec = [
-    ('share/jupyter/nbextensions/{{ cookiecutter.python_package_name}}',
-        nb_path, '*.js*'),
-    ('share/jupyter/lab/extensions', lab_path, '*.tgz'),
-    ('etc/jupyter/nbconfig/notebook.d' , HERE, '{{ cookiecutter.python_package_name}}.json')
+    ('share/jupyter/nbextensions/{{ cookiecutter.npm_package_name }}', '{{ cookiecutter.python_package_name }}/nbextension', '**'),
+    ('share/jupyter/labextensions/{{ cookiecutter.npm_package_name }}', '{{ cookiecutter.python_package_name }}/labextension', '**'),
+    ('share/jupyter/labextensions/{{ cookiecutter.npm_package_name }}', '.', 'install.json'),
+    ('etc/jupyter/nbconfig/notebook.d', '.', '{{ cookiecutter.npm_package_name }}.json'),
 ]
 
 
 cmdclass = create_cmdclass('jsdeps', package_data_spec=package_data_spec,
     data_files_spec=data_files_spec)
 cmdclass['jsdeps'] = combine_commands(
-    install_npm(HERE, build_cmd='build:all'),
+    install_npm(HERE, build_cmd='build:prod'),
     ensure_targets(jstargets),
 )
 
@@ -85,6 +88,7 @@
         'Framework :: Jupyter',
     ],
     include_package_data = True,
+    python_requires=">=3.6",
     install_requires = [
         'ipywidgets>=7.0.0',
     ],