Skip to content

perf: update the example to demonstrate bidirectional control capability #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
insistence merged 2 commits into from
Nov 20, 2025
Merged

perf: update the example to demonstrate bidirectional control capability #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35c4da8
chore: update .gitignore
insistence Nov 20, 2025
de53974
perf: update the example to demonstrate bidirectional control capability
insistence Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,3 +205,6 @@ cython_debug/
marimo/_static/
marimo/_lsp/
__marimo__/

assets/
_vite
103 changes: 43 additions & 60 deletions example_react.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div id="react-app" style={{ margin: "20px" }}>
<h1 style={{ color: "#42b883" }}>{message}</h1>
<button onClick={updateMessage}>Click me!</button>
<div>
<button id="control-dash-button" onClick={updateDash}>Control Dash</button>
</div>
<div hidden>
<button id="control-react-button" onClick={updateMessage}>Control Vue</button>
</div>
</div>
);
};
Expand Down Expand Up @@ -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)
Expand All @@ -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'),
)


Expand Down
105 changes: 44 additions & 61 deletions example_vue.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@
f.write("""<template>
<div id="vue-app">
<h1>{{ message }}</h1>
<button @click="updateMessage">Click me!</button>
<div>
<button id="control-dash-button" @click="updateDash">Control Dash</button>
</div>
<div hidden>
<button id="control-vue-button" @click="updateMessage">Control Vue</button>
</div>
</div>
</template>

Expand All @@ -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!";
};
</script>

Expand Down Expand Up @@ -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)
Expand All @@ -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'),
)


Expand Down
Loading