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(""" @@ -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'), )