Setup quantem.widget within monorepo setup, maintain identical uv quantem core dev experience

.gitignore

@@ -187,3 +187,7 @@ ipynb-playground/
 
 # cursor
 .cursor
+
+# widget (JS build artifacts)
+node_modules/
+widget/src/quantem/widget/static/

CONTRIBUTORS.md

@@ -7,6 +7,13 @@ Getting started:
 - [install uv](https://docs.astral.sh/uv/getting-started/installation/)
 - `git clone` the repo and `cd` into the directory
 - run `uv sync` to install all the dependencies in an editable environment
+- run `uv sync --all-packages` to also install `quantem.widget` (optional)
+
+For widget developers (requires [Node.js](https://nodejs.org/)):
+
+- `cd widget && npm install` to install JS dependencies
+- `npm run build` to build the widget
+- `npm run dev` to watch for changes during development
 
 The following will set up the pre-commit and [ruff](https://github.com/astral-sh/ruff) for linting and formatting. These commands only need to be run once when first setting up your dev environment: 
 

pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "hatchling.build"
 addopts = [
     "--import-mode=importlib",
 ]
-testpaths = "tests"
+testpaths = ["tests", "widget/tests"]
 
 [tool.ruff.lint]
 select = ["E4","E7","E9","F","I"]
@@ -21,6 +21,12 @@ line-length = 99
 [tool.uv]
 config-settings = { editable_mode = "compat" }
 
+[tool.uv.workspace]
+members = ["widget"]
+
+[tool.uv.sources]
+"quantem.widget" = { workspace = true }
+
 [project]
 name = "quantem"
 version = "0.1.7"
@@ -49,6 +55,11 @@ dependencies = [
   "hdf5plugin>=6.0.0",
 ]
 
+[project.optional-dependencies]
+widgets = [
+    "quantem.widget",
+]
+
 [tool.hatch.build.targets.sdist]
 # hatchling always includes:
 # pyproject.toml, .gitignore, any README, any LICENSE, AUTHORS

src/quantem/__init__.py

@@ -1,3 +1,6 @@
+from pkgutil import extend_path
+__path__ = extend_path(__path__, __name__)
+
 from importlib.metadata import version
 
 from quantem.core import io as io

widget/js/index.jsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
+
+function Widget({ model }) {
+  const [count, setCount] = React.useState(model.get("count"));
+
+  React.useEffect(() => {
+    const onChange = () => setCount(model.get("count"));
+    model.on("change:count", onChange);
+    return () => model.off("change:count", onChange);
+  }, [model]);
+
+  const handleClick = () => {
+    model.set("count", count + 1);
+    model.save_changes();
+  };
+
+  return (
+    <div style={{ padding: "16px", fontFamily: "sans-serif" }}>
+      <h3>quantem.widget</h3>
+      <p>Count: {count}</p>
+      <button onClick={handleClick}>Increment</button>
+    </div>
+  );
+}
+
+function render({ model, el }) {
+  const root = ReactDOM.createRoot(el);
+  root.render(<Widget model={model} />);
+  return () => root.unmount();
+}
+
+export default { render };