refactor: add linting (#51)

.github/workflows/build.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - master
     tags:
-     - 'v*'
+      - "v*"
   pull_request:
   workflow_dispatch:
 
@@ -52,7 +52,6 @@ jobs:
             ./dist
             ./*.tgz
 
-
   test:
     needs: [build]
     runs-on: ubuntu-20.04

.github/workflows/code-quality.yml

@@ -0,0 +1,24 @@
+name: code-quality
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  pre-commit:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: 3.7
+      - name: Install dependencies
+        run: |
+          pip install ".[dev]"
+          pre-commit install
+      - name: run pre-commit
+        run: |
+          pre-commit run --all-files

.github/workflows/deploy.yml

@@ -6,7 +6,7 @@ on:
       - master
   pull_request:
     branches:
-      - '*'
+      - "*"
 
 jobs:
   build:
@@ -17,7 +17,7 @@ jobs:
       - name: Setup Python
         uses: actions/setup-python@v4
         with:
-          python-version: '3.10'
+          python-version: "3.10"
       - name: Install the dependencies
         run: |
           python -m pip install -r .jupyterlite/requirements.txt

.pre-commit-config.yaml

@@ -0,0 +1,13 @@
+repos:
+  - repo: "https://github.com/pre-commit/mirrors-prettier"
+    rev: "v3.1.0"
+    hooks:
+      - id: prettier
+        stages: [commit]
+  - repo: https://github.com/charliermarsh/ruff-pre-commit
+    rev: "v0.1.9"
+    hooks:
+      - id: ruff
+        stages: [commit]
+      - id: ruff-format
+        stages: [commit]

README.md

@@ -1,22 +1,17 @@
-
 # ipyreact
 
-
-
 React for ipywidgets that just works. No webpack, no npm, no hassle. Just write jsx, tsx and python.
 
 Build on top of [AnyWidget](https://anywidget.dev/).
 
 ## Tutorial
 
- This tutorial will walk you through the steps of building a complete ipywidget with react. 
+This tutorial will walk you through the steps of building a complete ipywidget with react.
 
 [![JupyterLight](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://widgetti.github.io/ipyreact/lab/?path=full_tutorial.ipynb)
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/widgetti/ipyreact/HEAD?labpath=examples%2Ffull_tutorial.ipynb)
 
-
-
- Just click the JupyterLite or Binder link to start the interactive walkthrough.
+Just click the JupyterLite or Binder link to start the interactive walkthrough.
 
 ## Goal
 
@@ -45,7 +40,6 @@ ConfettiWidget()
 
 ![initial-30-fps-compressed](https://user-images.githubusercontent.com/1765949/233469170-c659b670-07f5-4666-a201-80dea01ebabe.gif)
 
-
 ### Hot reloading
 
 Create a tsx file:
@@ -55,14 +49,17 @@ Create a tsx file:
 import confetti from "canvas-confetti";
 import * as React from "react";
 
-export default function({value, set_value, debug}) {
-    return <button onClick={() => confetti() && set_value(value + 1)}>
-        {value || 0} times confetti
+export default function ({ value, set_value, debug }) {
+  return (
+    <button onClick={() => confetti() && set_value(value + 1)}>
+      {value || 0} times confetti
     </button>
-};
+  );
+}
 ```
 
 And use it in your python code:
+
 ```python
 import ipyreact
 import pathlib
@@ -81,11 +78,13 @@ Now edit, save, and see the changes in your browser/notebook.
 ### IPython magic
 
 First load the ipyreact extension:
+
 ```python
 %load_ext ipyreact
 ```
 
 Then use the `%%react` magic to directly write jsx/tsx in your notebook:
+
 ```tsx
 %%react
 import confetti from "canvas-confetti";
@@ -102,8 +101,6 @@ Access the underlying widget with the name `_last_react_widget` (e.g. `_last_rea
 
 ![magic-optimized](https://user-images.githubusercontent.com/1765949/233471041-62e807d6-c16d-4fc5-af5d-13c0acb2c677.gif)
 
-
-
 ## Installation
 
 You can install using `pip`:
@@ -113,15 +110,16 @@ pip install ipyreact
 ```
 
 ## Usage
+
 ## Facts
 
- * The ReactWidget has an `value` trait, which is a `traitlets.Any` trait. Use this to pass data to your react component, or to get data back from your react component.
- * All traits are added as props to your react component (e.g. `{value, ...}` in th example above.
- * For every trait `ipyreact` automatically provides a `set_<traitname>` callback, which you can use to set the trait value from your react component (e.g. `set_value` in the example above). (*Note: we used `on_value` before, this is now deprecated*)
- * Your code gets transpiled using [sucrase](https://github.com/alangpierce/sucrase) in the frontend, no bundler needed.
- * Your code should be written in ES modules.
- * Set `debug=True` to get more debug information in the browser console (also accessible in the props).
- * Make sure you export a default function from your module (e.g. `export default function MyComponent() { ... }`). This is the component that will be rendered.
+- The ReactWidget has an `value` trait, which is a `traitlets.Any` trait. Use this to pass data to your react component, or to get data back from your react component.
+- All traits are added as props to your react component (e.g. `{value, ...}` in th example above.
+- For every trait `ipyreact` automatically provides a `set_<traitname>` callback, which you can use to set the trait value from your react component (e.g. `set_value` in the example above). (_Note: we used `on_value` before, this is now deprecated_)
+- Your code gets transpiled using [sucrase](https://github.com/alangpierce/sucrase) in the frontend, no bundler needed.
+- Your code should be written in ES modules.
+- Set `debug=True` to get more debug information in the browser console (also accessible in the props).
+- Make sure you export a default function from your module (e.g. `export default function MyComponent() { ... }`). This is the component that will be rendered.
 
 ### Import maps
 
@@ -141,38 +139,45 @@ _import_map = {
 }
 ```
 
-Which means we can copy paste *most* of the examples from [mui](https://mui.com/)
+Which means we can copy paste _most_ of the examples from [mui](https://mui.com/)
 
 ```tsx
 %%react -n my_widget -d
-import Button from '@mui/material/Button';
+import Button from "@mui/material/Button";
 import confetti from "canvas-confetti";
 import * as React from "react";
 
-export default function({value, set_value, debug}) {
-    if(debug) {
-        console.log("value=", value, set_value);
-    }
-    return <Button variant="contained" onClick={() => confetti() && set_value(value + 1)}>
-        {value || 0} times confetti
+export default function({ value, set_value, debug }) {
+  if(debug) {
+    console.log("value=", value, set_value);
+  }
+  return (
+    <Button
+      variant="contained"
+      onClick={() => confetti() && set_value(value + 1)}
+    >
+      {value || 0} times confetti
     </Button>
-};
+  );
+}
 ```
 
 We add the https://github.com/guybedford/es-module-shims shim to the browser page for the import maps functionality.
 
-
 ## Development Installation
 
 Create a dev environment:
+
 ```bash
 conda create -n ipyreact-dev -c conda-forge nodejs yarn python jupyterlab
 conda activate ipyreact-dev
 ```
 
 Install the python. This will also build the TS package.
+
 ```bash
-pip install -e ".[test, examples]"
+pip install -e ".[test, examples, dev]"
+pre-commit install
 ```
 
 When developing your extensions, you need to manually enable your extensions with the
@@ -196,7 +201,9 @@ 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.
 
@@ -210,5 +217,5 @@ 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.
 
+If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.

babel.config.js

@@ -1,11 +1,11 @@
 module.exports = {
-  sourceMap: 'inline',
+  sourceMap: "inline",
   presets: [
     [
-      '@babel/preset-env',
+      "@babel/preset-env",
       {
         targets: {
-          node: 'current',
+          node: "current",
         },
       },
     ],

docs/environment.yml

@@ -1,4 +1,3 @@
-
 name: ipyreact_docs
 channels:
   - conda-forge

docs/source/_static/helper.js

@@ -1,5 +1,5 @@
 var cache_require = window.require;
 
-window.addEventListener('load', function() {
+window.addEventListener("load", function () {
   window.require = cache_require;
 });