diff --git a/.gitignore b/.gitignore
index b7faf40..e0f570c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -205,3 +205,6 @@ cython_debug/
marimo/_static/
marimo/_lsp/
__marimo__/
+
+assets/
+_vite
diff --git a/example_react.py b/example_react.py
index a04f5f3..e88ff28 100644
--- a/example_react.py
+++ b/example_react.py
@@ -14,14 +14,24 @@
const App = () => {
const [message, setMessage] = useState("Hello from React!");
+ const updateDash = () => {
+ setMessage("Hello from React!");
+ window.dash_clientside.set_props('dash-title', { children: 'Hello from React!' });
+ };
+
const updateMessage = () => {
- setMessage("React is working!");
+ setMessage("Hello from Dash!");
};
return (
{message}
-
+
+
+
+
+
+
);
};
@@ -81,7 +91,8 @@
NpmPackage('react'),
NpmPackage('react-dom'),
],
- clean_after=False,
+ download_node=True,
+ clean_after=True,
)
# Call setup BEFORE creating Dash app (as required by the plugin architecture)
@@ -99,74 +110,46 @@
html.H1('Vite Plugin Test - React Support', id='header'),
html.P('This tests the Vite plugin with React support.', id='paragraph'),
# Container for React app
- html.Div(id='react-container'),
- html.Div(id='react-out'),
- html.Div(id='js-test-result'),
- html.Button('Test JS', id='js-test-button', n_clicks=0),
- html.Button('Test React', id='react-test-button', n_clicks=0),
+ html.Div(
+ [
+ 'The content from React',
+ html.Div(id='react-container'),
+ ]
+ ),
+ html.Div(
+ [
+ 'The content from Dash',
+ html.Div(
+ [html.H1('Hello from Dash!', id='dash-title'), html.Button('Control React', id='dash-button')],
+ id='dash-app',
+ style={'margin': '20px'},
+ ),
+ ],
+ id='dash-container',
+ ),
]
)
-# Add callback to test JavaScript execution
-app.clientside_callback(
- """
- function(n_clicks) {
- if (n_clicks > 0) {
- // Test if global variable exists
- if (typeof window.testVariable !== 'undefined' && window.testVariable === 'VitePluginReactTest') {
- return 'JavaScript behavior is working correctly';
- } else {
- return 'Global variable test failed';
- }
- }
- return 'Click button to test JavaScript';
- }
- """,
- Output('js-test-result', 'children'),
- Input('js-test-button', 'n_clicks'),
-)
# Add callback to test React functionality with a simpler approach
app.clientside_callback(
"""
- async function(n_clicks) {
- function delay(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
- }
- async function testReactApp() {
- const reactApp = document.getElementById('react-app');
- if (reactApp) {
- const button = reactApp.querySelector('button');
- if (button) {
- const originalText = reactApp.querySelector('h1').textContent;
- button.click();
- await delay(0);
- const newText = reactApp.querySelector('h1').textContent;
- if (newText === 'React is working!') {
- return 'React is working correctly: ' + newText;
- } else {
- throw new Error('React button click failed. Original: ' + originalText + ', New: ' + newText);
- }
- } else {
- throw new Error('React button not found');
- }
- } else {
- throw new Error('React app not found');
- }
- }
- if (n_clicks > 0) {
- try {
- const result = await testReactApp();
- return result;
- } catch (error) {
- return error.message;
+ function(n_clicks) {
+ if (n_clicks > 0) {
+ const reactApp = document.getElementById('react-app');
+ if (reactApp) {
+ const button = reactApp.querySelector('#control-react-button');
+ if (button) {
+ button.click();
+ return 'Hello from Dash!';
}
}
- return 'Click button to test React';
+ }
+ return 'Hello from Dash!';
}
""",
- Output('react-out', 'children'),
- Input('react-test-button', 'n_clicks'),
+ Output('dash-title', 'children'),
+ Input('dash-button', 'n_clicks'),
)
diff --git a/example_vue.py b/example_vue.py
index ae6a5c3..ed487df 100644
--- a/example_vue.py
+++ b/example_vue.py
@@ -12,7 +12,12 @@
f.write("""
{{ message }}
-
+
+
+
+
+
+
@@ -21,8 +26,13 @@
const message = ref("Hello from Vue!");
+const updateDash = () => {
+ message.value = "Hello from Vue!";
+ window.dash_clientside.set_props('dash-title', { children: 'Hello from Vue!' });
+};
+
const updateMessage = () => {
- message.value = "Vue is working!";
+ message.value = "Hello from Dash!";
};
@@ -84,9 +94,10 @@
build_assets_paths=['assets/js', 'assets/vue'],
entry_js_paths=['assets/js/main.js'],
npm_packages=[
- NpmPackage('vue'), # Removed version to use default/latest
+ NpmPackage('vue'),
],
- clean_after=False,
+ download_node=True,
+ clean_after=True,
)
# Call setup BEFORE creating Dash app (as required by the plugin architecture)
@@ -104,74 +115,46 @@
html.H1('Vite Plugin Test - Vue Support', id='header'),
html.P('This tests the Vite plugin with Vue support.', id='paragraph'),
# Container for Vue app
- html.Div(id='vue-container'),
- html.Div(id='vue-out'),
- html.Div(id='js-test-result'),
- html.Button('Test JS', id='js-test-button', n_clicks=0),
- html.Button('Test Vue', id='vue-test-button', n_clicks=0),
+ html.Div(
+ [
+ 'The content from Vue',
+ html.Div(id='vue-container'),
+ ]
+ ),
+ html.Div(
+ [
+ 'The content from Dash',
+ html.Div(
+ [html.H1('Hello from Dash!', id='dash-title'), html.Button('Control Vue', id='dash-button')],
+ id='dash-app',
+ style={'margin': '20px'},
+ ),
+ ],
+ id='dash-container',
+ ),
]
)
-# Add callback to test JavaScript execution
-app.clientside_callback(
- """
- function(n_clicks) {
- if (n_clicks > 0) {
- // Test if global variable exists
- if (typeof window.testVariable !== 'undefined' && window.testVariable === 'VitePluginVueTest') {
- return 'JavaScript behavior is working correctly';
- } else {
- return 'Global variable test failed';
- }
- }
- return 'Click button to test JavaScript';
- }
- """,
- Output('js-test-result', 'children'),
- Input('js-test-button', 'n_clicks'),
-)
# Add callback to test Vue functionality with a simpler approach
app.clientside_callback(
"""
- async function(n_clicks) {
- function delay(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
- }
- async function testVueApp() {
- const vueApp = document.getElementById('vue-app');
- if (vueApp) {
- const button = vueApp.querySelector('button');
- if (button) {
- const originalText = vueApp.querySelector('h1').textContent;
- button.click();
- await delay(0);
- const newText = vueApp.querySelector('h1').textContent;
- if (newText === 'Vue is working!') {
- return 'Vue is working correctly: ' + newText;
- } else {
- throw new Error('Vue button click failed. Original: ' + originalText + ', New: ' + newText);
- }
- } else {
- throw new Error('Vue button not found');
- }
- } else {
- throw new Error('Vue app not found');
- }
- }
- if (n_clicks > 0) {
- try {
- const result = await testVueApp();
- return result;
- } catch (error) {
- return error.message;
+ function(n_clicks) {
+ if (n_clicks > 0) {
+ const vueApp = document.getElementById('vue-app');
+ if (vueApp) {
+ const button = vueApp.querySelector('#control-vue-button');
+ if (button) {
+ button.click();
+ return 'Hello from Dash!';
}
}
- return 'Click button to test Vue';
+ }
+ return 'Hello from Dash!';
}
""",
- Output('vue-out', 'children'),
- Input('vue-test-button', 'n_clicks'),
+ Output('dash-title', 'children'),
+ Input('dash-button', 'n_clicks'),
)