From 00dfc32a2db55cb7330da5d714bd9979aab1e45f Mon Sep 17 00:00:00 2001
From: situ2001 <yongcong2001@outlook.com>
Date: Wed, 23 Apr 2025 10:56:52 +0800
Subject: [PATCH] docs(webview): corrected examples to ensure webview is
 created after window initialization (#13279)

* fix: typo

* docs(webview): corrected examples to ensure webview is created after window initialization
---
 packages/api/src/webview.ts | 94 ++++++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 42 deletions(-)

diff --git a/packages/api/src/webview.ts b/packages/api/src/webview.ts
index 6a2857995..971d3fa54 100644
--- a/packages/api/src/webview.ts
+++ b/packages/api/src/webview.ts
@@ -106,39 +106,45 @@ export type WebviewLabel = string
  *
  * const appWindow = new Window('uniqueLabel');
  *
- * // loading embedded asset:
- * const webview = new Webview(appWindow, 'theUniqueLabel', {
- *   url: 'path/to/page.html',
+ * appWindow.once('tauri://created', async function () {
+ *   // `new Webview` Should be called after the window is successfully created,
+ *   // or webview may not be attached to the window since window is not created yet.
  *
- *   // create a webview with specific logical position and size
- *   x: 0,
- *   y: 0,
- *   width: 800,
- *   height: 600,
- * });
- * // alternatively, load a remote URL:
- * const webview = new Webview(appWindow, 'theUniqueLabel', {
- *   url: 'https://github.com/tauri-apps/tauri'
+ *   // loading embedded asset:
+ *   const webview = new Webview(appWindow, 'theUniqueLabel', {
+ *     url: 'path/to/page.html',
  *
- *   // create a webview with specific logical position and size
- *   x: 0,
- *   y: 0,
- *   width: 800,
- *   height: 600,
- * });
+ *     // create a webview with specific logical position and size
+ *     x: 0,
+ *     y: 0,
+ *     width: 800,
+ *     height: 600,
+ *   });
+ *   // alternatively, load a remote URL:
+ *   const webview = new Webview(appWindow, 'theUniqueLabel', {
+ *     url: 'https://github.com/tauri-apps/tauri',
  *
- * webview.once('tauri://created', function () {
- *  // webview successfully created
- * });
- * webview.once('tauri://error', function (e) {
- *  // an error happened creating the webview
- * });
+ *     // create a webview with specific logical position and size
+ *     x: 0,
+ *     y: 0,
+ *     width: 800,
+ *     height: 600,
+ *   });
  *
- * // emit an event to the backend
- * await webview.emit("some-event", "data");
- * // listen to an event from the backend
- * const unlisten = await webview.listen("event-name", e => {});
- * unlisten();
+ *   webview.once('tauri://created', function () {
+ *     // webview successfully created
+ *   });
+ *   webview.once('tauri://error', function (e) {
+ *     // an error happened creating the webview
+ *   });
+ *
+ *
+ *   // emit an event to the backend
+ *   await webview.emit("some-event", "data");
+ *   // listen to an event from the backend
+ *   const unlisten = await webview.listen("event-name", e => { });
+ *   unlisten();
+ * });
  * ```
  *
  * @since 2.0.0
@@ -159,20 +165,24 @@ class Webview {
    * import { Window } from '@tauri-apps/api/window'
    * import { Webview } from '@tauri-apps/api/webview'
    * const appWindow = new Window('my-label')
-   * const webview = new Webview(appWindow, 'my-label', {
-   *   url: 'https://github.com/tauri-apps/tauri',
    *
-   *   // create a webview with specific logical position and size
-   *   x: 0,
-   *   y: 0,
-   *   width: 800,
-   *   height: 600,
-   * });
-   * webview.once('tauri://created', function () {
-   *  // webview successfully created
-   * });
-   * webview.once('tauri://error', function (e) {
-   *  // an error happened creating the webview
+   * appWindow.once('tauri://created', async function() {
+   *   const webview = new Webview(appWindow, 'my-label', {
+   *     url: 'https://github.com/tauri-apps/tauri',
+   *
+   *     // create a webview with specific logical position and size
+   *     x: 0,
+   *     y: 0,
+   *     width: 800,
+   *     height: 600,
+   *   });
+   *
+   *   webview.once('tauri://created', function () {
+   *     // webview successfully created
+   *   });
+   *   webview.once('tauri://error', function (e) {
+   *     // an error happened creating the webview
+   *   });
    * });
    * ```
    *