Merge pull request #314 from ianhi/ts

Convert frontend to typescript

Author: martinRenou

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+coverage
+**/*.d.ts
+tests
+ipympl/nbextension/extension.js

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+    sourceType: 'module',
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended'
+  ],
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/quotes': [
+      'error',
+      'single',
+      { avoidEscape: true, allowTemplateLiterals: false }
+    ],
+    curly: ['error', 'all'],
+    eqeqeq: 'error',
+    'prefer-arrow-callback': 'error'
+  },
+  ignorePatterns: ['.eslintrc.js']
+};

.github/workflows/main.yml

@@ -37,7 +37,9 @@ jobs:
         channels: conda-forge
 
     - name: Install ipympl
-      run: pip install -e .
+      run: |
+        python -m build
+        pip install dist/*.whl
 
     - name: Check installation files
       run: |
@@ -58,8 +60,7 @@ jobs:
     - name: Test flake8
       run: flake8 ipympl --ignore=E501,W504,W503
 
-    - name: Test JS linters
-      working-directory: js
+    - name: Test TS linters
       run: |
         npm run eslint:check
         npm run prettier:check
@@ -138,7 +139,7 @@ jobs:
 
       - name: Manually install labextension for lab2
         if: ${{ matrix.jlab_version }} == 2
-        run: jupyter labextension install js
+        run: jupyter labextension install .
 
       - name: Test installation files
         run: |

.github/workflows/mpl-latest.yml

@@ -30,12 +30,14 @@ jobs:
     - name: Install dependencies
       shell: bash -l {0}
       run: |
-        mamba install python=${{ matrix.python-version }} pip nodejs ipywidgets=7.6 jupyter jupyterlab=3 pillow numpy flake8 pytest nbval
+        mamba install python=${{ matrix.python-version }} pip nodejs ipywidgets=7.6 jupyter jupyterlab=3 pillow numpy flake8 pytest nbval yarn build
         pip install git+https://github.com/matplotlib/matplotlib.git
 
     - name: Install ipympl
       shell: bash -l {0}
-      run: pip install -e .
+      run: |
+        python -m build
+        pip install dist/*.whl
 
     - name: Check installation files
       shell: bash -l {0}

.gitignore

@@ -5,14 +5,33 @@ build/
 *.py[cod]
 node_modules/
 
-# Generated Javascript
-ipympl/nbextension/
-ipympl/labextension/
-ipympl/*.tgz
-js/*.tgz
-
 # OS X
 .DS_Store
 
 # vscode
 .vscode/
+
+lib/
+
+# NPM
+# ----
+
+**/node_modules/
+ipympl/nbextension/index.*
+ipympl/nbextension/package.json
+ipympl/labextension/*.tgz
+
+# Coverage data
+# -------------
+**/coverage/
+
+# Packed lab extensions
+ipympl/labextension
+
+# OS specific items
+.DS_Store
+
+# Sphinx documentation
+docs/_build/
+docs/source/_static/embed-bundle.js
+docs/source/_static/embed-bundle.js.map

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+**/node_modules
+**/lib
+**/package.json

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4
+}

MANIFEST.in

@@ -1,11 +1,35 @@
 recursive-include ipympl/nbextension *.*
 recursive-include ipympl/labextension *.*
 
-graft js/src
-include js/package.json
-include js/webpack.config.js
-include LICENSE
-include jupyter-matplotlib.json
-
 include setup.py
 include pyproject.toml
+
+include tsconfig.json
+include package.json
+include webpack.config.js
+include ipympl/labextension/*.tgz
+
+# Documentation
+graft docs
+exclude docs/\#*
+prune docs/build
+prune docs/gh-pages
+prune docs/dist
+
+# Examples
+graft examples
+
+# Javascript files
+graft ipympl/nbextension
+graft src
+graft css
+prune **/node_modules
+prune coverage
+prune lib
+
+# Patterns to exclude from any directory
+global-exclude *~
+global-exclude *.pyc
+global-exclude *.pyo
+global-exclude .git
+global-exclude .ipynb_checkpoints

README.md

@@ -99,24 +99,26 @@ notebook / lab frontend. For lab, this is done by the command:
 
 ```bash
 jupyter labextension develop --overwrite .
-npm run build
+yarn run build
 ```
 
 For classic notebook, you need to run:
 ```bash
-jupyter nbextension install --py --symlink --sys-prefix ipympl
+jupyter nbextension install --py --symlink --sys-prefix --overwrite ipympl
 jupyter nbextension enable --py --sys-prefix ipympl
 ```
 
 #### How to see your changes
 
-**Javascript**:
+**Typescript**:
 
-You need to rebuild the JS when you make a code change:
+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
-cd js
+# 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.

babel.config.js

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