Build against JupyterLab 4 (#336)

* Build against JupyterLab 4

* Update Playwright Snapshots

* Black notebooks

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: martinRenou

.github/workflows/main.yml

@@ -26,40 +26,37 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v2
 
-    - name: Setup conda
-      uses: conda-incubator/setup-miniconda@v2
+    - name: Install Conda environment with Micromamba
+      uses: mamba-org/provision-with-micromamba@main
       with:
-        activate-environment: ipycanvas-dev
+        environment-name: ipycanvas-dev
         environment-file: dev-environment.yml
-        python-version: ${{ matrix.python-version }}
-        mamba-version: "*"
-        auto-activate-base: false
         channels: conda-forge
+        extra-specs: |
+          python=${{ matrix.python-version }}
 
     - name: Test PEP8
       run: |
         black --check ipycanvas
+        black --check examples/*.ipynb
         blacken-docs docs/*.rst
 
-    - name: Test PEP8 on example notebooks
-      run: jupytext examples/*.ipynb --check 'black --check {}'
-
   build:
     runs-on: ubuntu-latest
     steps:
 
     - name: Checkout
       uses: actions/checkout@v2
 
-    - name: Setup conda
-      uses: conda-incubator/setup-miniconda@v2
+    - name: Install Conda environment with Micromamba
+      uses: mamba-org/provision-with-micromamba@main
       with:
-        activate-environment: ipycanvas-dev
+        environment-name: ipycanvas-dev
         environment-file: dev-environment.yml
-        python-version: ${{ matrix.python-version }}
-        mamba-version: "*"
-        auto-activate-base: false
         channels: conda-forge
+        extra-specs: |
+          python=${{ matrix.python-version }}
+
 
     - name: Build packages
       run: |
@@ -91,15 +88,14 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Setup conda
-        uses: conda-incubator/setup-miniconda@v2
+      - name: Install Conda environment with Micromamba
+        uses: mamba-org/provision-with-micromamba@main
         with:
-          activate-environment: ipycanvas-dev
+          environment-name: ipycanvas-dev
           environment-file: dev-environment.yml
-          python-version: ${{ matrix.python-version }}
-          mamba-version: "*"
-          auto-activate-base: false
           channels: conda-forge
+          extra-specs: |
+            python=${{ matrix.python-version }}
 
       - uses: actions/download-artifact@v2
         with:
@@ -131,31 +127,35 @@ jobs:
       - name: Validate the labextension
         run: jupyter labextension list 2>&1 | grep ipycanvas
 
-      - name: Install Galata
-        run: |
-          yarn install
-          yarn playwright install chromium
-        working-directory: ui-tests
-
-      - name: Launch JupyterLab
-        run: yarn run start:detached
+      - name: Install dependencies
+        shell: bash -l {0}
         working-directory: ui-tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: jlpm install
 
-      - name: Wait for JupyterLab
-        uses: ifaxity/wait-on-action@v1
+      - name: Set up browser cache
+        uses: actions/cache@v3
         with:
-          resource: http-get://localhost:8888/api
-          timeout: 20000
+          path: |
+            ${{ github.workspace }}/pw-browsers
+          key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
+
+      - name: Install browser
+        shell: bash -l {0}
+        run: npx playwright install chromium
+        working-directory: ui-tests
 
-      - name: Run UI Tests
-        run: yarn run test
+      - name: Execute integration tests
+        shell: bash -l {0}
         working-directory: ui-tests
+        run: npx playwright test
 
-      - name: Upload UI Test artifacts
+      - name: Upload Playwright Test report
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
-          name: ui-test-output
+          name: ipycanvas-playwright-tests
           path: |
-            ui-tests/playwright-report
             ui-tests/test-results
+            ui-tests/playwright-report

.github/workflows/release.yml

@@ -15,18 +15,17 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v2
 
-    - name: Setup conda
-      uses: conda-incubator/setup-miniconda@v2
+    - name: Install Conda environment with Micromamba
+      uses: mamba-org/provision-with-micromamba@main
       with:
-        activate-environment: ipycanvas-dev
+        environment-name: ipycanvas-dev
         environment-file: dev-environment.yml
-        python-version: ${{ matrix.python-version }}
-        mamba-version: "*"
-        auto-activate-base: false
         channels: conda-forge
+        extra-specs: |
+          python=${{ matrix.python-version }}
 
     - name: Build package
-      run: python setup.py sdist bdist_wheel
+      run: python -m build
 
     - name: Publish the Python package
       env:

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+enableImmutableInstalls: false

dev-environment.yml

@@ -4,14 +4,15 @@ channels:
 dependencies:
     - pip
     - build
-    - yarn
-    - nodejs=16
+    - yarn=3
     - jupyter-packaging
-    - jupyterlab=3
-    - ipywidgets>=7.6,<8
+    - notebook
+    - jupyterlab=4
+    - ipywidgets>=7.6,<9
     - setuptools
     - wheel
     - twine
     - jupytext
     - black
     - blacken-docs
+    - tokenize-rt

examples/Interaction during animation.ipynb

@@ -60,6 +60,7 @@
    "source": [
     "# Some useful functions that will be used in our animation loop:\n",
     "\n",
+    "\n",
     "# Draw the particles to the canvas\n",
     "def draw_particles():\n",
     "    with hold_canvas():\n",

examples/drag_and_drop_example.ipynb

@@ -30,7 +30,6 @@
     "        self.y = y_in\n",
     "\n",
     "    def draw(self):\n",
-    "\n",
     "        canvas.fill_style = \"#38a8a4\"\n",
     "        canvas.fill_rect(\n",
     "            self.x - (self.width * 0.5), self.y - (self.height), self.width, self.height\n",
@@ -56,7 +55,6 @@
     "            and y_in > y_coord\n",
     "            and y_in < (y_coord + self.height)\n",
     "        ):\n",
-    "\n",
     "            self.set_selected(True)\n",
     "            return True\n",
     "        else:\n",

package.json

@@ -52,14 +52,14 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^2.0.1 || ^3 || ^4 || ^5 || ^6",
+    "@lumino/application": "^1.6.0 || ^2",
+    "@lumino/widgets": "^1.6.0 || ^2",
     "buffer": "^4.9.2",
     "lodash": ">=4.17.13",
     "roughjs": "^4.3.1"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "^3.0.0",
-    "@lumino/application": "^1.6.0",
-    "@lumino/widgets": "^1.6.0",
+    "@jupyterlab/builder": "^4",
     "@types/node": "^10.11.6",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
@@ -75,7 +75,7 @@
     "rimraf": "^2.6.2",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^5.2.1",
-    "typescript": "~3.8",
+    "typescript": "^5",
     "webpack": "^5",
     "webpack-cli": "^4"
   },

pyproject.toml

@@ -1,7 +1,7 @@
 [build-system]
 requires = [
     "hatchling",
-    "jupyterlab==3.*",
+    "jupyterlab==4.*",
 ]
 build-backend = "hatchling.build"
 

src/widget.ts

@@ -1461,6 +1461,7 @@ export class CanvasView extends DOMWidgetView {
     return { x, y };
   }
 
+  // @ts-ignore: 2611
   get tagName(): string {
     return 'canvas';
   }

ui-tests/.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+enableImmutableInstalls: false