Passing state into a new window

[pigeonhands]

I'm looking for a way to send data to a newly created window while using svelte. On the main view, a button is pressed to open a new window that shows information for a specific item.
This is my current method, but it is not elegant

App.svelte

<script>
let panelID = "";

listen('set_as_panel', e => {
        emit('log', "got panel id "+e.payload)
	panelID = e.payload;
})
invoke('window_loaded')
</script>

 <main>
{#if panelID }
    <PanelView panelID={panelID} />
{:else}
    <MainWindowView />
 {/if}
</main>

MainView.svelte

function openPanel(panelID) {
    const webview = new WebviewWindow(panelID, {
        url: 'index.html',
        title: 'Panel View',
        width: 600,
        height: 400,
    })
    webview.once('window_loaded', e => {
        webview.emit('set_as_panel', panelID);
    });
    webview.once('tauri://error',async function (e) {
        const webview = WebviewWindow.getByLabel(panelID)
        if(webview){
          await webview.setFocus();
        }
    })
}

main.rs

#[tauri::command]
fn window_loaded(w: Window){
  w.emit("window_loaded", "").unwrap();
}

---

Ideally, there would be an option to pass properties into the window when created. For example:

MainView.svelte

function openPanel(panelID) {
    const webview = new WebviewWindow(panelID, {
        url: 'index.html',
        title: panelID,
        width: 600,
        height: 400,
        props: { panelID: panelID } //set window properties
    })
    ...
}

App.svelte

<script> 
    import { getProps } from '@tauri-apps/api/window'
    
    let { panelID } = getProps();
    ...
</script>

[paulcaras]

I'm having this kind of problem now in Vue. I have tried using localStorage but there seems to be a bug where the child window is an update behind the main window, thus, the main window storage is updated whereas the child isn't. On the next loop, the main window is updated on the latest data, meanwhile the child has just updated it's storage from the previous value of the main.

[happymingjieli]

Have you solved this problem？ I have the same question

[pratyushmittal]

One way to pass properties to a new window is through GET parameters in the url.

Example:

function openPanel(panelID) {
    const webview = new WebviewWindow(panelID, {
        url: 'index.html?foo=bar&baz&panelID=3',
        title: panelID,
        width: 600,
        height: 400
    })
    ...
}

Check url: 'index.html?foo=bar&baz&panelID=3',