Fix preview in SlintPad and VS code web extension (#2871)

The interpreter now creates the window typically in show(), so similar
to commit a8fcb5a make show() return a
promise and invoke show() from within the event loop.

Amends d98c677

api/wasm-interpreter/src/lib.rs

@@ -184,8 +184,6 @@ impl WrappedCompiledComp {
                     .unwrap_throw();
             }
         })).unchecked_into::<InstancePromise>())
-
-        //Ok()
     }
     /// Creates this compiled component in the canvas of the provided instance.
     /// For this to work, the provided instance needs to be visible (show() must've been
@@ -213,8 +211,55 @@ impl Clone for WrappedInstance {
 impl WrappedInstance {
     /// Marks this instance for rendering and input handling.
     #[wasm_bindgen]
-    pub fn show(&self) -> Result<(), JsValue> {
-        self.0.show().map_err(|e| -> JsValue { format!("{e}").into() })
+    pub fn show(&self) -> Result<js_sys::Promise, JsValue> {
+        Ok(js_sys::Promise::new(&mut |resolve, reject| {
+            let inst_weak = self.0.as_weak();
+
+            if let Err(e) = slint_interpreter::invoke_from_event_loop({
+                let resolve = send_wrapper::SendWrapper::new(resolve);
+                let reject = send_wrapper::SendWrapper::new(reject.clone());
+                move || {
+                    let resolve = resolve.take();
+                    let reject = reject.take();
+                    match inst_weak.upgrade() {
+                        Some(instance) => match instance.show() {
+                            Ok(()) => {
+                                resolve.call0(&JsValue::UNDEFINED).unwrap_throw();
+                            }
+                            Err(e) => {
+                                reject
+                                    .call1(
+                                        &JsValue::UNDEFINED,
+                                        &JsValue::from(format!(
+                                            "Calling show() on ComponentInstance failed: {e}"
+                                        )),
+                                    )
+                                    .unwrap_throw();
+                            }
+                        },
+                        None => {
+                            reject
+                            .call1(
+                                &JsValue::UNDEFINED,
+                                &JsValue::from(format!(
+                                    "Calling show() on ComponentInstance failed because instance was deleted too soon"
+                                )),
+                            )
+                            .unwrap_throw();
+                        }
+                    }
+                }
+            }) {
+                reject
+                .call1(
+                    &JsValue::UNDEFINED,
+                    &JsValue::from(
+                        format!("internal error: Failed to queue closure for event loop invocation: {e}"),
+                    ),
+                )
+                .unwrap_throw();
+            }
+        }))
     }
     /// Hides this instance and prevents further updates of the canvas element.
     #[wasm_bindgen]

docs/resources/slint-docs-preview.html

@@ -26,7 +26,7 @@
         }
         if (component !== undefined) {
             let instance = await component.create(canvas_id);
-            instance.show();
+            await instance.show();
             all_instances.push(instance);
         }
     }

editors/vscode/src/wasm_preview.ts

@@ -245,7 +245,7 @@ function getPreviewHtml(slint_wasm_interpreter_url: Uri): string {
                     // ignore winit event loop exception
                 }
                 current_instance = await component.create("slint_canvas");
-                current_instance.show();
+                await current_instance.show();
             }
             current_instance?.set_design_mode(design_mode);
             current_instance?.on_element_selected(element_selected);

tools/slintpad/src/lsp.ts

@@ -288,7 +288,7 @@ class PreviewerBackend {
                     is_event_loop_running = true; // Assume the winit caused the exception and that the event loop is up now
                 }
                 this.#instance = await component.create(this.canvas_id!); // eslint-disable-line
-                this.#instance.show();
+                await this.#instance.show();
             } else {
                 this.#instance = component.create_with_existing_window(
                     this.#instance,