From 148b1213c09975d80ae328e421b66a5ad4492525 Mon Sep 17 00:00:00 2001 From: Dominik Moritz Date: Sat, 14 Sep 2024 19:24:03 -0400 Subject: [PATCH 1/2] refactor: use simpler HMR setup for anywidget building on https://anywidget.dev/blog/anywidget-02/#native-hot-module-replacement-hmr --- packages/widget/README.md | 6 +++--- packages/widget/mosaic_widget/__init__.py | 17 ++--------------- packages/widget/package.json | 5 ++--- packages/widget/pyproject.toml | 3 ++- packages/widget/vite.config.mjs | 13 ------------- 5 files changed, 9 insertions(+), 35 deletions(-) delete mode 100644 packages/widget/vite.config.mjs diff --git a/packages/widget/README.md b/packages/widget/README.md index 4a6da468..e573f83b 100644 --- a/packages/widget/README.md +++ b/packages/widget/README.md @@ -14,10 +14,10 @@ To activate the environment, run `hatch shell`. This should install the widget in development mode so you can start Jupyter. -You can start Jupyter with `jupyter lab --notebook-dir=../../dev/notebooks`. If you cannot import the widget module, make sure that your Jupyter uses the right environment. You can add your environment to Jupyter by running `python -m ipykernel install --user --name=mosaic` and then select `mosaic` in the Jupyter environment dropdown. +You can start Jupyter with `ANYWIDGET_HMR=1 jupyter lab --notebook-dir=../../dev/notebooks`. If you cannot import the widget module, make sure that your Jupyter uses the right environment. You can add your environment to Jupyter by running `python -m ipykernel install --user --name=mosaic` and then select `mosaic` in the Jupyter environment dropdown. -Run `npm run build` to build the widget JavaScript code. If you want to live edit the widget code, run `npm run dev` in a separate terminal and change `_DEV = False` to `_DEV = True` inside `mosaic_widget/__init__.py`. +Run `npm run build` to build the widget JavaScript code. If you want to live edit the widget code, run `npm run dev` in a separate terminal. ## Publishing -First, make sure that you set `_DEV = False`. Run the build with `npm run build` and `hatch build`. Then publish with `hatch publish`. We publish using tokens so when asked, set the username to `__token__` and then use your token as the password. Alternatively, create a [`.pypirc` file](https://packaging.python.org/en/latest/guides/distributing-packages-using-setuptools/#create-an-account). \ No newline at end of file +Run the build with `npm run build` and `hatch build`. Then publish with `hatch publish`. We publish using tokens so when asked, set the username to `__token__` and then use your token as the password. Alternatively, create a [`.pypirc` file](https://packaging.python.org/en/latest/guides/distributing-packages-using-setuptools/#create-an-account). diff --git a/packages/widget/mosaic_widget/__init__.py b/packages/widget/mosaic_widget/__init__.py index 0100cc40..0abcb2b9 100644 --- a/packages/widget/mosaic_widget/__init__.py +++ b/packages/widget/mosaic_widget/__init__.py @@ -12,24 +12,11 @@ logger = logging.getLogger(__name__) logger.addHandler(logging.NullHandler()) -_DEV = False # switch to False for production - SLOW_QUERY_THRESHOLD = 5000 -if _DEV: - # from `npm run dev` - ESM = "http://localhost:5173/src/index.js?anywidget" - CSS = "" -else: - # from `npm run build` - bundled_assets_dir = pathlib.Path(__file__).parent / "static" - ESM = bundled_assets_dir / "index.js" - CSS = bundled_assets_dir / "style.css" - - class MosaicWidget(anywidget.AnyWidget): - _esm = ESM - _css = CSS + _esm = pathlib.Path(__file__).parent / "static" / "index.js" + _css = pathlib.Path(__file__).parent / "static" / "index.css" # The Mosaic specification spec = traitlets.Dict({}).tag(sync=True) diff --git a/packages/widget/package.json b/packages/widget/package.json index b9e1cd36..9e96186c 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -10,8 +10,8 @@ "url": "https://github.com/uwdata/mosaic.git" }, "scripts": { - "build": "vite build", - "dev": "vite", + "build": "esbuild --bundle --format=esm --outdir=mosaic_widget/static src/index.js", + "dev": "npm run build -- --watch", "test": "tsc -p jsconfig.json", "lint": "eslint src", "prepublishOnly": "rimraf dist && mkdir dist && npm run test && npm run lint && hatch fmt --check && npm run build && hatch build", @@ -25,7 +25,6 @@ "uuid": "^10.0.0" }, "devDependencies": { - "@anywidget/vite": "^0.2.0", "anywidget": "^0.9.13" } } diff --git a/packages/widget/pyproject.toml b/packages/widget/pyproject.toml index ec26ed1c..cbad65d4 100644 --- a/packages/widget/pyproject.toml +++ b/packages/widget/pyproject.toml @@ -27,7 +27,8 @@ artifacts = [ dev = [ "jupyterlab", "pandas", - "pyyaml" + "pyyaml", + "watchfiles" ] [tool.hatch.envs.default] diff --git a/packages/widget/vite.config.mjs b/packages/widget/vite.config.mjs deleted file mode 100644 index a16809a7..00000000 --- a/packages/widget/vite.config.mjs +++ /dev/null @@ -1,13 +0,0 @@ -import { defineConfig } from "vite"; -import anywidget from "@anywidget/vite"; - -export default defineConfig({ - build: { - outDir: "mosaic_widget/static", - lib: { - entry: ["src/index.js"], - formats: ["es"], - }, - }, - plugin: [anywidget()], -}); From 50b542f97c8d61d13154e8e6c70fcd591a86b2b1 Mon Sep 17 00:00:00 2001 From: Dominik Moritz Date: Sat, 14 Sep 2024 19:37:10 -0400 Subject: [PATCH 2/2] style: ruff --- packages/widget/mosaic_widget/__init__.py | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/widget/mosaic_widget/__init__.py b/packages/widget/mosaic_widget/__init__.py index 0abcb2b9..27b28c75 100644 --- a/packages/widget/mosaic_widget/__init__.py +++ b/packages/widget/mosaic_widget/__init__.py @@ -14,6 +14,7 @@ SLOW_QUERY_THRESHOLD = 5000 + class MosaicWidget(anywidget.AnyWidget): _esm = pathlib.Path(__file__).parent / "static" / "index.js" _css = pathlib.Path(__file__).parent / "static" / "index.css"