From e05a7d830cc303a75e3fdaa8231943dd868c5f82 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Sat, 3 Aug 2024 18:09:46 -0400 Subject: [PATCH] docs: Clean up transition to HMR in getting started (#647) --- docs/src/pages/en/getting-started.mdx | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/en/getting-started.mdx b/docs/src/pages/en/getting-started.mdx index 853653cb..2da2b547 100644 --- a/docs/src/pages/en/getting-started.mdx +++ b/docs/src/pages/en/getting-started.mdx @@ -109,17 +109,16 @@ export default { render } As your widgets grow in complexity, it is recommended to separate your front-end code from your Python code. Just move the `_esm` and `_css` -definitions to separate files and reference them via path. +(from above) to separate files and reference them via path. ```python -import pathlib import anywidget import traitlets class CounterWidget(anywidget.AnyWidget): - _esm = pathlib.Path(__file__).parent / "index.js" - _css = pathlib.Path(__file__).parent / "index.css" - count = traitlets.Int(0).tag(sync=True) + _esm = "index.js" + _css = "index.css" + value = traitlets.Int(0).tag(sync=True) ``` This is both easier to read and allows you to use your favorite editor/IDE for your front-end code. @@ -144,6 +143,20 @@ allowing real-time updates to your widget during development (below). src="https://miro.medium.com/v2/resize:fit:1400/1*VCG-57YX8IrfTyeby3Ybjg.gif" /> +> **Note**: Prefer `pathlib.Path` for file paths in production and outside +> notebooks to ensure OS compatibility and correct relative path resolution. +> +> ```py +> import pathlib +> import anywidget +> import traitlets +> +> class CounterWidget(anywidget.AnyWidget): +> _esm = pathlib.Path(__file__).parent / "index.js" +> _css = pathlib.Path(__file__).parent / "index.css" +> value = traitlets.Int(0).tag(sync=True) +> ``` + ## Watch & Learn This video provides a detailed exploration of **anywidget** fundementals,