shinyreact 0.1.0__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- shinyreact-0.1.0/.gitignore +230 -0
- shinyreact-0.1.0/LICENSE +21 -0
- shinyreact-0.1.0/PKG-INFO +114 -0
- shinyreact-0.1.0/pkg-py/CHANGELOG.md +24 -0
- shinyreact-0.1.0/pkg-py/README.md +87 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-build-app/SKILL.md +433 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-build-app/references/bookmarking.md +24 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-build-app/references/debugging.md +29 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-build-app/references/modules.md +118 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-build-app/references/no-build.md +35 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-build-app/references/shiny-outputs.md +74 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-build-app/references/testing.md +188 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/.agents/skills/shinyreact-convert-app/SKILL.md +282 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/__init__.py +24 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_app.py +205 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_bookmark.py +86 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_dep.py +93 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_dep_discovery.py +76 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_input_handler.py +42 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_page.py +656 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_protocol.py +17 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_reactive_output.py +19 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/_send_message.py +40 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/playwright.py +204 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/www/shinyreact.css +1 -0
- shinyreact-0.1.0/pkg-py/src/shinyreact/www/shinyreact.js +49 -0
- shinyreact-0.1.0/pyproject.toml +152 -0
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
# Byte-compiled / optimized / DLL files
|
|
2
|
+
__pycache__/
|
|
3
|
+
*.py[codz]
|
|
4
|
+
*$py.class
|
|
5
|
+
|
|
6
|
+
# C extensions
|
|
7
|
+
*.so
|
|
8
|
+
|
|
9
|
+
# Distribution / packaging
|
|
10
|
+
.Python
|
|
11
|
+
build/
|
|
12
|
+
develop-eggs/
|
|
13
|
+
dist/
|
|
14
|
+
!pkg-js/dist/
|
|
15
|
+
pkg-js/dist-npm/
|
|
16
|
+
downloads/
|
|
17
|
+
eggs/
|
|
18
|
+
.eggs/
|
|
19
|
+
lib/
|
|
20
|
+
!pkg-r/inst/lib/
|
|
21
|
+
!examples/*/src/lib/
|
|
22
|
+
lib64/
|
|
23
|
+
parts/
|
|
24
|
+
sdist/
|
|
25
|
+
var/
|
|
26
|
+
wheels/
|
|
27
|
+
share/python-wheels/
|
|
28
|
+
*.egg-info/
|
|
29
|
+
.installed.cfg
|
|
30
|
+
*.egg
|
|
31
|
+
MANIFEST
|
|
32
|
+
|
|
33
|
+
# PyInstaller
|
|
34
|
+
# Usually these files are written by a python script from a template
|
|
35
|
+
# before PyInstaller builds the exe, so as to inject date/other infos into it.
|
|
36
|
+
*.manifest
|
|
37
|
+
*.spec
|
|
38
|
+
|
|
39
|
+
# Installer logs
|
|
40
|
+
pip-log.txt
|
|
41
|
+
pip-delete-this-directory.txt
|
|
42
|
+
|
|
43
|
+
# Unit test / coverage reports
|
|
44
|
+
htmlcov/
|
|
45
|
+
.tox/
|
|
46
|
+
.nox/
|
|
47
|
+
.coverage
|
|
48
|
+
.coverage.*
|
|
49
|
+
.cache
|
|
50
|
+
nosetests.xml
|
|
51
|
+
coverage.xml
|
|
52
|
+
*.cover
|
|
53
|
+
*.py.cover
|
|
54
|
+
.hypothesis/
|
|
55
|
+
.pytest_cache/
|
|
56
|
+
cover/
|
|
57
|
+
|
|
58
|
+
# Translations
|
|
59
|
+
*.mo
|
|
60
|
+
*.pot
|
|
61
|
+
|
|
62
|
+
# Django stuff:
|
|
63
|
+
*.log
|
|
64
|
+
local_settings.py
|
|
65
|
+
db.sqlite3
|
|
66
|
+
db.sqlite3-journal
|
|
67
|
+
|
|
68
|
+
# Flask stuff:
|
|
69
|
+
instance/
|
|
70
|
+
.webassets-cache
|
|
71
|
+
|
|
72
|
+
# Scrapy stuff:
|
|
73
|
+
.scrapy
|
|
74
|
+
|
|
75
|
+
# Sphinx documentation
|
|
76
|
+
docs/_build/
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
# PyBuilder
|
|
80
|
+
.pybuilder/
|
|
81
|
+
target/
|
|
82
|
+
|
|
83
|
+
# Jupyter Notebook
|
|
84
|
+
.ipynb_checkpoints
|
|
85
|
+
|
|
86
|
+
# IPython
|
|
87
|
+
profile_default/
|
|
88
|
+
ipython_config.py
|
|
89
|
+
|
|
90
|
+
# pyenv
|
|
91
|
+
# For a library or package, you might want to ignore these files since the code is
|
|
92
|
+
# intended to run in multiple environments; otherwise, check them in:
|
|
93
|
+
# .python-version
|
|
94
|
+
|
|
95
|
+
# pipenv
|
|
96
|
+
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
|
|
97
|
+
# However, in case of collaboration, if having platform-specific dependencies or dependencies
|
|
98
|
+
# having no cross-platform support, pipenv may install dependencies that don't work, or not
|
|
99
|
+
# install all needed dependencies.
|
|
100
|
+
#Pipfile.lock
|
|
101
|
+
|
|
102
|
+
# UV
|
|
103
|
+
# Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
|
|
104
|
+
# This is especially recommended for binary packages to ensure reproducibility, and is more
|
|
105
|
+
# commonly ignored for libraries.
|
|
106
|
+
uv.lock
|
|
107
|
+
|
|
108
|
+
# poetry
|
|
109
|
+
# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
|
|
110
|
+
# This is especially recommended for binary packages to ensure reproducibility, and is more
|
|
111
|
+
# commonly ignored for libraries.
|
|
112
|
+
# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
|
|
113
|
+
#poetry.lock
|
|
114
|
+
#poetry.toml
|
|
115
|
+
|
|
116
|
+
# pdm
|
|
117
|
+
# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
|
|
118
|
+
# pdm recommends including project-wide configuration in pdm.toml, but excluding .pdm-python.
|
|
119
|
+
# https://pdm-project.org/en/latest/usage/project/#working-with-version-control
|
|
120
|
+
#pdm.lock
|
|
121
|
+
#pdm.toml
|
|
122
|
+
.pdm-python
|
|
123
|
+
.pdm-build/
|
|
124
|
+
|
|
125
|
+
# pixi
|
|
126
|
+
# Similar to Pipfile.lock, it is generally recommended to include pixi.lock in version control.
|
|
127
|
+
#pixi.lock
|
|
128
|
+
# Pixi creates a virtual environment in the .pixi directory, just like venv module creates one
|
|
129
|
+
# in the .venv directory. It is recommended not to include this directory in version control.
|
|
130
|
+
.pixi
|
|
131
|
+
|
|
132
|
+
# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
|
|
133
|
+
__pypackages__/
|
|
134
|
+
|
|
135
|
+
# Celery stuff
|
|
136
|
+
celerybeat-schedule
|
|
137
|
+
celerybeat.pid
|
|
138
|
+
|
|
139
|
+
# SageMath parsed files
|
|
140
|
+
*.sage.py
|
|
141
|
+
|
|
142
|
+
# Environments
|
|
143
|
+
.env
|
|
144
|
+
.envrc
|
|
145
|
+
.venv
|
|
146
|
+
env/
|
|
147
|
+
venv/
|
|
148
|
+
ENV/
|
|
149
|
+
env.bak/
|
|
150
|
+
venv.bak/
|
|
151
|
+
|
|
152
|
+
# Spyder project settings
|
|
153
|
+
.spyderproject
|
|
154
|
+
.spyproject
|
|
155
|
+
|
|
156
|
+
# Rope project settings
|
|
157
|
+
.ropeproject
|
|
158
|
+
|
|
159
|
+
# mkdocs documentation
|
|
160
|
+
/site
|
|
161
|
+
|
|
162
|
+
# mypy
|
|
163
|
+
.mypy_cache/
|
|
164
|
+
.dmypy.json
|
|
165
|
+
dmypy.json
|
|
166
|
+
|
|
167
|
+
# Pyre type checker
|
|
168
|
+
.pyre/
|
|
169
|
+
|
|
170
|
+
# pytype static type analyzer
|
|
171
|
+
.pytype/
|
|
172
|
+
|
|
173
|
+
# Cython debug symbols
|
|
174
|
+
cython_debug/
|
|
175
|
+
|
|
176
|
+
# PyCharm
|
|
177
|
+
# JetBrains specific template is maintained in a separate JetBrains.gitignore that can
|
|
178
|
+
# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
|
|
179
|
+
# and can be added to the global gitignore or merged into this file. For a more nuclear
|
|
180
|
+
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
|
|
181
|
+
#.idea/
|
|
182
|
+
|
|
183
|
+
# Abstra
|
|
184
|
+
# Abstra is an AI-powered process automation framework.
|
|
185
|
+
# Ignore directories containing user credentials, local state, and settings.
|
|
186
|
+
# Learn more at https://abstra.io/docs
|
|
187
|
+
.abstra/
|
|
188
|
+
|
|
189
|
+
# Visual Studio Code
|
|
190
|
+
# Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore
|
|
191
|
+
# that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
|
|
192
|
+
# and can be added to the global gitignore or merged into this file. However, if you prefer,
|
|
193
|
+
# you could uncomment the following to ignore the entire vscode folder
|
|
194
|
+
# .vscode/
|
|
195
|
+
|
|
196
|
+
# Ruff stuff:
|
|
197
|
+
.ruff_cache/
|
|
198
|
+
|
|
199
|
+
# PyPI configuration file
|
|
200
|
+
.pypirc
|
|
201
|
+
|
|
202
|
+
# Cursor
|
|
203
|
+
# Cursor is an AI-powered code editor. `.cursorignore` specifies files/directories to
|
|
204
|
+
# exclude from AI features like autocomplete and code analysis. Recommended for sensitive data
|
|
205
|
+
# refer to https://docs.cursor.com/context/ignore-files
|
|
206
|
+
.cursorignore
|
|
207
|
+
.cursorindexingignore
|
|
208
|
+
|
|
209
|
+
# Marimo
|
|
210
|
+
marimo/_static/
|
|
211
|
+
marimo/_lsp/
|
|
212
|
+
__marimo__/
|
|
213
|
+
|
|
214
|
+
# Playwright MCP
|
|
215
|
+
.playwright-mcp/
|
|
216
|
+
|
|
217
|
+
# Playwright e2e test artifacts (traces, screenshots, videos, HTML report)
|
|
218
|
+
test-results/
|
|
219
|
+
playwright-report/
|
|
220
|
+
.playwright/
|
|
221
|
+
|
|
222
|
+
# Claude Code local lock files
|
|
223
|
+
.claude/*.lock
|
|
224
|
+
|
|
225
|
+
# Node
|
|
226
|
+
node_modules/
|
|
227
|
+
|
|
228
|
+
# Built assets in shiny-react upstream examples
|
|
229
|
+
examples/shiny-react-upstream/*/www/
|
|
230
|
+
shinyui-prototype.png
|
shinyreact-0.1.0/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Posit Software, PBC
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
Metadata-Version: 2.5
|
|
2
|
+
Name: shinyreact
|
|
3
|
+
Version: 0.1.0
|
|
4
|
+
Summary: Shiny UI infrastructure for React-based component rendering
|
|
5
|
+
Project-URL: Homepage, https://posit-dev.github.io/shinyreact/py/
|
|
6
|
+
Project-URL: Documentation, https://posit-dev.github.io/shinyreact/py/
|
|
7
|
+
Project-URL: Repository, https://github.com/posit-dev/shinyreact
|
|
8
|
+
Project-URL: Changelog, https://github.com/posit-dev/shinyreact/blob/main/pkg-py/CHANGELOG.md
|
|
9
|
+
Project-URL: Issues, https://github.com/posit-dev/shinyreact/issues
|
|
10
|
+
Author-email: Barret Schloerke <barret@posit.co>
|
|
11
|
+
License-Expression: MIT
|
|
12
|
+
License-File: LICENSE
|
|
13
|
+
Keywords: dashboard,react,shiny,web
|
|
14
|
+
Classifier: Development Status :: 4 - Beta
|
|
15
|
+
Classifier: Intended Audience :: Developers
|
|
16
|
+
Classifier: Programming Language :: Python :: 3
|
|
17
|
+
Classifier: Programming Language :: Python :: 3.10
|
|
18
|
+
Classifier: Programming Language :: Python :: 3.11
|
|
19
|
+
Classifier: Programming Language :: Python :: 3.12
|
|
20
|
+
Classifier: Programming Language :: Python :: 3.13
|
|
21
|
+
Classifier: Programming Language :: Python :: 3.14
|
|
22
|
+
Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
|
|
23
|
+
Requires-Python: >=3.10
|
|
24
|
+
Requires-Dist: htmltools>=0.7.0
|
|
25
|
+
Requires-Dist: shiny>=1.8.0
|
|
26
|
+
Description-Content-Type: text/markdown
|
|
27
|
+
|
|
28
|
+
# shinyreact <a href="https://posit-dev.github.io/shinyreact/"><img src="https://raw.githubusercontent.com/posit-dev/shinyreact/main/pkg-py/docs/logo.svg" align="right" height="138" alt="shinyreact website" /></a>
|
|
29
|
+
|
|
30
|
+
<!-- badges: start -->
|
|
31
|
+
[](https://github.com/posit-dev/shinyreact/actions/workflows/check-py.yaml)
|
|
32
|
+
<!-- badges: end -->
|
|
33
|
+
|
|
34
|
+
shinyreact lets you write the UI of a [Shiny for Python](https://shiny.posit.co/py/) app as a [React](https://react.dev/) client you own, while the Python server contains only reactive computation. It provides the bridge between the two and ships zero UI components itself. The same [JavaScript bundle](https://posit-dev.github.io/shinyreact/js/) backs the [R package](https://posit-dev.github.io/shinyreact/r/), so one React client works against an `app.py` or an `app.R` server. The [full site](https://posit-dev.github.io/shinyreact/) covers all three.
|
|
35
|
+
|
|
36
|
+
## Installation
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
pip install shinyreact
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Or install the development version from GitHub:
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
pip install "git+https://github.com/posit-dev/shinyreact.git"
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Usage
|
|
49
|
+
|
|
50
|
+
`set_react_page()` discovers `www/ui.js` (and `www/ui.css`, if present) next to the app file and serves them as the page. `@reactive_output` publishes any JSON-serializable value to the client's `useShinyOutputValue()` hook:
|
|
51
|
+
|
|
52
|
+
```python
|
|
53
|
+
from shiny.express import input
|
|
54
|
+
from shinyreact import reactive_output, set_react_page
|
|
55
|
+
|
|
56
|
+
set_react_page()
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
@reactive_output
|
|
60
|
+
def greeting():
|
|
61
|
+
return f"Hello, {input.name()}!"
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
In Core mode, `page_react()` is the `ui` argument instead:
|
|
65
|
+
|
|
66
|
+
```python
|
|
67
|
+
from shiny import App
|
|
68
|
+
from shinyreact import page_react, reactive_output
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
def server(input, output, session):
|
|
72
|
+
@reactive_output
|
|
73
|
+
def greeting():
|
|
74
|
+
return f"Hello, {input.name()}!"
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
app = App(page_react(), server)
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
The matching `www/ui.js`:
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
const { React, ReactDOM, useShinyInput, useShinyOutputValue } = window.shinyreact;
|
|
84
|
+
const h = React.createElement;
|
|
85
|
+
|
|
86
|
+
function App() {
|
|
87
|
+
const [name, setName] = useShinyInput("name", "world");
|
|
88
|
+
const greeting = useShinyOutputValue("greeting");
|
|
89
|
+
return h(
|
|
90
|
+
"div",
|
|
91
|
+
null,
|
|
92
|
+
h("input", { value: name, onChange: (e) => setName(e.target.value) }),
|
|
93
|
+
h("p", null, greeting)
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
ReactDOM.createRoot(document.body.appendChild(document.createElement("div"))).render(h(App));
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Try a complete app:
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
git clone https://github.com/posit-dev/shinyreact
|
|
104
|
+
shiny run shinyreact/examples/01-hello/app.py
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Learn more
|
|
108
|
+
|
|
109
|
+
- [Get started](https://posit-dev.github.io/shinyreact/) walks through the `ui.tsx` pattern: inputs, outputs, messages, and embedding traditional Shiny renderers.
|
|
110
|
+
- [TSX files and JavaScript build tools](https://posit-dev.github.io/shinyreact/articles/tsx-and-build-tools.html) explains `.tsx`, JSX, TypeScript, and what `npm run build` does.
|
|
111
|
+
- [Client hooks](https://posit-dev.github.io/shinyreact/articles/hooks.html) lists everything at `window.shinyreact`.
|
|
112
|
+
- [Testing](https://posit-dev.github.io/shinyreact/articles/testing.html) covers shiny's `local_server` pytest fixture for driving a server with no browser, and `WireTap` for wire payloads in Playwright tests.
|
|
113
|
+
- [Agent Skills](https://posit-dev.github.io/shinyreact/articles/agent-skills.html) explains the skills that ship with the package for coding agents.
|
|
114
|
+
- The [examples catalog](https://github.com/posit-dev/shinyreact/blob/main/examples/README.md) lists runnable apps from no-build to Vite + HMR.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 0.1.0
|
|
4
|
+
|
|
5
|
+
* Initial PyPI release.
|
|
6
|
+
|
|
7
|
+
* Server-side plumbing for the `ui.tsx` pattern: the UI is a React client you
|
|
8
|
+
own, and the Shiny server contains only reactive computation.
|
|
9
|
+
`@reactive_output` sends JSON to `useShinyOutputValue()` hooks,
|
|
10
|
+
`send_message()` reaches `useShinyMessageHandler()`, and `set_react_page()`
|
|
11
|
+
(Express), `ReactApp` (Core), `page_react()`, `page_react_html()`,
|
|
12
|
+
`page_bare()`, and `page_react_dep()` bootstrap the client.
|
|
13
|
+
|
|
14
|
+
* Renderer dependencies of traditional Shiny outputs hosted inside a React tree
|
|
15
|
+
are discovered automatically, so `ShinyOutput` works with zero configuration.
|
|
16
|
+
|
|
17
|
+
* Bookmark restore is delivered through the `#shinyreact-config` script tag,
|
|
18
|
+
and the client asserts the wire-protocol major version at boot.
|
|
19
|
+
|
|
20
|
+
* `shinyreact.default` and `shinyreact.asis` input handlers give Python and R
|
|
21
|
+
the same view of the JSON a hook sends.
|
|
22
|
+
|
|
23
|
+
* `shinyreact.playwright.WireTap` records the Shiny websocket for end-to-end
|
|
24
|
+
tests.
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# shinyreact <a href="https://posit-dev.github.io/shinyreact/"><img src="https://raw.githubusercontent.com/posit-dev/shinyreact/main/pkg-py/docs/logo.svg" align="right" height="138" alt="shinyreact website" /></a>
|
|
2
|
+
|
|
3
|
+
<!-- badges: start -->
|
|
4
|
+
[](https://github.com/posit-dev/shinyreact/actions/workflows/check-py.yaml)
|
|
5
|
+
<!-- badges: end -->
|
|
6
|
+
|
|
7
|
+
shinyreact lets you write the UI of a [Shiny for Python](https://shiny.posit.co/py/) app as a [React](https://react.dev/) client you own, while the Python server contains only reactive computation. It provides the bridge between the two and ships zero UI components itself. The same [JavaScript bundle](https://posit-dev.github.io/shinyreact/js/) backs the [R package](https://posit-dev.github.io/shinyreact/r/), so one React client works against an `app.py` or an `app.R` server. The [full site](https://posit-dev.github.io/shinyreact/) covers all three.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pip install shinyreact
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Or install the development version from GitHub:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pip install "git+https://github.com/posit-dev/shinyreact.git"
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
`set_react_page()` discovers `www/ui.js` (and `www/ui.css`, if present) next to the app file and serves them as the page. `@reactive_output` publishes any JSON-serializable value to the client's `useShinyOutputValue()` hook:
|
|
24
|
+
|
|
25
|
+
```python
|
|
26
|
+
from shiny.express import input
|
|
27
|
+
from shinyreact import reactive_output, set_react_page
|
|
28
|
+
|
|
29
|
+
set_react_page()
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
@reactive_output
|
|
33
|
+
def greeting():
|
|
34
|
+
return f"Hello, {input.name()}!"
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
In Core mode, `page_react()` is the `ui` argument instead:
|
|
38
|
+
|
|
39
|
+
```python
|
|
40
|
+
from shiny import App
|
|
41
|
+
from shinyreact import page_react, reactive_output
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
def server(input, output, session):
|
|
45
|
+
@reactive_output
|
|
46
|
+
def greeting():
|
|
47
|
+
return f"Hello, {input.name()}!"
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
app = App(page_react(), server)
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
The matching `www/ui.js`:
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
const { React, ReactDOM, useShinyInput, useShinyOutputValue } = window.shinyreact;
|
|
57
|
+
const h = React.createElement;
|
|
58
|
+
|
|
59
|
+
function App() {
|
|
60
|
+
const [name, setName] = useShinyInput("name", "world");
|
|
61
|
+
const greeting = useShinyOutputValue("greeting");
|
|
62
|
+
return h(
|
|
63
|
+
"div",
|
|
64
|
+
null,
|
|
65
|
+
h("input", { value: name, onChange: (e) => setName(e.target.value) }),
|
|
66
|
+
h("p", null, greeting)
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
ReactDOM.createRoot(document.body.appendChild(document.createElement("div"))).render(h(App));
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Try a complete app:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
git clone https://github.com/posit-dev/shinyreact
|
|
77
|
+
shiny run shinyreact/examples/01-hello/app.py
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Learn more
|
|
81
|
+
|
|
82
|
+
- [Get started](https://posit-dev.github.io/shinyreact/) walks through the `ui.tsx` pattern: inputs, outputs, messages, and embedding traditional Shiny renderers.
|
|
83
|
+
- [TSX files and JavaScript build tools](https://posit-dev.github.io/shinyreact/articles/tsx-and-build-tools.html) explains `.tsx`, JSX, TypeScript, and what `npm run build` does.
|
|
84
|
+
- [Client hooks](https://posit-dev.github.io/shinyreact/articles/hooks.html) lists everything at `window.shinyreact`.
|
|
85
|
+
- [Testing](https://posit-dev.github.io/shinyreact/articles/testing.html) covers shiny's `local_server` pytest fixture for driving a server with no browser, and `WireTap` for wire payloads in Playwright tests.
|
|
86
|
+
- [Agent Skills](https://posit-dev.github.io/shinyreact/articles/agent-skills.html) explains the skills that ship with the package for coding agents.
|
|
87
|
+
- The [examples catalog](https://github.com/posit-dev/shinyreact/blob/main/examples/README.md) lists runnable apps from no-build to Vite + HMR.
|