Skip to content

Commit

Permalink
autoreload-to-dev
Browse files Browse the repository at this point in the history
  • Loading branch information
MarcSkovMadsen committed Sep 20, 2024
1 parent 5a96a38 commit 2fd72df
Show file tree
Hide file tree
Showing 15 changed files with 18 additions and 18 deletions.
2 changes: 1 addition & 1 deletion doc/explanation/api/examples/outliers_declarative.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ It should look like this:
If you prefer developing in a Python Script using an editor, you can copy the code into a file `app.py` and serve it.

```bash
panel serve app.py --autoreload
panel serve app.py --dev
```

:::
2 changes: 1 addition & 1 deletion doc/explanation/comparisons/compare_streamlit.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

![Panel Layout Example](https://user-images.githubusercontent.com/42288570/243362603-45ba78a4-d67b-43bc-b3c2-386105fe6ed8.png)

**Streamlit is an alternative** to Panel, Jupyter, Bokeh, and Dash. Like Jupyter, Streamlit provides an interactive, incremental way to build apps. Streamlit works with Python text files written in a separate editor, while Jupyter uses a web-based notebook cell editor. Although a web-based editor simplifies working locally on remote files, using a local Python text file enables users to maximize productivity by choosing their preferred editor. Dash, Panel, and Bokeh also support bare Python files developed in a local editor. Similarly, like Streamlit, they all watch that file and automatically re-run it when changes occur in the editor (e.g., for Panel, launch `panel serve --show --autoreload file.py` to watch the Python file and re-launch the served app on any changes).
**Streamlit is an alternative** to Panel, Jupyter, Bokeh, and Dash. Like Jupyter, Streamlit provides an interactive, incremental way to build apps. Streamlit works with Python text files written in a separate editor, while Jupyter uses a web-based notebook cell editor. Although a web-based editor simplifies working locally on remote files, using a local Python text file enables users to maximize productivity by choosing their preferred editor. Dash, Panel, and Bokeh also support bare Python files developed in a local editor. Similarly, like Streamlit, they all watch that file and automatically re-run it when changes occur in the editor (e.g., for Panel, launch `panel serve --show --dev file.py` to watch the Python file and re-launch the served app on any changes).

A key difference with Streamlit is that **the entire Python source file is effectively re-run *every time a widget changes value***, preventing confusing out-of-order execution of notebook cells and simplifying reasoning about state. However, this approach necessitates making all lengthy computations cacheable, which is not always straightforward and can introduce complexities in state management. Moreover, similar to Dash's lack of server-side state, Streamlit's approach can make it challenging to generate responsive apps for complex situations requiring a precise mapping between a widget event and specific Python code. In contrast, Panel offers better support for fully reactive applications, where each widget or plot component is explicitly tied to computation, re-running only the necessary code for that action. Consequently, Panel can support larger, more complex applications, allowing specific behaviors to be implemented and delivered independently.

Expand Down
2 changes: 1 addition & 1 deletion doc/getting_started/core_concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Upon running that command, Panel launches a server that serves your app, opens a
<img src="https://assets.holoviz.org/panel/gifs/vscode_autoreload.gif" style="margin-left: auto; margin-right: auto; display: block;"></img>

```{tip}
We recommend installing [`watchfiles`](https://watchfiles.helpmanual.io) to get the best user experience when using `--autoreload`.
We recommend installing [`watchfiles`](https://watchfiles.helpmanual.io) to get the best user experience when using `--dev` flag.
```

```{tip}
Expand Down
2 changes: 1 addition & 1 deletion doc/how_to/concurrency/manual_threading.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ To use threading efficiently:

When we need to share data periodically across all sessions, it is often inefficient to fetch and process this data separately for each session.

Instead, we can utilize a single thread. When initiating global threads, it's crucial to avoid starting them multiple times, especially in sessions or modules subject to `--autoreload`. To circumvent this issue, we can globally share a worker or thread through the Panel cache (`pn.state.cache`).
Instead, we can utilize a single thread. When initiating global threads, it's crucial to avoid starting them multiple times, especially in sessions or modules subject to the `--dev` flag. To circumvent this issue, we can globally share a worker or thread through the Panel cache (`pn.state.cache`).

Let's create a `GlobalTaskRunner` that accepts a function (`worker`) and executes it repeatedly, pausing for `sleep` seconds between each execution.

Expand Down
4 changes: 2 additions & 2 deletions doc/how_to/custom_components/esm/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ esbuild output:
⚡ Done in 9ms
```

The compiled JavaScript file will be automatically loaded if it remains alongside the component. If you rename the component or modify its code or `_importmap`, you must recompile the component. For ongoing development, consider using the `--autoreload` option to ignore the compiled file and automatically reload the development version when it changes.
The compiled JavaScript file will be automatically loaded if it remains alongside the component. If you rename the component or modify its code or `_importmap`, you must recompile the component. For ongoing development, consider using the `--dev` option to ignore the compiled file and automatically reload the development version when it changes.

#### Compilation Steps

Expand Down Expand Up @@ -280,7 +280,7 @@ custom_build_dir/
└── <OtherComponent>.js
```

The compiled JS file will now be loaded automatically as long as it remains alongside the component. If you rename the component you will have to delete and recompile the JS file. If you make changes to the code or `_importmap` you also have to recompile. During development we recommend using `--autoreload`, which ignores the compiled file.
The compiled JS file will now be loaded automatically as long as it remains alongside the component. If you rename the component you will have to delete and recompile the JS file. If you make changes to the code or `_importmap` you also have to recompile. During development we recommend using `--dev`, which ignores the compiled file.

```{caution}
The `panel compile` CLI tool is still very new and experimental. In our testing it was able to compile and bundle most components but there are bound to be corner cases.
Expand Down
2 changes: 1 addition & 1 deletion doc/how_to/editor/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ pn.Row(widget, pn.bind(hello_world, widget)).servable()
Then, from the command line, launch a server with:

```bash
panel serve app.md --show --autoreload
panel serve app.md --show --dev
```

![The rendered Panel application written as a Markdown file.](../../_static/images/markdown_sample.png)
2 changes: 1 addition & 1 deletion doc/how_to/editor/vscode_configure.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ To speed up your workflow we recommend configuring a keyboard short cut to `pane
{
"key": "ctrl+shift+space",
"command": "workbench.action.terminal.sendSequence",
"args": { "text": "panel serve ${relativeFile} --autoreload --show\u000D" }
"args": { "text": "panel serve ${relativeFile} --dev --show\u000D" }
}
]
```
Expand Down
2 changes: 1 addition & 1 deletion doc/how_to/templates/template_arrange.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ template.servable();
Now, we can activate this app on the command line:

``` bash
panel serve app.py --show --autoreload
panel serve app.py --show --dev
```

<img src="../../_static/images/template_arrange.png" alt="example panel app">
Expand Down
2 changes: 1 addition & 1 deletion doc/how_to/templates/template_modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ template.servable();
Now we can activate this app on the command line. When we click the button in the sidebar, we see the modal pop up:

```bash
panel serve app.py --show --autoreload
panel serve app.py --show --dev
```

<img src="../../_static/images/template_arrange_modal.png" alt="example panel app with an active modal">
Expand Down
2 changes: 1 addition & 1 deletion doc/how_to/templates/template_theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ template.servable();
Now, we can activate this app on the command line:

``` bash
panel serve app.py --show --autoreload
panel serve app.py --show --dev
```

<img src="../../_static/images/template_mat_dark.png" alt="dark themed panel app">
Expand Down
2 changes: 1 addition & 1 deletion doc/tutorials/basic/develop_notebook.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ The video shows how a larger app could be developed.
Alternatively, you can serve your notebook externally with autoreload using the following command:

```bash
panel serve app.ipynb --autoreload
panel serve app.ipynb --dev
```

This method provides a faster alternative to the *Jupyter Panel Preview*. Check out the video for inspiration.
Expand Down
2 changes: 1 addition & 1 deletion doc/tutorials/expert/custom_anywidget_components.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ Create a file named `mario_button.css`:
To serve the application, run the following command in your terminal:

```sh
panel serve mario_button.py --autoreload
panel serve mario_button.py --dev
```

This command will start a Panel server and automatically reload changes as you edit the files.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
"\n",
"### AnyWidgetComponent Attributes\n",
"\n",
"- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `default` object or function that returns an object. The object should contain a `render` function and optionally an `initialize` function. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes.\n",
"- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `default` object or function that returns an object. The object should contain a `render` function and optionally an `initialize` function. In a development environment such as a notebook or when using `--dev` flag, the module will automatically reload upon saving changes.\n",
"- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
"- **`_stylesheets`** (list[str] | list[PurePath]): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments. It works similarly to the `AnyWidget` `_css` attribute.\n",
"\n",
Expand Down
4 changes: 2 additions & 2 deletions examples/reference/custom_components/JSComponent.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"\n",
"### JSComponent Attributes\n",
"\n",
"- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes.\n",
"- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--dev` flag, the module will automatically reload upon saving changes.\n",
"- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
"- **`_stylesheets`** (optional list of strings): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments.\n",
"\n",
Expand Down Expand Up @@ -431,7 +431,7 @@
"}\n",
"```\n",
"\n",
"Serve the app with `panel serve counter_button.py --autoreload`.\n",
"Serve the app with `panel serve counter_button.py --dev`.\n",
"\n",
"You can now edit the JavaScript or CSS file, and the changes will be automatically reloaded.\n",
"\n",
Expand Down
4 changes: 2 additions & 2 deletions examples/reference/custom_components/ReactComponent.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"\n",
"### ReactComponent Attributes\n",
"\n",
"- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes. You can use [`JSX`](https://react.dev/learn/writing-markup-with-jsx) and [`TypeScript`](https://www.typescriptlang.org/). The `_esm` script is transpiled on the fly using [Sucrase](https://sucrase.io/). The global namespace contains a `React` object that provides access to React hooks.\n",
"- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--dev`, the module will automatically reload upon saving changes. You can use [`JSX`](https://react.dev/learn/writing-markup-with-jsx) and [`TypeScript`](https://www.typescriptlang.org/). The `_esm` script is transpiled on the fly using [Sucrase](https://sucrase.io/). The global namespace contains a `React` object that provides access to React hooks.\n",
"- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
"- **`_stylesheets`** (List[str | PurePath] | None): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments.\n",
"\n",
Expand Down Expand Up @@ -429,7 +429,7 @@
"}\n",
"```\n",
"\n",
"Serve the app with `panel serve counter_button.py --autoreload`.\n",
"Serve the app with `panel serve counter_button.py --dev`.\n",
"\n",
"You can now edit the JSX or CSS file, and the changes will be automatically reloaded.\n",
"\n",
Expand Down

0 comments on commit 2fd72df

Please sign in to comment.