Merge pull request #90 from ianhi/jlab-3

Update for Jlab 3

Author: jtpio

.github/workflows/build.yml

@@ -56,7 +56,7 @@ jobs:
         cookiecutter . --config-file tests/testconfig.yaml --no-input
         pushd jupyter-widget-testwidgets
         python -m pip install --upgrade -v -e ".[test, examples, docs]"
-        npm run lint:check
+        yarn run lint:check
 
         # TODO: re-enable tests
         # pytest
@@ -74,11 +74,14 @@ jobs:
         pip uninstall -y jupyter_widget_testwidgets
         cd jupyter-widget-testwidgets
         pip install .
-        jupyter nbextension enable --py --sys-prefix jupyter_widget_testwidgets
+
         # Validate nbextension (enable does not use exit code):
+        jupyter nbextension enable --py --sys-prefix jupyter_widget_testwidgets
         python -c "from notebook.nbextensions import validate_nbextension; import sys; sys.exit(validate_nbextension('jupyter_widget_testwidgets/extension') or 0)"
-        pip install jupyterlab
+
+        # Validate labextension
+        pip install -U jupyterlab~=3.0 jupyter_packaging~=0.7
         # 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.
+        jupyter labextension develop . --overwrite

README.md

@@ -39,6 +39,14 @@ After this, you will have a directory containing files used for creating a
 custom Jupyter widget. To check that eveything is set up as it should be,
 you should run the tests:
 
+Create a dev environment:
+```bash
+conda create -n {{ cookiecutter.python_package_name }}-dev -c conda-forge nodejs yarn python jupyterlab
+conda activate {{ cookiecutter.python_package_name }}-dev
+```
+
+Install the python. This will also build the TS package.
+
 ```bash
 # First install the python package. This will also build the JS packages.
 pip install -e ".[test, examples]"
@@ -47,15 +55,15 @@ pip install -e ".[test, examples]"
 py.test
 
 # Run the JS tests. This should again, only give TODO errors (Expected 'Value' to equal 'Expected value'):
-npm test
+yarn test
 ```
 
 When developing your extensions, you need to manually enable your extensions with the
 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 .
+yarn run build
 ```
 
 For classic notebook, you can run:
@@ -71,6 +79,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
+yarn 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}}/.github/workflows/build.yml

@@ -49,9 +49,9 @@ jobs:
     - name: Test the extension
       run: |
         python -m pip install --upgrade -v -e ".[test, examples, docs]"
-        npm run lint:check
+        yarn run lint:check
         pytest
-        npm run test:ci
+        yarn run test:ci
     - name: Check docs can be build + links
       run: |
         pushd docs

{{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,39 +12,37 @@
 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
 
+Create a dev environment:
+```bash
+conda create -n {{ cookiecutter.python_package_name }}-dev -c conda-forge nodejs yarn python jupyterlab
+conda activate {{ cookiecutter.python_package_name }}-dev
+```
 
+Install the python. This will also build the TS package.
 ```bash
-# First install the python package. This will also build the JS packages.
 pip install -e ".[test, examples]"
 ```
 
 When developing your extensions, you need to manually enable your extensions with the
 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 .
+yarn 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 +56,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
-npm run watch
+# Watch the source directory in one terminal, automatically rebuilding when needed
+yarn 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,19 +29,20 @@
     "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": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension:dev",
+    "build:prod": "yarn run build:lib && yarn run build:nbextension && yarn 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": "yarn run clean:lib && yarn run clean:nbextension && yarn 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",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "lint:check": "eslint . --ext .ts,.tsx",
-    "prepack": "npm run build:lib",
-    "test": "npm run test:firefox",
+    "prepack": "yarn run build:lib",
+    "test": "yarn run test:firefox",
     "test:chrome": "karma start --browsers=Chrome tests/karma.conf.js",
     "test:debug": "karma start --browsers=Chrome --singleRun=false --debug=true tests/karma.conf.js",
     "test:firefox": "karma start --browsers=Firefox tests/karma.conf.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.python_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',
     ],