diff --git a/labextension/vpython/BuildingJlabExtension.txt b/labextension/vpython/BuildingJlabExtension.txt deleted file mode 100644 index a8b09a3f..00000000 --- a/labextension/vpython/BuildingJlabExtension.txt +++ /dev/null @@ -1,72 +0,0 @@ - From John Coady: Here are instructions on how to create your own vpython jupyterlab extension on your computer. You will need to come up with a unique name for your vpython labextension so you can make is something like "vpythontest" or "myvpython" or something else that you would like to call it. Just don't call it "vpython" otherwise you might have installation problems with the official vpython labextension. So here are the steps. - -Step 1: In a console window, activate the conda environment where you have jupyterlab installed. - - jupyter labextension list - -JupyterLab v0.35.3 -Known labextensions: - app dir: C:\Users\Bruce\Anaconda3\share\jupyter\lab - vpython v0.2.9 enabled ok - - -Step 2: Uninstall the official vpython labextension from this jupyterlab so that there are no conflicts with your custom vpython labextension. - - jupyter labextension uninstall vpython - - Check that the vpython labextension is uninstalled. - - jupyter labextension list - - -Step 3: In the console window, navigate to your home directory. The following command will ask you for the name you want to give your custom labextension (it will also ask you for a github address, which you can ignore). Remember, don't call your extension vpython. Here, "my-cookie-cutter-name" will be the name you give your custom extension, and the cd will put you in a folder created by the coookiecutter machinery. - - pip install cookiecutter - cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts - cd my-cookie-cutter-name - - -Step 4: Now that you are in your directory for your custom labextension, enter the following commands. - - npm install - npm install --save @jupyterlab/notebook @jupyterlab/application @jupyterlab/apputils @jupyterlab/docregistry @phosphor/disposable script-loader - - -Step 5: If you look at the contents of this directory where your labextension is located it should contain some files and a directory called "src" and another directory called "style". Copy all of the files and the directories from - - https://github.com/BruceSherwood/vpython-jupyter/tree/master/labextension/vpython - -to your custom labextension directory and overwrite the existing files. - - -Step 6: Build your custom extension. - - npm run build - - -Step 7: You should now have a directory called "lib" in your custom labextension folder. Copy vpython_data and vpython_libraries folders and their contents from - - https://github.com/BruceSherwood/vpython-jupyter/tree/master/vpython - - to the lib directory. - - -Step 8: Now build and install your custom labextension. - - npm run build - jupyter labextension install . - - -Step 9: Check that your labextension is installed. - - jupyter labextension list - - -Step 10: In a separate console window activate the conda environment that contains jupyterlab that you are working with and launch jupyterlab. - - jupyter lab - - You should have your custom vpython working in jupyterlab. - - -If you make a change to the code then you just need to repeat step 8 to rebuild and install your changes in jupyterlab. You should probably close jupyterlab and restart it for the changes to be picked up. \ No newline at end of file diff --git a/labextension/vpython/README.md b/labextension/vpython/README.md index 15645183..00e81f0f 100644 --- a/labextension/vpython/README.md +++ b/labextension/vpython/README.md @@ -1,65 +1,61 @@ -# vpython +# jupyterlab_vpython -VPython labextension +A VPython extension for JupyterLab +## Requirements -## Prerequisites +- JupyterLab >= 3.0.0 +- VPython >= 7.6.4 -* JupyterLab ^0.35.0 -* VPython Package >=7.4.8 (pip install vpython) or (conda install -c vpython vpython) +## Install -## Installation +To install the extension, execute: ```bash -jupyter labextension install vpython +pip install jupyterlab_vpython ``` -## Development - -For a development install use the instructions for creating a custom jupyter labextension as a guide: - -https://jupyterlab.readthedocs.io/en/stable/developer/extension_tutorial.html#extension-tutorial - -Except where the tutorial says: `conda install -c conda-forge jupyterlab=2`, use `jupyterlab=1` -and tailor the instructions for creating a vpython labextension. Also, the tutorial command -`jupyter lab --watch` will fail. Just use `jupyter lab`. +## Uninstall -The original instructions below caused trouble for me (steve, I got various React errors) but this is what worked: +To remove the extension, execute: -1) Create and activate a conda environment, and then install jupyterlab: - - conda create -n jupyterlab-ext --override-channels --strict-channel-priority -c conda-forge -c anaconda jupyterlab cookiecutter nodejs git - - conda activate jupyterlab-ext - - conda install -c conda-forge jupyterlab=1 +```bash +pip uninstall jupyterlab_vpython +``` -2) git clone the repository (the branch from the pull request) somewhere using whatever git machinery you prefer. +## Development -Then “cd” into the ‘vpython-jupyter/labextension/vpython’ of that repository. +For a development install use the instructions for creating a custom jupyter labextension as a guide: -3) In the ‘vpython-jupyter/labextension/vpython’ directory of that repository execute: +https://jupyterlab.readthedocs.io/en/latest/extension/extension_tutorial.html - cp -r ../../vpython/vpython_{libraries,data} . +Follow the steps in the tutorial - yarn install +Step 1: - jupyter labextension install . +```bash +conda create -n jupyterlab-ext --override-channels --strict-channel-priority -c conda-forge -c nodefaults jupyterlab=4 nodejs=18 git copier=7 jinja2-time +``` -4) Install vpyton in this virtual environment: +Step 2: - cd ../.. +```bash +conda activate jupyterlab-ext +``` - pip install -e . - -And then to run a lab notebook: +Step 3: Get the jupyterlab_vpython repository - jupyter lab +```bash +git clone https://github.com/jcoady/jupyterlab_vpython.git +``` -Then you should be able to import vpython now and run notebooks in jupyterlab. +Step 4: -Original instructions: +```bash +cd jupyterlab_vpython +``` +Step 5: ```bash jlpm install jlpm add @jupyterlab/application @@ -67,17 +63,46 @@ jlpm add @jupyterlab/apputils jlpm add @jupyterlab/coreutils jlpm add @jupyterlab/docregistry jlpm add @jupyterlab/notebook -jlpm add @phosphor/disposable +jlpm add @lumino/disposable +jlpm add file-loader +jlpm add plotly.js-dist-min jlpm add script-loader cp -r ../../vpython/vpython_{libraries,data} . jlpm run build -jupyter labextension install . ``` -To rebuild the package and the JupyterLab app: +Step 6: install the extension into the JupyterLab environment. ```bash -jlpm run build -jupyter lab build +pip install -ve . +``` + +Step 7: After the install completes, open a second terminal. +Run these commands to activate the jupyterlab-ext environment +and start JupyterLab in your default web browser. + +```bash +conda activate jupyterlab-ext +jupyter lab +``` + +Step 8: Packaging the extension. + +Before generating a package, we first need to install build. + +```bash +pip install build +``` + +To create a Python source package (.tar.gz) in the dist/ directory, do: + +```bash +python -m build -s +``` + +To create a Python wheel package (.whl) in the dist/ directory, do: + +```bash +python -m build ``` diff --git a/labextension/vpython/package.json b/labextension/vpython/package.json index 80f98280..d1aaef83 100644 --- a/labextension/vpython/package.json +++ b/labextension/vpython/package.json @@ -1,79 +1,195 @@ { - "name": "vpython", - "version": "3.0.7", - "description": "VPython extension for JupyterLab", - "keywords": [ - "jupyter", - "jupyterlab", - "jupyterlab-extension" - ], - "homepage": "https://github.com/jcoady/jupyterlab_vpython", - "bugs": { - "url": "https://github.com/jcoady/jupyterlab_vpython/issues" - }, - "license": "BSD-3-Clause", - "author": { - "name": "John Coady", - "email": "johncoady@shaw.ca" - }, - "files": [ - "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,otf,ico}", - "style/**/*.{css,.js,eot,gif,html,jpg,json,png,svg,woff2,ttf,otf,ico}", - "vpython_data/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf,otf,ico}", - "vpython_libraries/*" - ], - "main": "lib/index.js", - "types": "lib/index.d.ts", - "style": "style/index.css", - "repository": { - "type": "git", - "url": "https://github.com/jcoady/jupyterlab_vpython.git" - }, - "scripts": { - "build": "jlpm run build:lib && jlpm run build:labextension:dev", - "build:prod": "jlpm run clean && jlpm run build:lib && jlpm run build:labextension", - "build:labextension": "jupyter labextension build .", - "build:labextension:dev": "jupyter labextension build --development True .", - "build:lib": "tsc", - "clean": "jlpm run clean:lib", - "clean:lib": "rimraf lib tsconfig.tsbuildinfo", - "clean:labextension": "rimraf jupyterlab_vpython/labextension", - "clean:all": "jlpm run clean:lib && jlpm run clean:labextension", - "eslint": "eslint . --ext .ts,.tsx --fix", - "eslint:check": "eslint . --ext .ts,.tsx", - "install:extension": "jlpm run build", - "watch": "run-p watch:src watch:labextension", - "watch:src": "tsc -w", - "watch:labextension": "jupyter labextension watch ." - }, - "dependencies": { - "@jupyterlab/application": "^3.0.9", - "@jupyterlab/apputils": "^3.0.7", - "@jupyterlab/coreutils": "^5.0.5", - "@jupyterlab/docregistry": "^3.0.9", - "@jupyterlab/notebook": "^3.0.9", - "@lumino/disposable": "^1.6.0", - "script-loader": "^0.7.2" - }, - "devDependencies": { - "@jupyterlab/builder": "^3.0.0", - "@typescript-eslint/eslint-plugin": "^4.8.1", - "@typescript-eslint/parser": "^4.8.1", - "eslint": "^7.14.0", - "eslint-config-prettier": "^6.15.0", - "eslint-plugin-prettier": "^3.1.4", - "npm-run-all": "^4.1.5", - "prettier": "^2.1.1", - "rimraf": "^3.0.2", - "typescript": "~4.1.3" - }, - "sideEffects": [ - "style/*.css", - "style/index.js" - ], - "styleModule": "style/index.js", - "jupyterlab": { - "extension": true, - "outputDir": "jupyterlab_vpython/labextension" - } + "name": "jupyterlab_vpython", + "version": "3.1.6", + "description": "A VPython extension for JupyterLab", + "keywords": [ + "jupyter", + "jupyterlab", + "jupyterlab-extension" + ], + "homepage": "https://github.com/jcoady/jupyterlab_vpython", + "bugs": { + "url": "https://github.com/jcoady/jupyterlab_vpython/issues" + }, + "license": "BSD-3-Clause", + "author": { + "name": "John Coady", + "email": "johncoady@shaw.ca" + }, + "files": [ + "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,otf,ico}", + "style/**/*.{css,.js,eot,gif,html,jpg,json,png,svg,woff2,ttf,otf,ico}", + "vpython_data/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf,otf,ico}", + "vpython_libraries/*" + ], + "main": "lib/index.js", + "types": "lib/index.d.ts", + "style": "style/index.css", + "repository": { + "type": "git", + "url": "https://github.com/jcoady/jupyterlab_vpython.git" + }, + "scripts": { + "build": "jlpm build:lib && jlpm build:labextension:dev", + "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension", + "build:labextension": "jupyter labextension build .", + "build:labextension:dev": "jupyter labextension build --development True .", + "build:lib": "tsc --sourceMap", + "build:lib:prod": "tsc", + "clean": "jlpm clean:lib", + "clean:lib": "rimraf lib tsconfig.tsbuildinfo", + "clean:lintcache": "rimraf .eslintcache .stylelintcache", + "clean:labextension": "rimraf jupyterlab_vpython/labextension jupyterlab_vpython/_version.py", + "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache", + "eslint": "jlpm eslint:check --fix", + "eslint:check": "eslint . --cache --ext .ts,.tsx", + "install:extension": "jlpm build", + "lint": "jlpm stylelint && jlpm prettier && jlpm eslint", + "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check", + "prettier": "jlpm prettier:base --write --list-different", + "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"", + "prettier:check": "jlpm prettier:base --check", + "stylelint": "jlpm stylelint:check --fix", + "stylelint:check": "stylelint --cache \"style/**/*.css\"", + "watch": "run-p watch:src watch:labextension", + "watch:src": "tsc -w --sourceMap", + "watch:labextension": "jupyter labextension watch ." + }, + "dependencies": { + "@jupyterlab/application": "^4.0.7", + "@jupyterlab/apputils": "^4.1.7", + "@jupyterlab/coreutils": "^6.0.7", + "@jupyterlab/docregistry": "^4.0.7", + "@jupyterlab/notebook": "^4.0.7", + "@lumino/disposable": "^2.1.2", + "file-loader": "^6.2.0", + "plotly.js-dist-min": "^2.26.2", + "script-loader": "^0.7.2" + }, + "devDependencies": { + "@jupyterlab/builder": "^4.0.0", + "@types/json-schema": "^7.0.11", + "@types/react": "^18.0.26", + "@types/react-addons-linked-state-mixin": "^0.14.22", + "@typescript-eslint/eslint-plugin": "^6.1.0", + "@typescript-eslint/parser": "^6.1.0", + "css-loader": "^6.7.1", + "eslint": "^8.36.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-prettier": "^5.0.0", + "npm-run-all": "^4.1.5", + "prettier": "^3.0.0", + "rimraf": "^5.0.1", + "source-map-loader": "^1.0.2", + "style-loader": "^3.3.1", + "stylelint": "^15.10.1", + "stylelint-config-recommended": "^13.0.0", + "stylelint-config-standard": "^34.0.0", + "stylelint-csstree-validator": "^3.0.0", + "stylelint-prettier": "^4.0.0", + "typescript": "~5.0.2", + "yjs": "^13.5.0" + }, + "sideEffects": [ + "style/*.css", + "style/index.js" + ], + "styleModule": "style/index.js", + "publishConfig": { + "access": "public" + }, + "jupyterlab": { + "extension": true, + "outputDir": "jupyterlab_vpython/labextension" + }, + "eslintIgnore": [ + "node_modules", + "dist", + "coverage", + "**/*.d.ts" + ], + "eslintConfig": { + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "project": "tsconfig.json", + "sourceType": "module" + }, + "plugins": [ + "@typescript-eslint" + ], + "rules": { + "@typescript-eslint/naming-convention": [ + "error", + { + "selector": "interface", + "format": [ + "PascalCase" + ], + "custom": { + "regex": "^I[A-Z]", + "match": true + } + } + ], + "@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/quotes": [ + "error", + "single", + { + "avoidEscape": true, + "allowTemplateLiterals": false + } + ], + "curly": [ + "error", + "all" + ], + "eqeqeq": "error", + "prefer-arrow-callback": "error" + } + }, + "prettier": { + "singleQuote": true, + "trailingComma": "none", + "arrowParens": "avoid", + "endOfLine": "auto", + "overrides": [ + { + "files": "package.json", + "options": { + "tabWidth": 4 + } + } + ] + }, + "stylelint": { + "extends": [ + "stylelint-config-recommended", + "stylelint-config-standard", + "stylelint-prettier/recommended" + ], + "plugins": [ + "stylelint-csstree-validator" + ], + "rules": { + "csstree/validator": true, + "property-no-vendor-prefix": null, + "selector-no-vendor-prefix": null, + "value-no-vendor-prefix": null + } + } } diff --git a/labextension/vpython/src/glowcommlab.js b/labextension/vpython/src/glowcommlab.js index 8f2f27fe..4950ddb7 100644 --- a/labextension/vpython/src/glowcommlab.js +++ b/labextension/vpython/src/glowcommlab.js @@ -1,7 +1,8 @@ import 'script-loader!../vpython_libraries/jquery.min.js'; import 'script-loader!../vpython_libraries/jquery-ui.custom.min.js'; import 'script-loader!../vpython_libraries/glow.min.js'; -import 'script-loader!../vpython_libraries/plotly.min.js'; +//import 'script-loader!../vpython_libraries/plotly.min.js'; +import Plotly from 'plotly.js-dist-min' import '../style/jquery-ui.custom.css' import '../style/ide.css' import img from '../vpython_data/flower_texture.jpg' // use this to get the path to vpython_data @@ -85,6 +86,7 @@ var url = new URL(img); var datadir = url.pathname.substring(0, url.pathname.lastIndexOf('/')) + "/vpython_data/"; // path to vpython_data dir window.Jupyter_VPython = datadir // prefix used by glow.min.js for textures url = null +window.Plotly = Plotly function fontloading() { "use strict"; @@ -1009,6 +1011,4 @@ function handle_attrs(dattrs) { } } // end of attributes } -console.log("END OF GLOWCOMM") - -//}); +console.log("END OF GLOWCOMM") \ No newline at end of file diff --git a/labextension/vpython/src/index.ts b/labextension/vpython/src/index.ts index d27970e2..b7f00871 100644 --- a/labextension/vpython/src/index.ts +++ b/labextension/vpython/src/index.ts @@ -37,11 +37,11 @@ class VPythonExtension implements DocumentRegistry.IWidgetExtensionwindow).JLab_VPython = true; try { - kernelInstance.registerCommTarget('glow', (vp_comm: any, commMsg: any) => { + kernelInstance?.registerCommTarget('glow', (vp_comm: any, commMsg: any) => { // Use Dynamic import() Expression to import glowcomm when comm is opened import("./glowcommlab").then(glowcommlab => { glowcommlab.comm = vp_comm @@ -60,7 +60,11 @@ class VPythonExtension implements DocumentRegistry.IWidgetExtension