From b246e0d5ed13afcb0b3874b6f70b2c9ac98b8a1b Mon Sep 17 00:00:00 2001 From: Nika Date: Mon, 1 Sep 2025 17:15:44 +0300 Subject: [PATCH] Update broken links (#3911) * tree-wide: update links to https://rustwasm.github.io/wasm-bindgen https://rustwasm.github.io/wasm-bindgen -> https://wasm-bindgen.github.io/wasm-bindgen https://rustwasm.github.io/docs/wasm-pack -> https://drager.github.io/wasm-pack/book/ https://rustwasm.github.io/wasm-pack -> https://github.com/drager/wasm-pack --- examples/futures/src/main.rs | 2 +- examples/js_callback/README.md | 4 +- website/community/awesome.md | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 40 +++++++++---------- .../basic-web-technologies/web-sys.mdx | 6 +-- website/docs/concepts/html/events.mdx | 34 ++++++++-------- website/docs/getting-started/introduction.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 36 ++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../current/concepts/html/events.mdx | 20 +++++----- .../current/getting-started/introduction.mdx | 2 +- .../getting-started/build-a-sample-app.mdx | 2 +- .../getting-started/introduction.mdx | 4 +- .../project-setup/using-wasm-pack.mdx | 2 +- .../getting-started/build-a-sample-app.mdx | 2 +- .../getting-started/build-a-sample-app.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 36 ++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../version-0.22/concepts/html/events.mdx | 20 +++++----- .../getting-started/introduction.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 36 ++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../current/concepts/html/events.mdx | 28 ++++++------- .../current/getting-started/introduction.mdx | 2 +- .../getting-started/introduction.mdx | 4 +- .../project-setup/using-wasm-pack.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 36 ++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../version-0.22/concepts/html/events.mdx | 28 ++++++------- .../getting-started/introduction.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 36 ++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../current/concepts/html/events.mdx | 28 ++++++------- .../current/getting-started/introduction.mdx | 2 +- .../getting-started/build-a-sample-app.mdx | 2 +- .../getting-started/introduction.mdx | 4 +- .../project-setup/using-wasm-pack.mdx | 2 +- .../getting-started/build-a-sample-app.mdx | 2 +- .../getting-started/build-a-sample-app.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 36 ++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../version-0.22/concepts/html/events.mdx | 28 ++++++------- .../getting-started/introduction.mdx | 2 +- .../version-0.18.0/concepts/html/events.mdx | 30 +++++++------- .../concepts/wasm-bindgen/wasm-bindgen.mdx | 38 +++++++++--------- .../concepts/wasm-bindgen/web-sys.mdx | 6 +-- .../getting-started/introduction.mdx | 4 +- .../project-setup/using-wasm-pack.mdx | 2 +- .../version-0.19.0/concepts/html/events.mdx | 28 ++++++------- .../concepts/wasm-bindgen/introduction.mdx | 38 +++++++++--------- .../concepts/wasm-bindgen/web-sys.mdx | 6 +-- .../project-setup/using-wasm-pack.mdx | 2 +- .../version-0.19.0/more/wasm-build-tools.mdx | 4 +- .../basic-web-technologies/wasm-bindgen.mdx | 38 +++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../version-0.20/concepts/html/events.mdx | 34 ++++++++-------- .../getting-started/introduction.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 38 +++++++++--------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../version-0.21/concepts/html/events.mdx | 34 ++++++++-------- .../getting-started/introduction.mdx | 2 +- .../basic-web-technologies/wasm-bindgen.mdx | 40 +++++++++---------- .../basic-web-technologies/web-sys.mdx | 6 +-- .../version-0.22/concepts/html/events.mdx | 34 ++++++++-------- .../getting-started/introduction.mdx | 2 +- 65 files changed, 468 insertions(+), 468 deletions(-) diff --git a/examples/futures/src/main.rs b/examples/futures/src/main.rs index 3abc45565..33b3f9625 100644 --- a/examples/futures/src/main.rs +++ b/examples/futures/src/main.rs @@ -41,7 +41,7 @@ pub enum FetchState { /// Fetches markdown from Yew's README.md. /// /// Consult the following for an example of the fetch api by the team behind web_sys: -/// https://rustwasm.github.io/wasm-bindgen/examples/fetch.html +/// https://wasm-bindgen.github.io/wasm-bindgen/examples/fetch.html async fn fetch_markdown(url: &'static str) -> Result { let opts = RequestInit::new(); opts.set_method("GET"); diff --git a/examples/js_callback/README.md b/examples/js_callback/README.md index 926f0fadd..ba4f600e0 100644 --- a/examples/js_callback/README.md +++ b/examples/js_callback/README.md @@ -5,14 +5,14 @@ ## Concepts The example uses wasm-bindgen to import functionality from Javascript. -To learn more about the subject, refer to ["The `wasm-binden` Guide"](https://rustwasm.github.io/wasm-bindgen/examples/import-js.html). +To learn more about the subject, refer to ["The `wasm-binden` Guide"](https://wasm-bindgen.github.io/wasm-bindgen/examples/import-js.html). This example also demonstrates how to delay the loading of the snippet using Suspense. ### Serving JS files JS files can be served when they're present in `dist` directory. There are two ways to copy these files: -1. Use [JS Snippets](https://rustwasm.github.io/wasm-bindgen/reference/js-snippets.html). +1. Use [JS Snippets](https://wasm-bindgen.github.io/wasm-bindgen/reference/js-snippets.html). 2. Use trunk to copy the file and import it manually ### Using JS Snippets diff --git a/website/community/awesome.md b/website/community/awesome.md index 5500e179e..b5431d130 100644 --- a/website/community/awesome.md +++ b/website/community/awesome.md @@ -127,7 +127,7 @@ description: 'Community projects built using yew' - [The WebAssembly Book](https://rustwasm.github.io/docs/book/) - Working with the web and producing .wasm files. - [The wasm-bindgen Guide](https://wasm-bindgen.github.io/wasm-bindgen/) - How to bind Rust and JavaScript APIs. -- [The wasm-pack Guide](https://rustwasm.github.io/docs/wasm-pack/) - How to build and work with rust-generated WebAssembly. +- [The wasm-pack Guide](https://drager.github.io/wasm-pack/book/) - How to build and work with rust-generated WebAssembly. - [Programming WebAssembly with Rust](https://pragprog.com/book/khrust/programming-webassembly-with-rust) - Includes a chapter `Advanced JavaScript Integration with Yew` on creating an app with Yew. - [Creative Projects for Rust Programmers](https://www.oreilly.com/library/view/creative-projects-for/9781789346220/) - Chapter 5, `Creating a Client-Side WebAssembly App Using Yew`. diff --git a/website/docs/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/docs/concepts/basic-web-technologies/wasm-bindgen.mdx index ff22c0bd2..678697479 100644 --- a/website/docs/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/docs/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -18,7 +18,7 @@ This section will explore some of these crates at a high level, to make it easie and use `wasm-bindgen` APIs with Yew. For a more in-depth guide to `wasm-bindgen` and its associated crates then check out [The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/). -For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html). +For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html). :::tip Use the `wasm-bindgen` doc.rs search to find browser APIs and JavaScript types that have been imported @@ -97,12 +97,12 @@ These implementations allow you to call a method from `A` on an instance of `C` it was `&B` or `&A`. It is important to note that every single type imported using `#[wasm-bindgen]` has the same root type, -you can think of it as the `A` in the example above, this type is [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) which has +you can think of it as the `A` in the example above, this type is [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) which has its section below. _[extends section in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`. Because JavaScript does not have a strong type system, any type that comes from `wasm-bindgen` is a `JsValue`. @@ -114,9 +114,9 @@ Even though `JsValue` may be accepted by a JS function, that function may still Passing an incorrect `JsValue` can lead to an exception which triggers a panic - so when using raw `wasm-bindgen` APIs, check the your JavaScript's documentation for types of inputs that will cause an exception (and a panic). -_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ +_[`JsValue` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust has a strong type system and JavaScript...doesn't 😞. For Rust to maintain these strong types but still be convenient, the WebAssembly group came up with a pretty neat trait `JsCast`. @@ -132,7 +132,7 @@ unsure what type a certain object is, you can try to cast it, which returns poss A common example of this in [`web-sys`](./web-sys.mdx) is when you are trying to get the target of an event. You might know what the target element is, but the -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target). +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target). You will need to cast it to the element type so you can call its methods. ```rust @@ -156,17 +156,17 @@ fn handle_event(event: Event) { } ``` -The [`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) +The [`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) method is a checked cast that returns an `Option<&T>`, which means the original type can be used again if the cast failed and thus returned `None`. The -[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) method will consume `self`, as per convention for `into` methods in Rust, and the type returned is `Result`. If the casting fails, the original `Self` value is returned in `Err`. You can try again or do something else with the original type. -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) The `Closure` type provides a way to transfer Rust closures to JavaScript. The closures passed to JavaScript must have a `'static` lifetime for soundness reasons. @@ -176,11 +176,11 @@ closure that it refers to. Any usage of the closure in JS after the Closure has raise an exception. `Closure` is often used when you are working with a `js-sys` or `web-sys` API that accepts a type -[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html). +[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html). An example of using a `Closure` in Yew can be found in the [Using `Closure` section](../html/events.mdx#using-closure-verbose) on the [Events](../html/events.mdx) page. -_[`Closure` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -189,7 +189,7 @@ their methods and properties. This does not include any web APIs; that's what [`web-sys`](./web-sys.mdx) is for! -_[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -201,24 +201,24 @@ with JavaScript events and JavaScript I/O primitives. There are three main interfaces in this crate currently: -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - A type that is constructed with a [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + A type that is constructed with a [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) and can then be used as a `Future>`. This `Future` will resolve to `Ok` if the `Promise` is resolved and `Err` if the `Promise` is rejected, containing the resolved or rejected value from the `Promise` respectively. -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Converts a Rust `Future>` into a JavaScript `Promise`. The future’s result will translate to either a resolved or rejected `Promise` in JavaScript. -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - Spawns a `Future` on the current thread. This is the best way to run a Future in Rust without sending it to JavaScript. -_[`wasm-bindgen-futures` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` is going to be the most commonly used part of the `wasm-bindgen-futures` crate in Yew as this helps when using libraries that have async APIs. @@ -240,4 +240,4 @@ spawn_local(async { Yew has also added support for futures in certain APIs, most notably you can create a `callback_future` which accepts an `async` block - this uses `spawn_local` internally. -_[`spawn_local` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/docs/concepts/basic-web-technologies/web-sys.mdx b/website/docs/concepts/basic-web-technologies/web-sys.mdx index a8fa90abf..f5bb18bee 100644 --- a/website/docs/concepts/basic-web-technologies/web-sys.mdx +++ b/website/docs/concepts/basic-web-technologies/web-sys.mdx @@ -74,13 +74,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)._ +_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)._ ## The `Node` in `NodeRef` Yew uses a [`NodeRef`](concepts/function-components/node-refs.mdx) to provide a way for keeping a reference to a `Node` made by the [`html!`](concepts/html/introduction.mdx) macro. The `Node` part of `NodeRef` is referring to -[`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The +[`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The `NodeRef::get` method will return a `Option` value, however, most of the time in Yew you want to cast this value to a specific element so you can use its specific methods. This casting can be done using [`JsCast`](./wasm-bindgen.mdx#JsCast) on the `Node` value, if present, but Yew @@ -88,7 +88,7 @@ provides the `NodeRef::cast` method to perform this casting for convenience and necessarily have to include the `wasm-bindgen` dependency for the `JsCast` trait. The two code blocks below do essentially the same thing, the first is using `NodeRef::cast` and -the second is using [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +the second is using [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) on the `web_sys::Node` returned from `NodeRef::get`. diff --git a/website/docs/concepts/html/events.mdx b/website/docs/concepts/html/events.mdx index 9c31cdfd4..21c99d632 100644 --- a/website/docs/concepts/html/events.mdx +++ b/website/docs/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'Events' ## Introduction -Yew integrates with the [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate and +Yew integrates with the [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate and uses the events from that crate. The [table below](#event-types) lists all of the `web-sys` events that are accepted in the `html!` macro. @@ -67,9 +67,9 @@ form is created. This can lead to mismatches between the event you would expect This also means that events registered by Yew will usually fire before other event listeners. -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## Typed event target @@ -84,8 +84,8 @@ In event `Callback`s you may want to get the target of that event. For example, `change` event gives no information but is used to notify that something has changed. In Yew getting the target element in the correct type can be done in a few ways and we will go through -them here. Calling [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) -on an event returns an optional [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) +them here. Calling [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +on an event returns an optional [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) type, which might not seem very useful when you want to know the value of your input element. In all the approaches below we are going to tackle the same problem, so it is clear where the approach @@ -106,8 +106,8 @@ pub enum Msg { ### Using `JsCast` -The [`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has -a useful trait: [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html), +The [`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has +a useful trait: [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html), which allows us to hop and skip our way to the type we want, as long as it implements `JsCast`. We can do this cautiously, which involves some runtime checks and failure types like `Option` and `Result`, or we can do it dangerously. @@ -183,13 +183,13 @@ fn MyComponent() -> Html { } ``` -The methods from `JsCast` are [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -and [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) +The methods from `JsCast` are [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +and [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) and you can probably see, they allowed -us to go from `EventTarget` to [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). +us to go from `EventTarget` to [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). The `dyn_into` method is cautious because at runtime it will check whether the type is actually a `HtmlInputElement` and if not return an -`Err(JsValue)`, the [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`, the [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) is a catch-all type and is essentially giving you back the object to try again. At this point you might be thinking... when is the dangerous version ok to use? In the case above it @@ -370,14 +370,14 @@ You may want to listen to an event that is not supported by Yew's `html` macro, In order to add an event listener to one of elements manually we need the help of [`NodeRef`](../function-components/node-refs.mdx) so that in `use_effect_with` we can add a listener using the -[`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) and -[wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. +[`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) and +[wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. The examples below are going to show adding listeners for the made-up `custard` event. All events either unsupported by yew or custom can be represented as a -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you need to access a specific method or field on a custom / unsupported event then you can use the -methods of [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +methods of [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) in order to convert to the type required. ### Using `Closure` (verbose) @@ -436,7 +436,7 @@ fn MyComponent() -> Html { ``` For more information on `Closures`, see -[The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/examples/closures.html). +[The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html). ### Using `gloo` (concise) diff --git a/website/docs/getting-started/introduction.mdx b/website/docs/getting-started/introduction.mdx index 239b3b665..658db0e28 100644 --- a/website/docs/getting-started/introduction.mdx +++ b/website/docs/getting-started/introduction.mdx @@ -43,7 +43,7 @@ cargo install --locked trunk There are options other than Trunk that may be used for bundling Yew applications. You might want to try one of these options: -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (still in early development) diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx index 5e54ef9f9..ff5a68a9d 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -14,7 +14,7 @@ Yew は `wasm-bindgen` を使用して、いくつかのクレートを介して このセクションでは、これらのクレートをより抽象的なレベルから探求し、Yew での `wasm-bindgen` API の理解と使用を容易にします。`wasm-bindgen` および関連するクレートに関する詳細なガイドについては、[`wasm-bindgen` ガイド](https://wasm-bindgen.github.io/wasm-bindgen/) を参照してください。 -上記のクレートのドキュメントについては、[`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) を参照してください。 +上記のクレートのドキュメントについては、[`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) を参照してください。 :::tip `wasm-bindgen` doc.rs 検索を使用して、`wasm-bindgen` を使用してインポートされたブラウザ API および JavaScript タイプを見つけます。 @@ -77,21 +77,21 @@ Rust では、この継承関係は [`Deref`](https://doc.rust-lang.org/std/ops/ _[`wasm-bindgen` ガイドの extends セクション](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) これは JavaScript が所有するオブジェクトの表現であり、`wasm-bindgen` のルートキャプチャ型です。`wasm-bindgen` からの任意の型は `JsValue` です。これは、JavaScript には強い型システムがないため、変数 `x` を受け取る任意の関数がその型を定義しないため、`x` は有効な JavaScript 値である可能性があるためです。したがって `JsValue` です。`JsValue` を受け取るインポート関数や型を使用している場合、技術的には任意のインポート値が有効です。 `JsValue` は関数で受け取ることができますが、その関数は特定の型のみを受け取る可能性があり、それがパニックを引き起こす可能性があります。したがって、元の `wasm-bindgen` API を使用する場合は、インポートされた JavaScript のドキュメントを確認して、その値が特定の型でない場合に例外（パニック）を引き起こすかどうかを確認してください。 -_[`JsValue` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)_ +_[`JsValue` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)_ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust には強い型システムがありますが、JavaScript にはありません😞。Rust がこれらの強い型を維持しながらも便利であるために、WebAssembly ワーキンググループは非常に巧妙な機能 `JsCast` を提案しました。これは、ある JavaScript "型" から別の "型" への変換を支援するものです。これは曖昧に聞こえますが、ある型が別の型であることがわかっている場合、`JsCast` の関数を使用してある型から別の型にジャンプできます。`web-sys`、`wasm_bindgen`、`js-sys` を使用する際にこの機能を理解しておくと便利です。これらのクレートから多くの型が `JsCast` を実装していることに気付くでしょう。 `JsCast` はチェック付きとチェックなしの変換メソッドを提供します。したがって、実行時にオブジェクトがどの型であるかわからない場合は、変換を試みることができ、失敗する可能性のある型として [`Option`](https://doc.rust-lang.org/std/option/enum.Option.html) や [`Result`](https://doc.rust-lang.org/std/result/enum.Result.html) を返します。 -一般的な例は [`web-sys`](./web-sys.mdx) で、イベントのターゲットを取得しようとする場合です。ターゲット要素が何であるかを知っているかもしれませんが、[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API は常に [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を返します。 +一般的な例は [`web-sys`](./web-sys.mdx) で、イベントのターゲットを取得しようとする場合です。ターゲット要素が何であるかを知っているかもしれませんが、[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API は常に [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を返します。 その要素型に変換する必要があり、そのメソッドを呼び出すことができます。 ```rust @@ -115,19 +115,19 @@ fn handle_event(event: Event) { } ``` -[`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) メソッドはチェック付きの変換であり、`Option<&T>` を返します。これは、変換が失敗した場合に元の型を再度使用できることを意味し、`None` を返します。 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) メソッドは `self` を消費し、Rust の `into` メソッドの規約に従い、`Result` 型を返します。変換が失敗した場合、元の `Self` 値は `Err` に返されます。再試行するか、元の型で他の操作を行うことができます。 +[`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) メソッドはチェック付きの変換であり、`Option<&T>` を返します。これは、変換が失敗した場合に元の型を再度使用できることを意味し、`None` を返します。 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) メソッドは `self` を消費し、Rust の `into` メソッドの規約に従い、`Result` 型を返します。変換が失敗した場合、元の `Self` 値は `Err` に返されます。再試行するか、元の型で他の操作を行うことができます。 -_[`JsCast` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) `Closure` 型は、Rust のクロージャを JavaScript に渡す方法を提供します。健全性の理由から、JavaScript に渡されるクロージャは `'static` ライフタイムを持つ必要があります。 この型は「ハンドル」であり、破棄されると、それが参照する JS クロージャを無効にします。`Closure` が破棄された後、JS 内のクロージャの使用はすべて例外を引き起こします。 -`Closure` は、[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 型を受け取る `js-sys` または `web-sys` API を使用する際に一般的に使用されます。Yew で `Closure` を使用する例は、[Events](../html/events.mdx) ページの[Using `Closure` セクション](../html/events.mdx#using-closure-verbose) にあります。 +`Closure` は、[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 型を受け取る `js-sys` または `web-sys` API を使用する際に一般的に使用されます。Yew で `Closure` を使用する例は、[Events](../html/events.mdx) ページの[Using `Closure` セクション](../html/events.mdx#using-closure-verbose) にあります。 -_[`Closure` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -135,7 +135,7 @@ _[`Closure` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm これは Web API を含みません。Web API は [`web-sys`](./web-sys.mdx) の役割です！ -_[`js-sys` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -143,18 +143,18 @@ _[`js-sys` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/js_sy 現在、このクレートには3つの主要なインターフェースがあります： -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) を使用して構築された型で、`Future>` として使用できます。`Promise` が解決されると、この `Future` は `Ok` に解決され、`Promise` が拒否されると `Err` に解決され、それぞれ `Promise` の解決または拒否の値を含みます。 +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) を使用して構築された型で、`Future>` として使用できます。`Promise` が解決されると、この `Future` は `Ok` に解決され、`Promise` が拒否されると `Err` に解決され、それぞれ `Promise` の解決または拒否の値を含みます。 -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Rust の `Future>` を JavaScript の `Promise` に変換します。Future の結果は、JavaScript 内の解決または拒否された `Promise` に変換されます。 -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - 現在のスレッドで `Future` を生成します。これは、Rust 内で Future を実行する最良の方法であり、JavaScript に送信するのではなく、Rust 内で実行します。 -_[`wasm-bindgen-futures` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` は、非同期 API を使用するライブラリを使用する際に、Yew で `wasm-bindgen-futures` クレートの最も一般的に使用される部分です。 @@ -174,4 +174,4 @@ spawn_local(async { Yew はいくつかの API に futures のサポートを追加しており、特に `async` ブロックを受け入れる `callback_future` を作成できることが注目されます。これは内部的に `spawn_local` を使用しています。 -_[`spawn_local` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx index 6f5f1ca9e..51826b1b8 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx @@ -59,13 +59,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -[`wasm-bindgen` ガイドの `web-sys` 継承](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html) +[`wasm-bindgen` ガイドの `web-sys` 継承](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html) ## `NodeRef` の `Node` -Yew は [`NodeRef`](concepts/function-components/node-refs.mdx) を使用して、[`html!`](concepts/html/introduction.mdx) マクロによって作成された `Node` の参照を保持する方法を提供します。`NodeRef` の `Node` は [`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html) を指します。`NodeRef::get` メソッドは `Option` 値を返しますが、Yew ではほとんどの場合、この値を特定の要素に変換して、その特定のメソッドを使用することを望みます。存在する場合、[`JsCast`](./wasm-bindgen.mdx#JsCast) を使用して `Node` 値を変換できますが、Yew はこの変換を実行するための `NodeRef::cast` メソッドを提供しているため、`JsCast` 特性のために `wasm-bindgen` 依存関係を含める必要はありません。 +Yew は [`NodeRef`](concepts/function-components/node-refs.mdx) を使用して、[`html!`](concepts/html/introduction.mdx) マクロによって作成された `Node` の参照を保持する方法を提供します。`NodeRef` の `Node` は [`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html) を指します。`NodeRef::get` メソッドは `Option` 値を返しますが、Yew ではほとんどの場合、この値を特定の要素に変換して、その特定のメソッドを使用することを望みます。存在する場合、[`JsCast`](./wasm-bindgen.mdx#JsCast) を使用して `Node` 値を変換できますが、Yew はこの変換を実行するための `NodeRef::cast` メソッドを提供しているため、`JsCast` 特性のために `wasm-bindgen` 依存関係を含める必要はありません。 -以下の2つのコードブロックは本質的に同じです。最初のものは `NodeRef::cast` を使用し、2 番目のものは `NodeRef::get` が返す `web_sys::Node` 上で [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) を使用しています。 +以下の2つのコードブロックは本質的に同じです。最初のものは `NodeRef::cast` を使用し、2 番目のものは `NodeRef::get` が返す `web_sys::Node` 上で [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) を使用しています。 diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx index 2e85be40f..bd842a86a 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'イベント' ## 紹介 -Yew は [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) クレートと統合されており、このクレートのイベントを使用します。以下の[表](#event-types)には、`html!` マクロで受け入れられるすべての `web-sys` イベントが一覧表示されています。 +Yew は [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) クレートと統合されており、このクレートのイベントを使用します。以下の[表](#event-types)には、`html!` マクロで受け入れられるすべての `web-sys` イベントが一覧表示されています。 下記の表に記載されていないイベントについても、[`Callback`](../function-components/callbacks.mdx) を追加してリッスンすることができます。詳細は[手動イベントリスナー](#manual-event-listener)を参照してください。 @@ -52,9 +52,9 @@ yew::set_event_bubbling(false); これも意味するところは、Yew によって登録されたイベントは通常、他のイベントリスナーよりも先にトリガーされるということです。 -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## 型付きイベントターゲット @@ -66,7 +66,7 @@ yew::set_event_bubbling(false); イベント `Callback` の中で、イベントのターゲットを取得したい場合があります。例えば、`change` イベントは何かが変更されたことを通知するだけで、具体的な情報を提供しません。 -Yew では、正しい型でターゲット要素を取得する方法がいくつかあり、ここで順を追って説明します。イベント上の [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を呼び出すと、オプションの [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 型が返されますが、入力要素の値を知りたい場合にはあまり役に立たないかもしれません。 +Yew では、正しい型でターゲット要素を取得する方法がいくつかあり、ここで順を追って説明します。イベント上の [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を呼び出すと、オプションの [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 型が返されますが、入力要素の値を知りたい場合にはあまり役に立たないかもしれません。 以下のすべての方法で、同じ問題を解決します。これにより、方法の違いが明確になり、問題に対処することができます。 @@ -84,7 +84,7 @@ pub enum Msg { ### `JsCast` の使用 -[`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) クレートには便利なトレイトがあります：[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)。これにより、型が `JsCast` を実装している限り、型間の直接キャストが可能になります。慎重にキャストすることもできますが、これはランタイムチェックと `Option` や `Result` のロジックを処理することを伴います。また、強制的にキャストすることもできます。 +[`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) クレートには便利なトレイトがあります：[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)。これにより、型が `JsCast` を実装している限り、型間の直接キャストが可能になります。慎重にキャストすることもできますが、これはランタイムチェックと `Option` や `Result` のロジックを処理することを伴います。また、強制的にキャストすることもできます。 コードを見てみましょう： @@ -156,7 +156,7 @@ fn MyComponent() -> Html { } ``` -`JsCast` が提供するメソッドは [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) と [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) です。これらのメソッドを使用すると、`EventTarget` から [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html) への変換が可能になります。`dyn_into` メソッドは慎重で、実行時に型が実際に `HtmlInputElement` であるかどうかをチェックし、そうでない場合は `Err(JsValue)` を返します。[`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) は汎用型で、元のオブジェクトを返し、別の型への変換を再試行することができます。 +`JsCast` が提供するメソッドは [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) と [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) です。これらのメソッドを使用すると、`EventTarget` から [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html) への変換が可能になります。`dyn_into` メソッドは慎重で、実行時に型が実際に `HtmlInputElement` であるかどうかをチェックし、そうでない場合は `Err(JsValue)` を返します。[`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) は汎用型で、元のオブジェクトを返し、別の型への変換を再試行することができます。 ここで、危険なバージョンを使用するタイミングについて考えるかもしれません。上記のケースでは、子要素のない要素に `Callback` を設定しているため、ターゲットは同じ要素である必要があるため、安全です1。 @@ -321,9 +321,9 @@ fn MyComponent() -> Html { Yew の `html` マクロがサポートしていないイベントをリッスンしたい場合があります。サポートされているイベントのリストは[こちら](#event-types)を参照してください。 -手動で要素にイベントリスナーを追加するには、[`NodeRef`](../function-components/node-refs.mdx) を使用して、`use_effect_with` 内で [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) と [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API を使用してリスナーを追加します。 +手動で要素にイベントリスナーを追加するには、[`NodeRef`](../function-components/node-refs.mdx) を使用して、`use_effect_with` 内で [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) と [wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API を使用してリスナーを追加します。 -以下の例では、架空の `custard` イベントにリスナーを追加する方法を示します。Yew がサポートしていないすべてのイベントやカスタムイベントは、[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) として表現できます。カスタム/サポートされていないイベントの特定のメソッドやフィールドにアクセスする必要がある場合は、[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) のメソッドを使用して必要な型に変換できます。 +以下の例では、架空の `custard` イベントにリスナーを追加する方法を示します。Yew がサポートしていないすべてのイベントやカスタムイベントは、[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) として表現できます。カスタム/サポートされていないイベントの特定のメソッドやフィールドにアクセスする必要がある場合は、[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) のメソッドを使用して必要な型に変換できます。 ### `Closure` を使用する（冗長バージョン） @@ -379,7 +379,7 @@ fn MyComponent() -> Html { } ``` -`Closure` の詳細については、[wasm-bindgen ガイド](https://rustwasm.github.io/wasm-bindgen/examples/closures.html) を参照してください。 +`Closure` の詳細については、[wasm-bindgen ガイド](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html) を参照してください。 ### `gloo` を使用する（簡潔なバージョン） diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx index 7a33a2417..a5d1a3fb9 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx @@ -35,7 +35,7 @@ cargo install --locked trunk Trunk の他にも、Yew アプリケーションをパッケージ化するための他のオプションがあります。以下のオプションのいずれかを試してみることをお勧めします： -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/)（まだ初期開発段階です） diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx index d75cb2139..a08708a7b 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx @@ -107,7 +107,7 @@ mkdir static ## アプリを動かす! -[`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/)を使うのがアプリを動かすのに推奨される方法です。 +[`wasm-pack`](https://drager.github.io/wasm-pack/book/)を使うのがアプリを動かすのに推奨される方法です。 まだ`wasm-pack`をインストールしていない場合、`cargo install wasm-pack`でインストールして開発サーバーを動かしてみましょう: ```bash diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx index 1966a698d..417e65d12 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx @@ -16,7 +16,7 @@ description: 'Set yourself up for success' WebAssembly と JavaScript の互換を持たせるために他にツールが必要です。さらに、選んだツールに応じてブラウザでアプリから`.wasm`ファイルを実行するのに 必要な JavaScript ラッパーのコードを生成し、これによってデプロイやパッケージ化での頭痛の種を軽減させるのに役立ちます。 -### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/) +### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/) Rust / Wasm 活動チームによって開発されている CLI ツールで、WebAssembly をパッケージ化することができます。 Webpack には[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)が最もよく使われています。 @@ -83,7 +83,7 @@ Webpack には[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin ヘッドレスブラウザテスト - + サポートあり diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx index af325ce09..0b00580ec 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx @@ -5,7 +5,7 @@ title: Using wasm-pack このツールは Rust / Wasm 活動チームによって開発され、WebAssembly のアプリを作るのに使われれるツールで最も活発に開発されているものです。 コードを`npm`モジュールへパッケージ化するのをサポートし、既存の JavaScript のアプリと簡単に統合できる [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin)がついています。 -詳しい情報は[the `wasm-pack` documentation](https://rustwasm.github.io/docs/wasm-pack/introduction.html)にあります。 +詳しい情報は[the `wasm-pack` documentation](https://drager.github.io/wasm-pack/book/introduction.html)にあります。 :::注意 `wasm-pack`を使う際は`Cargo.toml`の crate-type は`cdylib`である必要があります。 diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx index 0564db9e1..602fe389b 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx @@ -107,7 +107,7 @@ mkdir static ## アプリを動かす! -[`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/)を使うのがアプリを動かすのに推奨される方法です。 +[`wasm-pack`](https://drager.github.io/wasm-pack/book/)を使うのがアプリを動かすのに推奨される方法です。 まだ`wasm-pack`をインストールしていない場合、`cargo install wasm-pack`でインストールして開発サーバーを動かしてみましょう: ```bash diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx index 0564db9e1..602fe389b 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx @@ -107,7 +107,7 @@ mkdir static ## アプリを動かす! -[`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/)を使うのがアプリを動かすのに推奨される方法です。 +[`wasm-pack`](https://drager.github.io/wasm-pack/book/)を使うのがアプリを動かすのに推奨される方法です。 まだ`wasm-pack`をインストールしていない場合、`cargo install wasm-pack`でインストールして開発サーバーを動かしてみましょう: ```bash diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx index 5e54ef9f9..ff5a68a9d 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -14,7 +14,7 @@ Yew は `wasm-bindgen` を使用して、いくつかのクレートを介して このセクションでは、これらのクレートをより抽象的なレベルから探求し、Yew での `wasm-bindgen` API の理解と使用を容易にします。`wasm-bindgen` および関連するクレートに関する詳細なガイドについては、[`wasm-bindgen` ガイド](https://wasm-bindgen.github.io/wasm-bindgen/) を参照してください。 -上記のクレートのドキュメントについては、[`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) を参照してください。 +上記のクレートのドキュメントについては、[`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) を参照してください。 :::tip `wasm-bindgen` doc.rs 検索を使用して、`wasm-bindgen` を使用してインポートされたブラウザ API および JavaScript タイプを見つけます。 @@ -77,21 +77,21 @@ Rust では、この継承関係は [`Deref`](https://doc.rust-lang.org/std/ops/ _[`wasm-bindgen` ガイドの extends セクション](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) これは JavaScript が所有するオブジェクトの表現であり、`wasm-bindgen` のルートキャプチャ型です。`wasm-bindgen` からの任意の型は `JsValue` です。これは、JavaScript には強い型システムがないため、変数 `x` を受け取る任意の関数がその型を定義しないため、`x` は有効な JavaScript 値である可能性があるためです。したがって `JsValue` です。`JsValue` を受け取るインポート関数や型を使用している場合、技術的には任意のインポート値が有効です。 `JsValue` は関数で受け取ることができますが、その関数は特定の型のみを受け取る可能性があり、それがパニックを引き起こす可能性があります。したがって、元の `wasm-bindgen` API を使用する場合は、インポートされた JavaScript のドキュメントを確認して、その値が特定の型でない場合に例外（パニック）を引き起こすかどうかを確認してください。 -_[`JsValue` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)_ +_[`JsValue` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)_ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust には強い型システムがありますが、JavaScript にはありません😞。Rust がこれらの強い型を維持しながらも便利であるために、WebAssembly ワーキンググループは非常に巧妙な機能 `JsCast` を提案しました。これは、ある JavaScript "型" から別の "型" への変換を支援するものです。これは曖昧に聞こえますが、ある型が別の型であることがわかっている場合、`JsCast` の関数を使用してある型から別の型にジャンプできます。`web-sys`、`wasm_bindgen`、`js-sys` を使用する際にこの機能を理解しておくと便利です。これらのクレートから多くの型が `JsCast` を実装していることに気付くでしょう。 `JsCast` はチェック付きとチェックなしの変換メソッドを提供します。したがって、実行時にオブジェクトがどの型であるかわからない場合は、変換を試みることができ、失敗する可能性のある型として [`Option`](https://doc.rust-lang.org/std/option/enum.Option.html) や [`Result`](https://doc.rust-lang.org/std/result/enum.Result.html) を返します。 -一般的な例は [`web-sys`](./web-sys.mdx) で、イベントのターゲットを取得しようとする場合です。ターゲット要素が何であるかを知っているかもしれませんが、[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API は常に [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を返します。 +一般的な例は [`web-sys`](./web-sys.mdx) で、イベントのターゲットを取得しようとする場合です。ターゲット要素が何であるかを知っているかもしれませんが、[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API は常に [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を返します。 その要素型に変換する必要があり、そのメソッドを呼び出すことができます。 ```rust @@ -115,19 +115,19 @@ fn handle_event(event: Event) { } ``` -[`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) メソッドはチェック付きの変換であり、`Option<&T>` を返します。これは、変換が失敗した場合に元の型を再度使用できることを意味し、`None` を返します。 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) メソッドは `self` を消費し、Rust の `into` メソッドの規約に従い、`Result` 型を返します。変換が失敗した場合、元の `Self` 値は `Err` に返されます。再試行するか、元の型で他の操作を行うことができます。 +[`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) メソッドはチェック付きの変換であり、`Option<&T>` を返します。これは、変換が失敗した場合に元の型を再度使用できることを意味し、`None` を返します。 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) メソッドは `self` を消費し、Rust の `into` メソッドの規約に従い、`Result` 型を返します。変換が失敗した場合、元の `Self` 値は `Err` に返されます。再試行するか、元の型で他の操作を行うことができます。 -_[`JsCast` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) `Closure` 型は、Rust のクロージャを JavaScript に渡す方法を提供します。健全性の理由から、JavaScript に渡されるクロージャは `'static` ライフタイムを持つ必要があります。 この型は「ハンドル」であり、破棄されると、それが参照する JS クロージャを無効にします。`Closure` が破棄された後、JS 内のクロージャの使用はすべて例外を引き起こします。 -`Closure` は、[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 型を受け取る `js-sys` または `web-sys` API を使用する際に一般的に使用されます。Yew で `Closure` を使用する例は、[Events](../html/events.mdx) ページの[Using `Closure` セクション](../html/events.mdx#using-closure-verbose) にあります。 +`Closure` は、[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 型を受け取る `js-sys` または `web-sys` API を使用する際に一般的に使用されます。Yew で `Closure` を使用する例は、[Events](../html/events.mdx) ページの[Using `Closure` セクション](../html/events.mdx#using-closure-verbose) にあります。 -_[`Closure` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -135,7 +135,7 @@ _[`Closure` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm これは Web API を含みません。Web API は [`web-sys`](./web-sys.mdx) の役割です！ -_[`js-sys` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -143,18 +143,18 @@ _[`js-sys` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/js_sy 現在、このクレートには3つの主要なインターフェースがあります： -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) を使用して構築された型で、`Future>` として使用できます。`Promise` が解決されると、この `Future` は `Ok` に解決され、`Promise` が拒否されると `Err` に解決され、それぞれ `Promise` の解決または拒否の値を含みます。 +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) を使用して構築された型で、`Future>` として使用できます。`Promise` が解決されると、この `Future` は `Ok` に解決され、`Promise` が拒否されると `Err` に解決され、それぞれ `Promise` の解決または拒否の値を含みます。 -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Rust の `Future>` を JavaScript の `Promise` に変換します。Future の結果は、JavaScript 内の解決または拒否された `Promise` に変換されます。 -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - 現在のスレッドで `Future` を生成します。これは、Rust 内で Future を実行する最良の方法であり、JavaScript に送信するのではなく、Rust 内で実行します。 -_[`wasm-bindgen-futures` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` は、非同期 API を使用するライブラリを使用する際に、Yew で `wasm-bindgen-futures` クレートの最も一般的に使用される部分です。 @@ -174,4 +174,4 @@ spawn_local(async { Yew はいくつかの API に futures のサポートを追加しており、特に `async` ブロックを受け入れる `callback_future` を作成できることが注目されます。これは内部的に `spawn_local` を使用しています。 -_[`spawn_local` ドキュメント](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` ドキュメント](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx index 6f5f1ca9e..51826b1b8 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx @@ -59,13 +59,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -[`wasm-bindgen` ガイドの `web-sys` 継承](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html) +[`wasm-bindgen` ガイドの `web-sys` 継承](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html) ## `NodeRef` の `Node` -Yew は [`NodeRef`](concepts/function-components/node-refs.mdx) を使用して、[`html!`](concepts/html/introduction.mdx) マクロによって作成された `Node` の参照を保持する方法を提供します。`NodeRef` の `Node` は [`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html) を指します。`NodeRef::get` メソッドは `Option` 値を返しますが、Yew ではほとんどの場合、この値を特定の要素に変換して、その特定のメソッドを使用することを望みます。存在する場合、[`JsCast`](./wasm-bindgen.mdx#JsCast) を使用して `Node` 値を変換できますが、Yew はこの変換を実行するための `NodeRef::cast` メソッドを提供しているため、`JsCast` 特性のために `wasm-bindgen` 依存関係を含める必要はありません。 +Yew は [`NodeRef`](concepts/function-components/node-refs.mdx) を使用して、[`html!`](concepts/html/introduction.mdx) マクロによって作成された `Node` の参照を保持する方法を提供します。`NodeRef` の `Node` は [`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html) を指します。`NodeRef::get` メソッドは `Option` 値を返しますが、Yew ではほとんどの場合、この値を特定の要素に変換して、その特定のメソッドを使用することを望みます。存在する場合、[`JsCast`](./wasm-bindgen.mdx#JsCast) を使用して `Node` 値を変換できますが、Yew はこの変換を実行するための `NodeRef::cast` メソッドを提供しているため、`JsCast` 特性のために `wasm-bindgen` 依存関係を含める必要はありません。 -以下の2つのコードブロックは本質的に同じです。最初のものは `NodeRef::cast` を使用し、2 番目のものは `NodeRef::get` が返す `web_sys::Node` 上で [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) を使用しています。 +以下の2つのコードブロックは本質的に同じです。最初のものは `NodeRef::cast` を使用し、2 番目のものは `NodeRef::get` が返す `web_sys::Node` 上で [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) を使用しています。 diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx index 2e85be40f..bd842a86a 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'イベント' ## 紹介 -Yew は [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) クレートと統合されており、このクレートのイベントを使用します。以下の[表](#event-types)には、`html!` マクロで受け入れられるすべての `web-sys` イベントが一覧表示されています。 +Yew は [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) クレートと統合されており、このクレートのイベントを使用します。以下の[表](#event-types)には、`html!` マクロで受け入れられるすべての `web-sys` イベントが一覧表示されています。 下記の表に記載されていないイベントについても、[`Callback`](../function-components/callbacks.mdx) を追加してリッスンすることができます。詳細は[手動イベントリスナー](#manual-event-listener)を参照してください。 @@ -52,9 +52,9 @@ yew::set_event_bubbling(false); これも意味するところは、Yew によって登録されたイベントは通常、他のイベントリスナーよりも先にトリガーされるということです。 -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## 型付きイベントターゲット @@ -66,7 +66,7 @@ yew::set_event_bubbling(false); イベント `Callback` の中で、イベントのターゲットを取得したい場合があります。例えば、`change` イベントは何かが変更されたことを通知するだけで、具体的な情報を提供しません。 -Yew では、正しい型でターゲット要素を取得する方法がいくつかあり、ここで順を追って説明します。イベント上の [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を呼び出すと、オプションの [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 型が返されますが、入力要素の値を知りたい場合にはあまり役に立たないかもしれません。 +Yew では、正しい型でターゲット要素を取得する方法がいくつかあり、ここで順を追って説明します。イベント上の [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) を呼び出すと、オプションの [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 型が返されますが、入力要素の値を知りたい場合にはあまり役に立たないかもしれません。 以下のすべての方法で、同じ問題を解決します。これにより、方法の違いが明確になり、問題に対処することができます。 @@ -84,7 +84,7 @@ pub enum Msg { ### `JsCast` の使用 -[`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) クレートには便利なトレイトがあります：[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)。これにより、型が `JsCast` を実装している限り、型間の直接キャストが可能になります。慎重にキャストすることもできますが、これはランタイムチェックと `Option` や `Result` のロジックを処理することを伴います。また、強制的にキャストすることもできます。 +[`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) クレートには便利なトレイトがあります：[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)。これにより、型が `JsCast` を実装している限り、型間の直接キャストが可能になります。慎重にキャストすることもできますが、これはランタイムチェックと `Option` や `Result` のロジックを処理することを伴います。また、強制的にキャストすることもできます。 コードを見てみましょう： @@ -156,7 +156,7 @@ fn MyComponent() -> Html { } ``` -`JsCast` が提供するメソッドは [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) と [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) です。これらのメソッドを使用すると、`EventTarget` から [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html) への変換が可能になります。`dyn_into` メソッドは慎重で、実行時に型が実際に `HtmlInputElement` であるかどうかをチェックし、そうでない場合は `Err(JsValue)` を返します。[`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) は汎用型で、元のオブジェクトを返し、別の型への変換を再試行することができます。 +`JsCast` が提供するメソッドは [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) と [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) です。これらのメソッドを使用すると、`EventTarget` から [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html) への変換が可能になります。`dyn_into` メソッドは慎重で、実行時に型が実際に `HtmlInputElement` であるかどうかをチェックし、そうでない場合は `Err(JsValue)` を返します。[`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) は汎用型で、元のオブジェクトを返し、別の型への変換を再試行することができます。 ここで、危険なバージョンを使用するタイミングについて考えるかもしれません。上記のケースでは、子要素のない要素に `Callback` を設定しているため、ターゲットは同じ要素である必要があるため、安全です1。 @@ -321,9 +321,9 @@ fn MyComponent() -> Html { Yew の `html` マクロがサポートしていないイベントをリッスンしたい場合があります。サポートされているイベントのリストは[こちら](#event-types)を参照してください。 -手動で要素にイベントリスナーを追加するには、[`NodeRef`](../function-components/node-refs.mdx) を使用して、`use_effect_with` 内で [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) と [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API を使用してリスナーを追加します。 +手動で要素にイベントリスナーを追加するには、[`NodeRef`](../function-components/node-refs.mdx) を使用して、`use_effect_with` 内で [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) と [wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API を使用してリスナーを追加します。 -以下の例では、架空の `custard` イベントにリスナーを追加する方法を示します。Yew がサポートしていないすべてのイベントやカスタムイベントは、[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) として表現できます。カスタム/サポートされていないイベントの特定のメソッドやフィールドにアクセスする必要がある場合は、[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) のメソッドを使用して必要な型に変換できます。 +以下の例では、架空の `custard` イベントにリスナーを追加する方法を示します。Yew がサポートしていないすべてのイベントやカスタムイベントは、[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) として表現できます。カスタム/サポートされていないイベントの特定のメソッドやフィールドにアクセスする必要がある場合は、[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) のメソッドを使用して必要な型に変換できます。 ### `Closure` を使用する（冗長バージョン） @@ -379,7 +379,7 @@ fn MyComponent() -> Html { } ``` -`Closure` の詳細については、[wasm-bindgen ガイド](https://rustwasm.github.io/wasm-bindgen/examples/closures.html) を参照してください。 +`Closure` の詳細については、[wasm-bindgen ガイド](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html) を参照してください。 ### `gloo` を使用する（簡潔なバージョン） diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx index 7a33a2417..a5d1a3fb9 100644 --- a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx @@ -35,7 +35,7 @@ cargo install --locked trunk Trunk の他にも、Yew アプリケーションをパッケージ化するための他のオプションがあります。以下のオプションのいずれかを試してみることをお勧めします： -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/)（まだ初期開発段階です） diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx index 7f8c5758e..af106a4ef 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -14,7 +14,7 @@ Yew 使用 `wasm-bindgen` 通过一些 crate 与浏览器进行交互： 本节将从更抽象的层次上探讨这些 crate，以便更容易地理解和使用 Yew 中的 `wasm-bindgen` API。要了解有关 `wasm-bindgen` 及其相关 crate 的更深入指南，请查看 [`wasm-bindgen` 指引](https://wasm-bindgen.github.io/wasm-bindgen/)。 -有关上述 crate 的文档，请查看 [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 +有关上述 crate 的文档，请查看 [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 :::tip 使用 `wasm-bindgen` doc.rs 搜索来查找已使用 `wasm-bindgen` 导入的浏览器 API 和 JavaScript 类型。 @@ -77,21 +77,21 @@ _这个示例是基于 [1.2 使用 console.log 的 `wasm-bindgen` 指引](https: _[`wasm-bindgen` 指引中的 extends 部分](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 这是 JavaScript 拥有的对象的表示，这是 `wasm-bindgen` 的根捕获类型。任何来自 `wasm-bindgen` 的类型都是 `JsValue`，这是因为 JavaScript 没有强类型系统，因此接受变量 `x` 的任何函数都不定义其类型，因此 `x` 可以是有效的 JavaScript 值；因此 `JsValue`。如果您正在使用接受 `JsValue` 的导入函数或类型，那么任何导入的值在技术上都是有效的。 `JsValue` 可以被函数接受，但该函数可能仍然只接受某些类型，这可能会导致 panic - 因此在使用原始 `wasm-bindgen` API 时，请检查导入的 JavaScript 的文档，以确定是否会在该值不是某种类型时引发异常（panic）。 -_[`JsValue` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。_ +_[`JsValue` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。_ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust 有一个强类型系统，而 JavaScript……没有😞。为了让 Rust 保持这些强类型但仍然方便，WebAssembly 工作组提出了一个非常巧妙的特性 `JsCast`。它的工作是帮助您从一个 JavaScript "类型" 转换到另一个 "类型"，这听起来很模糊，但它意味着如果您有一个类型，您知道它是另一个类型，那么您可以使用 `JsCast` 的函数从一个类型跳到另一个类型。当使用 `web-sys`、`wasm_bindgen`、`js-sys` 时，了解这个很好的特性 - 您会注意到许多类型将从这些 crate 中实现 `JsCast`。 `JsCast` 提供了转换的检查和不检查方法 - 因此在运行时，如果您不确定某个对象是什么类型，您可以尝试将其转换，这将返回可能的失败类型，如 [`Option`](https://doc.rust-lang.org/std/option/enum.Option.html) 和 [`Result`](https://doc.rust-lang.org/std/result/enum.Result.html)。 -一个常见的例子是在 [`web-sys`](./web-sys.mdx) 中，当您尝试获取事件的目标时。您可能知道目标元素是什么，但 [`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 总是会返回一个 [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 +一个常见的例子是在 [`web-sys`](./web-sys.mdx) 中，当您尝试获取事件的目标时。您可能知道目标元素是什么，但 [`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 总是会返回一个 [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 您需要将其转换为元素类型，以便调用其方法。 ```rust @@ -115,19 +115,19 @@ fn handle_event(event: Event) { } ``` -[`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一个检查的转换，返回一个 `Option<&T>`，这意味着如果转换失败，则可以再次使用原始类型，因此返回 `None`。[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法将消耗 `self`，这是 Rust 中 `into` 方法的约定，返回的类型是 `Result`。如果转换失败，则原始的 `Self` 值将在 `Err` 中返回。您可以再试一次或对原始类型进行其他操作。 +[`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一个检查的转换，返回一个 `Option<&T>`，这意味着如果转换失败，则可以再次使用原始类型，因此返回 `None`。[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法将消耗 `self`，这是 Rust 中 `into` 方法的约定，返回的类型是 `Result`。如果转换失败，则原始的 `Self` 值将在 `Err` 中返回。您可以再试一次或对原始类型进行其他操作。 -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) `Closure` 类型提供了一种将 Rust 闭包传递到 JavaScript 的方法，出于健全性原因，传递给 JavaScript 的闭包必须具有 `'static` 生命周期。 这种类型是一个“句柄”，意味着每当它被丢弃时，它将使其引用的 JS 闭包无效。在 `Closure` 被丢弃后，对 JS 中闭包的任何使用都将引发异常。 -当您使用接受类型 [`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的 `js-sys` 或 `web-sys` API 时，通常会使用 `Closure`。在 [Events](../html/events.mdx) 页面的 [Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到在 Yew 中使用 `Closure` 的示例。 +当您使用接受类型 [`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的 `js-sys` 或 `web-sys` API 时，通常会使用 `Closure`。在 [Events](../html/events.mdx) 页面的 [Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到在 Yew 中使用 `Closure` 的示例。 -_[`Closure` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -135,7 +135,7 @@ _[`Closure` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/clo 这不包括任何 Web API，因为这是 [`web-sys`](./web-sys.mdx) 的作用！ -_[`js-sys` 文档](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -143,18 +143,18 @@ _[`js-sys` 文档](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html 目前这个 crate 中有三个主要接口： -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - 一个使用 [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 构造的类型，然后可以用作 `Future>`。如果 `Promise` 被解析，这个 `Future` 将解析为 `Ok`，如果 `Promise` 被拒绝，则解析为 `Err`，分别包含 `Promise` 的解析或拒绝值。 +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + 一个使用 [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 构造的类型，然后可以用作 `Future>`。如果 `Promise` 被解析，这个 `Future` 将解析为 `Ok`，如果 `Promise` 被拒绝，则解析为 `Err`，分别包含 `Promise` 的解析或拒绝值。 -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - 将 Rust `Future>` 转换为 JavaScript `Promise`。未来的结果将转换为 JavaScript 中的已解析或已拒绝 `Promise`。 -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - 在当前线程上生成一个 `Future`。这是在 Rust 中运行 Future 的最佳方法，而不是将其发送到 JavaScript。 -_[`wasm-bindgen-futures` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` 将是 Yew 中 `wasm-bindgen-futures` crate 中最常用的部分，因为这有助于使用具有异步 API 的库。 @@ -174,4 +174,4 @@ spawn_local(async { Yew 还在某些 API 中添加了对 futures 的支持，最值得注意的是您可以创建一个接受 `async` 块的 `callback_future` - 这在内部使用了 `spawn_local`。 -_[`spawn_local` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx index 133a1961e..82713cbfa 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx @@ -61,13 +61,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[`wasm-bindgen` 指引中的 `web-sys` 继承](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)_ +_[`wasm-bindgen` 指引中的 `web-sys` 继承](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)_ ## `NodeRef` 中的 `Node` -Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 来提供一种方式来保留由 [`html!`](concepts/html/introduction.mdx) 宏创建的 `Node` 的引用。`NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。`NodeRef::get` 方法将返回一个 `Option` 值，但是，在 Yew 中，大多数情况下，您希望将此值转换为特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 对 `Node` 值进行转换，但是 Yew 提供了 `NodeRef::cast` 方法来执行此转换，以方便使用，因此您不一定需要为 `JsCast` 特性包含 `wasm-bindgen` 依赖项。 +Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 来提供一种方式来保留由 [`html!`](concepts/html/introduction.mdx) 宏创建的 `Node` 的引用。`NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。`NodeRef::get` 方法将返回一个 `Option` 值，但是，在 Yew 中，大多数情况下，您希望将此值转换为特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 对 `Node` 值进行转换，但是 Yew 提供了 `NodeRef::cast` 方法来执行此转换，以方便使用，因此您不一定需要为 `JsCast` 特性包含 `wasm-bindgen` 依赖项。 -下面的两个代码块本质上是相同的，第一个使用 `NodeRef::cast`，第二个使用 [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 返回的 `web_sys::Node` 上。 +下面的两个代码块本质上是相同的，第一个使用 `NodeRef::cast`，第二个使用 [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 返回的 `web_sys::Node` 上。 diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx index 00bcc99d3..55a199a4d 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: '事件' ## 介绍 -Yew 与 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate 集成，并使用该 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 宏中接受的所有 `web-sys` 事件。 +Yew 与 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate 集成，并使用该 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 宏中接受的所有 `web-sys` 事件。 您仍然可以为下表中未列出的事件添加 [`Callback`](../function-components/callbacks.mdx)，请参见[手动事件监听器](#manual-event-listener)。 @@ -52,9 +52,9 @@ yew::set_event_bubbling(false); 这也意味着由 Yew 注册的事件通常会在其他事件监听器之前触发。 -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## 具备类型的事件目标 @@ -66,7 +66,7 @@ yew::set_event_bubbling(false); 在事件 `Callback` 中，您可能希望获取该事件的目标。例如，`change` 事件没有提供任何信息，但用于通知某些内容已更改。 -在 Yew 中，以正确的类型获取目标元素可以通过几种方式完成，我们将在这里逐一介绍。调用事件上的 [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 返回一个可选的 [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 类型，当您想知道输入元素的值时，这可能看起来不是很有用。 +在 Yew 中，以正确的类型获取目标元素可以通过几种方式完成，我们将在这里逐一介绍。调用事件上的 [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 返回一个可选的 [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 类型，当您想知道输入元素的值时，这可能看起来不是很有用。 在下面的所有方法中，我们将解决相同的问题，以便清楚地了解方法的不同之处，而不是手头的问题。 @@ -84,7 +84,7 @@ pub enum Msg { ### 使用 `JsCast` -[`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一个有用的 trait：[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允许我们在类型之间直接转换，只要它实现了 `JsCast` 就行。我们可以谨慎地转换，这涉及运行时检查和处理 `Option` 和 `Result` 的逻辑，或者我们也可以冒险直接强行转换。 +[`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一个有用的 trait：[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允许我们在类型之间直接转换，只要它实现了 `JsCast` 就行。我们可以谨慎地转换，这涉及运行时检查和处理 `Option` 和 `Result` 的逻辑，或者我们也可以冒险直接强行转换。 多说无益，看代码： @@ -154,11 +154,11 @@ fn MyComponent() -> Html { } ``` -`JsCast` 提供的方法是 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -和 [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 -如你所见，它们允许我们从 `EventTarget` 转换为 [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 +`JsCast` 提供的方法是 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +和 [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 +如你所见，它们允许我们从 `EventTarget` 转换为 [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 `dyn_into` 方法是谨慎的，因为它会在运行时检查类型是否实际为 `HtmlInputElement`，如果不是则返回 -`Err(JsValue)`。[`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`。[`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 是一个通用类型，将原来的对象返回给你，以便再次尝试转换为别的类型。 这会儿你可能会想，什么时候可以使用危险版本？在上面的情况下，它是安全的1，因为我们将 `Callback` 设置在一个没有子元素的元素上，所以目标只能是同一个元素。 @@ -323,11 +323,11 @@ fn MyComponent() -> Html { 您可能希望监听 Yew 的 `html` 宏不支持的事件，查看[这里列出的支持的事件](#event-types)。 -为了手动向某个元素添加事件监听器，我们需要借助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 添加监听器。 +为了手动向某个元素添加事件监听器，我们需要借助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 添加监听器。 以下示例将展示如何为虚构的 `custard` 事件添加监听器。所有不受 yew 支持的事件或自定义事件都可以表示为 -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要访问自定义/不受支持事件的特定方法或字段，可以使用 -[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法将其转换为所需的类型。 +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要访问自定义/不受支持事件的特定方法或字段，可以使用 +[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法将其转换为所需的类型。 ### 使用 `Closure`（冗长版本） @@ -383,7 +383,7 @@ fn MyComponent() -> Html { } ``` -有关 `Closure` 的更多信息，请参见 [wasm-bindgen 指南](https://rustwasm.github.io/wasm-bindgen/examples/closures.html)。 +有关 `Closure` 的更多信息，请参见 [wasm-bindgen 指南](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html)。 ### 使用 `gloo`（简洁版本） diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx index ba115e72d..b9e69abf9 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx @@ -35,7 +35,7 @@ cargo install --locked trunk 除了 Trunk 之外，还有其他选项可用于打包 Yew 应用程序。您可能想尝试以下选项之一： -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (仍在早期开发阶段) diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx index 659cca974..1ea571ca5 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx @@ -26,7 +26,7 @@ Yew 支持的最低 Rust 版本 (MSRV) 是`1.49.0` 。旧版本可能会导致 [开始使用 `trunk`](project-setup/using-trunk.mdx) -### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/) +### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/) 由 Rust / Wasm 工作组开发的用于打包 WebAssembly 的 CLI 工具。最好与[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)一起使用。 `wasm-pack`的主要目的是构建用于 JavaScript 的 Wasm 库。因此，它只能构建库，不提供开发服务器或自动重建等有用工具。 @@ -47,7 +47,7 @@ Yew 支持的最低 Rust 版本 (MSRV) 是`1.49.0` 。旧版本可能会导致 | 本地服务器 | 支持 | 仅限 webpack 插件版本 | 支持 | | 根据本地更改自动重新构建 | 支持 | 仅限 webpack 插件版本 | 支持 | | 资源处理 | 支持 | 仅限 webpack 插件版本 | 仅限静态资源 | -| 无头浏览器测试 | [开发中](https://github.com/thedodd/trunk/issues/20) | [支持](https://rustwasm.github.io/wasm-pack/book/commands/test.html) | [支持](https://github.com/koute/cargo-web#features) | +| 无头浏览器测试 | [开发中](https://github.com/thedodd/trunk/issues/20) | [支持](https://github.com/drager/wasm-pack/book/commands/test.html) | [支持](https://github.com/koute/cargo-web#features) | | 支持生成的目标代码 |
  • wasm32-unknown-unknown
|
  • wasm32-unknown-unknown
|
  • wasm32-unknown-unknown
  • wasm32-unknown-emscripten
  • asmjs-unknown-emscripten
| | `web-sys` | 兼容 | 兼容 | 不兼容 | | `stdweb` | 不兼容 | 兼容 | 兼容 | diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx index a7c04befe..e892bb64c 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx @@ -2,7 +2,7 @@ title: 使用 wasm-pack --- -这个工具由 Rust / Wasm 工作组开发维护，并且是现在最为活跃的 WebAssembly 应用开发工具。 它支持将代码打包成 `npm` 模块，并且随附了 [Webpack 插件](https://github.com/wasm-tool/wasm-pack-plugin)，可以轻松的与已有的 JavaScript 应用结合。可以点击[这里](https://rustwasm.github.io/docs/wasm-pack/introduction.html)了解更多。 +这个工具由 Rust / Wasm 工作组开发维护，并且是现在最为活跃的 WebAssembly 应用开发工具。 它支持将代码打包成 `npm` 模块，并且随附了 [Webpack 插件](https://github.com/wasm-tool/wasm-pack-plugin)，可以轻松的与已有的 JavaScript 应用结合。可以点击[这里](https://drager.github.io/wasm-pack/book/introduction.html)了解更多。 :::note 注：如果使用 `wasm-pack`作为开发工具，`Cargo.toml` 中的 `crate-type` 需要指定为 `cdylib` diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx index 7f8c5758e..af106a4ef 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -14,7 +14,7 @@ Yew 使用 `wasm-bindgen` 通过一些 crate 与浏览器进行交互： 本节将从更抽象的层次上探讨这些 crate，以便更容易地理解和使用 Yew 中的 `wasm-bindgen` API。要了解有关 `wasm-bindgen` 及其相关 crate 的更深入指南，请查看 [`wasm-bindgen` 指引](https://wasm-bindgen.github.io/wasm-bindgen/)。 -有关上述 crate 的文档，请查看 [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 +有关上述 crate 的文档，请查看 [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 :::tip 使用 `wasm-bindgen` doc.rs 搜索来查找已使用 `wasm-bindgen` 导入的浏览器 API 和 JavaScript 类型。 @@ -77,21 +77,21 @@ _这个示例是基于 [1.2 使用 console.log 的 `wasm-bindgen` 指引](https: _[`wasm-bindgen` 指引中的 extends 部分](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 这是 JavaScript 拥有的对象的表示，这是 `wasm-bindgen` 的根捕获类型。任何来自 `wasm-bindgen` 的类型都是 `JsValue`，这是因为 JavaScript 没有强类型系统，因此接受变量 `x` 的任何函数都不定义其类型，因此 `x` 可以是有效的 JavaScript 值；因此 `JsValue`。如果您正在使用接受 `JsValue` 的导入函数或类型，那么任何导入的值在技术上都是有效的。 `JsValue` 可以被函数接受，但该函数可能仍然只接受某些类型，这可能会导致 panic - 因此在使用原始 `wasm-bindgen` API 时，请检查导入的 JavaScript 的文档，以确定是否会在该值不是某种类型时引发异常（panic）。 -_[`JsValue` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。_ +_[`JsValue` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。_ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust 有一个强类型系统，而 JavaScript……没有😞。为了让 Rust 保持这些强类型但仍然方便，WebAssembly 工作组提出了一个非常巧妙的特性 `JsCast`。它的工作是帮助您从一个 JavaScript "类型" 转换到另一个 "类型"，这听起来很模糊，但它意味着如果您有一个类型，您知道它是另一个类型，那么您可以使用 `JsCast` 的函数从一个类型跳到另一个类型。当使用 `web-sys`、`wasm_bindgen`、`js-sys` 时，了解这个很好的特性 - 您会注意到许多类型将从这些 crate 中实现 `JsCast`。 `JsCast` 提供了转换的检查和不检查方法 - 因此在运行时，如果您不确定某个对象是什么类型，您可以尝试将其转换，这将返回可能的失败类型，如 [`Option`](https://doc.rust-lang.org/std/option/enum.Option.html) 和 [`Result`](https://doc.rust-lang.org/std/result/enum.Result.html)。 -一个常见的例子是在 [`web-sys`](./web-sys.mdx) 中，当您尝试获取事件的目标时。您可能知道目标元素是什么，但 [`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 总是会返回一个 [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 +一个常见的例子是在 [`web-sys`](./web-sys.mdx) 中，当您尝试获取事件的目标时。您可能知道目标元素是什么，但 [`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 总是会返回一个 [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 您需要将其转换为元素类型，以便调用其方法。 ```rust @@ -115,19 +115,19 @@ fn handle_event(event: Event) { } ``` -[`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一个检查的转换，返回一个 `Option<&T>`，这意味着如果转换失败，则可以再次使用原始类型，因此返回 `None`。[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法将消耗 `self`，这是 Rust 中 `into` 方法的约定，返回的类型是 `Result`。如果转换失败，则原始的 `Self` 值将在 `Err` 中返回。您可以再试一次或对原始类型进行其他操作。 +[`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一个检查的转换，返回一个 `Option<&T>`，这意味着如果转换失败，则可以再次使用原始类型，因此返回 `None`。[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法将消耗 `self`，这是 Rust 中 `into` 方法的约定，返回的类型是 `Result`。如果转换失败，则原始的 `Self` 值将在 `Err` 中返回。您可以再试一次或对原始类型进行其他操作。 -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) `Closure` 类型提供了一种将 Rust 闭包传递到 JavaScript 的方法，出于健全性原因，传递给 JavaScript 的闭包必须具有 `'static` 生命周期。 这种类型是一个“句柄”，意味着每当它被丢弃时，它将使其引用的 JS 闭包无效。在 `Closure` 被丢弃后，对 JS 中闭包的任何使用都将引发异常。 -当您使用接受类型 [`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的 `js-sys` 或 `web-sys` API 时，通常会使用 `Closure`。在 [Events](../html/events.mdx) 页面的 [Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到在 Yew 中使用 `Closure` 的示例。 +当您使用接受类型 [`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的 `js-sys` 或 `web-sys` API 时，通常会使用 `Closure`。在 [Events](../html/events.mdx) 页面的 [Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到在 Yew 中使用 `Closure` 的示例。 -_[`Closure` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -135,7 +135,7 @@ _[`Closure` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/clo 这不包括任何 Web API，因为这是 [`web-sys`](./web-sys.mdx) 的作用！ -_[`js-sys` 文档](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -143,18 +143,18 @@ _[`js-sys` 文档](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html 目前这个 crate 中有三个主要接口： -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - 一个使用 [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 构造的类型，然后可以用作 `Future>`。如果 `Promise` 被解析，这个 `Future` 将解析为 `Ok`，如果 `Promise` 被拒绝，则解析为 `Err`，分别包含 `Promise` 的解析或拒绝值。 +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + 一个使用 [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 构造的类型，然后可以用作 `Future>`。如果 `Promise` 被解析，这个 `Future` 将解析为 `Ok`，如果 `Promise` 被拒绝，则解析为 `Err`，分别包含 `Promise` 的解析或拒绝值。 -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - 将 Rust `Future>` 转换为 JavaScript `Promise`。未来的结果将转换为 JavaScript 中的已解析或已拒绝 `Promise`。 -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - 在当前线程上生成一个 `Future`。这是在 Rust 中运行 Future 的最佳方法，而不是将其发送到 JavaScript。 -_[`wasm-bindgen-futures` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` 将是 Yew 中 `wasm-bindgen-futures` crate 中最常用的部分，因为这有助于使用具有异步 API 的库。 @@ -174,4 +174,4 @@ spawn_local(async { Yew 还在某些 API 中添加了对 futures 的支持，最值得注意的是您可以创建一个接受 `async` 块的 `callback_future` - 这在内部使用了 `spawn_local`。 -_[`spawn_local` 文档](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` 文档](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx index 133a1961e..82713cbfa 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx @@ -61,13 +61,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[`wasm-bindgen` 指引中的 `web-sys` 继承](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)_ +_[`wasm-bindgen` 指引中的 `web-sys` 继承](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)_ ## `NodeRef` 中的 `Node` -Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 来提供一种方式来保留由 [`html!`](concepts/html/introduction.mdx) 宏创建的 `Node` 的引用。`NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。`NodeRef::get` 方法将返回一个 `Option` 值，但是，在 Yew 中，大多数情况下，您希望将此值转换为特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 对 `Node` 值进行转换，但是 Yew 提供了 `NodeRef::cast` 方法来执行此转换，以方便使用，因此您不一定需要为 `JsCast` 特性包含 `wasm-bindgen` 依赖项。 +Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 来提供一种方式来保留由 [`html!`](concepts/html/introduction.mdx) 宏创建的 `Node` 的引用。`NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。`NodeRef::get` 方法将返回一个 `Option` 值，但是，在 Yew 中，大多数情况下，您希望将此值转换为特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 对 `Node` 值进行转换，但是 Yew 提供了 `NodeRef::cast` 方法来执行此转换，以方便使用，因此您不一定需要为 `JsCast` 特性包含 `wasm-bindgen` 依赖项。 -下面的两个代码块本质上是相同的，第一个使用 `NodeRef::cast`，第二个使用 [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 返回的 `web_sys::Node` 上。 +下面的两个代码块本质上是相同的，第一个使用 `NodeRef::cast`，第二个使用 [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 返回的 `web_sys::Node` 上。 diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx index 00bcc99d3..55a199a4d 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: '事件' ## 介绍 -Yew 与 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate 集成，并使用该 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 宏中接受的所有 `web-sys` 事件。 +Yew 与 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate 集成，并使用该 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 宏中接受的所有 `web-sys` 事件。 您仍然可以为下表中未列出的事件添加 [`Callback`](../function-components/callbacks.mdx)，请参见[手动事件监听器](#manual-event-listener)。 @@ -52,9 +52,9 @@ yew::set_event_bubbling(false); 这也意味着由 Yew 注册的事件通常会在其他事件监听器之前触发。 -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## 具备类型的事件目标 @@ -66,7 +66,7 @@ yew::set_event_bubbling(false); 在事件 `Callback` 中，您可能希望获取该事件的目标。例如，`change` 事件没有提供任何信息，但用于通知某些内容已更改。 -在 Yew 中，以正确的类型获取目标元素可以通过几种方式完成，我们将在这里逐一介绍。调用事件上的 [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 返回一个可选的 [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 类型，当您想知道输入元素的值时，这可能看起来不是很有用。 +在 Yew 中，以正确的类型获取目标元素可以通过几种方式完成，我们将在这里逐一介绍。调用事件上的 [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 返回一个可选的 [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 类型，当您想知道输入元素的值时，这可能看起来不是很有用。 在下面的所有方法中，我们将解决相同的问题，以便清楚地了解方法的不同之处，而不是手头的问题。 @@ -84,7 +84,7 @@ pub enum Msg { ### 使用 `JsCast` -[`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一个有用的 trait：[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允许我们在类型之间直接转换，只要它实现了 `JsCast` 就行。我们可以谨慎地转换，这涉及运行时检查和处理 `Option` 和 `Result` 的逻辑，或者我们也可以冒险直接强行转换。 +[`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一个有用的 trait：[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允许我们在类型之间直接转换，只要它实现了 `JsCast` 就行。我们可以谨慎地转换，这涉及运行时检查和处理 `Option` 和 `Result` 的逻辑，或者我们也可以冒险直接强行转换。 多说无益，看代码： @@ -154,11 +154,11 @@ fn MyComponent() -> Html { } ``` -`JsCast` 提供的方法是 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -和 [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 -如你所见，它们允许我们从 `EventTarget` 转换为 [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 +`JsCast` 提供的方法是 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +和 [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 +如你所见，它们允许我们从 `EventTarget` 转换为 [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 `dyn_into` 方法是谨慎的，因为它会在运行时检查类型是否实际为 `HtmlInputElement`，如果不是则返回 -`Err(JsValue)`。[`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`。[`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 是一个通用类型，将原来的对象返回给你，以便再次尝试转换为别的类型。 这会儿你可能会想，什么时候可以使用危险版本？在上面的情况下，它是安全的1，因为我们将 `Callback` 设置在一个没有子元素的元素上，所以目标只能是同一个元素。 @@ -323,11 +323,11 @@ fn MyComponent() -> Html { 您可能希望监听 Yew 的 `html` 宏不支持的事件，查看[这里列出的支持的事件](#event-types)。 -为了手动向某个元素添加事件监听器，我们需要借助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 添加监听器。 +为了手动向某个元素添加事件监听器，我们需要借助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 添加监听器。 以下示例将展示如何为虚构的 `custard` 事件添加监听器。所有不受 yew 支持的事件或自定义事件都可以表示为 -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要访问自定义/不受支持事件的特定方法或字段，可以使用 -[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法将其转换为所需的类型。 +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要访问自定义/不受支持事件的特定方法或字段，可以使用 +[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法将其转换为所需的类型。 ### 使用 `Closure`（冗长版本） @@ -383,7 +383,7 @@ fn MyComponent() -> Html { } ``` -有关 `Closure` 的更多信息，请参见 [wasm-bindgen 指南](https://rustwasm.github.io/wasm-bindgen/examples/closures.html)。 +有关 `Closure` 的更多信息，请参见 [wasm-bindgen 指南](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html)。 ### 使用 `gloo`（简洁版本） diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx index ba115e72d..b9e69abf9 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx @@ -35,7 +35,7 @@ cargo install --locked trunk 除了 Trunk 之外，还有其他选项可用于打包 Yew 应用程序。您可能想尝试以下选项之一： -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (仍在早期开发阶段) diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx index e6b139429..4bf9ade92 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -14,7 +14,7 @@ Yew 使用 `wasm-bindgen` 透過一些 crate 與瀏覽器進行互動： 本節將從更抽象的層次探討這些 crate，以便更容易理解和使用 Yew 中的 `wasm-bindgen` API。要了解有關 `wasm-bindgen` 及其相關 crate 的更深入指南，請查看 [`wasm-bindgen` 指引](https://wasm-bindgen.github.io/wasm-bindgen/)。 -有關上述 crate 的文檔，請查看 [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 +有關上述 crate 的文檔，請查看 [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 :::tip 使用 `wasm-bindgen` doc.rs 搜尋來尋找已使用 `wasm-bindgen` 匯入的瀏覽器 API 和 JavaScript 類型。 @@ -77,21 +77,21 @@ _這個範例是基於 [1.2 使用 console.log 的 `wasm-bindgen` 指引](https: _[`wasm-bindgen` 指引中的 extends 部分](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 這是 JavaScript 擁有的物件的表示，這是 `wasm-bindgen` 的根捕獲類型。任何來自`wasm-bindgen` 的型別都是`JsValue`，這是因為JavaScript 沒有強型別系統，因此接受變數`x` 的任何函數都不定義其型別，因此`x` 可以是有效的JavaScript 值；因此`JsValue`。如果您正在使用接受 `JsValue` 的導入函數或類型，那麼任何導入的值在技術上都是有效的。 `JsValue` 可以被函數接受，但該函數可能仍然只接受某些類型，這可能會導致panic - 因此在使用原始`wasm-bindgen` API 時，請檢查導入的JavaScript 的文檔，以確定是否會在該值不是某種類型時引發異常（panic）。 -_[`JsValue` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。 _ +_[`JsValue` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。 _ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust 有一個強型別系統，而 JavaScript…沒有😞。為了讓 Rust 保持這些強型別但仍然方便，WebAssembly 工作小組提出了一個非常巧妙的特性 `JsCast`。它的工作是幫助您從一個JavaScript "類型" 轉換到另一個"類型"，這聽起來很模糊，但它意味著如果您有一個類型，您知道它是另一個類型，那麼您可以使用`JsCast ` 的函數從一個型別跳到另一個型別。當使用 `web-sys`、`wasm_bindgen`、`js-sys` 時，了解這個很好的特性 - 您會注意到許多類型將從這些 crate 中實作 `JsCast`。 `JsCast` 提供了轉換的檢查和不檢查方法- 因此在運行時，如果您不確定某個物件是什麼類型，您可以嘗試將其轉換，這將返回可能的失敗類型，如[`Option`] (https://doc.rust-lang.org/std/option/enum.Option.html) 和[`Result`](https://doc.rust-lang.org/std/result/enum.Result. html)。 -一個常見的例子是在 [`web-sys`](./web-sys.mdx) 中，當您嘗試取得事件的目標時。您可能知道目標元素是什麼，但[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 總是會回傳一個[` Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 +一個常見的例子是在 [`web-sys`](./web-sys.mdx) 中，當您嘗試取得事件的目標時。您可能知道目標元素是什麼，但[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 總是會回傳一個[` Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 您需要將其轉換為元素類型，以便呼叫其方法。 ```rust @@ -115,19 +115,19 @@ fn handle_event(event: Event) { } ``` -[`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一個檢查的轉換，回傳一個`Option<&T>`，這表示如果轉換失敗，則可以再次使用原始類型，因此傳回`None`。 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法將消耗`self`，這是Rust 中`into` 方法的約定，傳回的類型是`Result`。如果轉換失敗，則原始的 `Self` 值將在 `Err` 中傳回。您可以再試一次或對原始類型進行其他操作。 +[`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一個檢查的轉換，回傳一個`Option<&T>`，這表示如果轉換失敗，則可以再次使用原始類型，因此傳回`None`。 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法將消耗`self`，這是Rust 中`into` 方法的約定，傳回的類型是`Result`。如果轉換失敗，則原始的 `Self` 值將在 `Err` 中傳回。您可以再試一次或對原始類型進行其他操作。 -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) `Closure` 類型提供了一種將 Rust 閉包傳遞到 JavaScript 的方法，出於健全性原因，傳遞給 JavaScript 的閉包必須具有 `'static` 生命週期。 這種類型是一個“句柄”，這意味著每當它被丟棄時，它將使其引用的 JS 閉包無效。在 `Closure` 被丟棄後，對 JS 中閉包的任何使用都會引發異常。 -當您使用接受型別[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的`js-sys` 或`web-sys` API 時，通常會使用`Closure`。在[Events](../html/events.mdx) 頁面的[Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到Yew 中使用`Closure` 的範例。 +當您使用接受型別[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的`js-sys` 或`web-sys` API 時，通常會使用`Closure`。在[Events](../html/events.mdx) 頁面的[Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到Yew 中使用`Closure` 的範例。 -_[`Closure` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -135,7 +135,7 @@ _[`Closure` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/clo 這不包括任何 Web API，因為這是 [`web-sys`](./web-sys.mdx) 的作用！ -_[`js-sys` 文件](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -143,18 +143,18 @@ _[`js-sys` 文件](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html 目前這個 crate 中有三個主要介面： -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - 一個使用[`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 建構的類型，然後可以用作`Future>`。如果 `Promise` 被解析，這個 `Future` 將解析為 `Ok`，如果 `Promise` 被拒絕，則解析為 `Err`，分別包含 `Promise` 的解析或拒絕值。 +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + 一個使用[`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 建構的類型，然後可以用作`Future>`。如果 `Promise` 被解析，這個 `Future` 將解析為 `Ok`，如果 `Promise` 被拒絕，則解析為 `Err`，分別包含 `Promise` 的解析或拒絕值。 -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - 將 Rust `Future>` 轉換為 JavaScript `Promise`。未來的結果將轉換為 JavaScript 中的已解析或已拒絕 `Promise`。 -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - 在目前執行緒上產生一個 `Future`。這是在 Rust 中運行 Future 的最佳方法，而不是將其發送到 JavaScript。 -_[`wasm-bindgen-futures` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` 將是 Yew 中 `wasm-bindgen-futures` crate 中最常用的部分，因為這有助於使用具有非同步 API 的函式庫。 @@ -174,4 +174,4 @@ spawn_local(async { Yew 還在某些 API 中添加了對 futures 的支持，最值得注意的是您可以創建一個接受 `async` 區塊的 `callback_future` - 這在內部使用了 `spawn_local`。 -_[`spawn_local` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx index c90bcd4ae..b62cfe23e 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx @@ -61,13 +61,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[`wasm-bindgen` 指引中的 `web-sys` 繼承](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)_ +_[`wasm-bindgen` 指引中的 `web-sys` 繼承](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)_ ## `NodeRef` 中的 `Node` -Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 來提供一種方式來保留由 [`html!`](concepts/html/introduction.mdx) 巨集所建立的 `Node` 的引用。 `NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。 `NodeRef::get` 方法將傳回一個 `Option` 值，但是，在 Yew 中，大多數情況下，您希望將此值轉換為特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 對 `Node` 值進行轉換，但是Yew 提供了 `NodeRef::cast` 方法來執行此轉換，以方便使用，因此您不一定需要為 `JsCast` 特性包含 `wasm-bindgen` 依賴項。 +Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 來提供一種方式來保留由 [`html!`](concepts/html/introduction.mdx) 巨集所建立的 `Node` 的引用。 `NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。 `NodeRef::get` 方法將傳回一個 `Option` 值，但是，在 Yew 中，大多數情況下，您希望將此值轉換為特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 對 `Node` 值進行轉換，但是Yew 提供了 `NodeRef::cast` 方法來執行此轉換，以方便使用，因此您不一定需要為 `JsCast` 特性包含 `wasm-bindgen` 依賴項。 -下面的兩個程式碼區塊本質上是相同的，第一個使用 `NodeRef::cast`，第二個使用 [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 傳回的 `web_sys::Node` 上。 +下面的兩個程式碼區塊本質上是相同的，第一個使用 `NodeRef::cast`，第二個使用 [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 傳回的 `web_sys::Node` 上。 diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx index 09a05190b..6457ff7b5 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: '事件' ## 介紹 -Yew 與 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate 集成，並使用該 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 巨集中接受的所有 `web-sys` 事件。 +Yew 與 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate 集成，並使用該 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 巨集中接受的所有 `web-sys` 事件。 您仍然可以為下表中未列出的事件新增 [`Callback`](../function-components/callbacks.mdx)，請參閱[手動事件監聽器](#manual-event-listener)。 @@ -52,9 +52,9 @@ yew::set_event_bubbling(false); 這也意味著由 Yew 註冊的事件通常會在其他事件監聽器之前觸發。 -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## 具備類型的事件目標 @@ -66,7 +66,7 @@ yew::set_event_bubbling(false); 在事件 `Callback` 中，您可能想要取得該事件的目標。例如，`change` 事件沒有提供任何訊息，但用於通知某些內容已更改。 -在 Yew 中，以正確的類型獲取目標元素可以透過幾種方式完成，我們將在這裡逐一介紹。呼叫事件上的[`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 傳回一個可選的[ `web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 類型，當您想知道輸入元素的值時，這可能看起來不太有用。 +在 Yew 中，以正確的類型獲取目標元素可以透過幾種方式完成，我們將在這裡逐一介紹。呼叫事件上的[`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 傳回一個可選的[ `web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 類型，當您想知道輸入元素的值時，這可能看起來不太有用。 在下面的所有方法中，我們將解決相同的問題，以便清楚地了解方法的不同之處，而不是手邊的問題。 @@ -84,7 +84,7 @@ pub enum Msg { ### 使用 `JsCast` -[`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一個有用的trait：[`JsCast`](https://rustwasm.github .io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允許我們在類型之間直接轉換，只要它實現了`JsCast` 就行。我們可以謹慎地轉換，這涉及運行時檢查和處理 `Option` 和 `Result` 的邏輯，或者我們也可以冒險直接強行轉換。 +[`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一個有用的trait：[`JsCast`](https://rustwasm.github .io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允許我們在類型之間直接轉換，只要它實現了`JsCast` 就行。我們可以謹慎地轉換，這涉及運行時檢查和處理 `Option` 和 `Result` 的邏輯，或者我們也可以冒險直接強行轉換。 多說無益，看代碼： @@ -154,11 +154,11 @@ fn MyComponent() -> Html { } ``` -`JsCast` 提供的方法是 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -和 [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 -如你所見，它們允許我們從 `EventTarget` 轉換為 [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 +`JsCast` 提供的方法是 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +和 [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 +如你所見，它們允許我們從 `EventTarget` 轉換為 [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 `dyn_into` 方法是謹慎的，因為它會在運行時檢查類型是否實際為 `HtmlInputElement`，如果不是則返回 -`Err(JsValue)`。 [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`。 [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 是一個通用類型，將原來的物件回傳給你，以便再次嘗試轉換為別的類型。 這會兒你可能會想，什麼時候可以使用危險版本？在上面的情況下，它是安全的1，因為我們將 `Callback` 設定在一個沒有子元素的元素上，所以目標只能是同一個元素。 @@ -323,11 +323,11 @@ fn MyComponent() -> Html { 您可能想要監聽 Yew 的 `html` 巨集不支援的事件，請查看[這裡列出的支援的事件](#event-types)。 -為了手動為某個元素新增事件監聽器，我們需要藉助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 新增監聽器。 +為了手動為某個元素新增事件監聽器，我們需要藉助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 新增監聽器。 以下範例將展示如何為虛構的 `custard` 事件新增監聽器。所有不受 yew 支援的事件或自訂事件都可以表示為 -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要存取自訂/不受支援事件的特定方法或字段，可以使用 -[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法將其轉換為所需的類型。 +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要存取自訂/不受支援事件的特定方法或字段，可以使用 +[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法將其轉換為所需的類型。 ### 使用 `Closure`（冗長版本） @@ -383,7 +383,7 @@ fn MyComponent() -> Html { } ``` -有關 `Closure` 的更多信息，請參見 [wasm-bindgen 指南](https://rustwasm.github.io/wasm-bindgen/examples/closures.html)。 +有關 `Closure` 的更多信息，請參見 [wasm-bindgen 指南](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html)。 ### 使用 `gloo`（簡潔版本） diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx index 3677be622..f8a2c0ca1 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/getting-started/introduction.mdx @@ -35,7 +35,7 @@ cargo install --locked trunk 除了 Trunk 之外，還有其他選項可用於打包 Yew 應用程式。您可能想嘗試以下選項之一： -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (仍在早期開發階段) diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx index 3808c7b3e..e78dce138 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/build-a-sample-app.mdx @@ -99,7 +99,7 @@ mkdir static ## 執行你的 App！ -使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備，先用`cargo install wasm-pack`安裝 `wasm-pack` ，然後用下面的指令，建置與開啟開發用伺服器： +使用 [`wasm-pack`](https://drager.github.io/wasm-pack/book/) 來執行專案是比較好的選擇。如果你還沒有做任何準備，先用`cargo install wasm-pack`安裝 `wasm-pack` ，然後用下面的指令，建置與開啟開發用伺服器： ```bash wasm-pack build --target web --out-name wasm --out-dir ./static diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx index 0706e4936..ca1afe3fc 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx @@ -12,7 +12,7 @@ description: Set yourself up for success 我們需要額外的工具來增加 WebAssembly 與 JavaScript 的互操作性。此外，根據你選擇的工具，他們可以產生當你的應用程式運行在瀏覽器時， `.wasm` 檔案所需要的 JavaScript 程式碼，減少佈署與打包的麻煩。 -### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/) +### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/) 一套 CLI 工具，由 Rust/Wasm Working Group 為了編譯並打包 WebAssembly 所開發的。最好與 Webpack 的 [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) 搭配使用。 @@ -91,7 +91,7 @@ description: Set yourself up for success 無頭瀏覽器測試 - + Supported diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx index 106cd01bd..6c22f088a 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx @@ -1,6 +1,6 @@ # 使用 wasm-pack -這個工具由 Rust / Wasm Working Group 開發，是建置 WebAssembly 應用程式中，社群最活躍的開發工具。他可以幫忙打包程式碼進 `npm` 的模組中，同時也有一個相應的 [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin) 可以配合使用，並輕鬆跟已經存在的 JavaScript 應用程式整合。詳情請參考[這裡](https://rustwasm.github.io/docs/wasm-pack/introduction.html)。 +這個工具由 Rust / Wasm Working Group 開發，是建置 WebAssembly 應用程式中，社群最活躍的開發工具。他可以幫忙打包程式碼進 `npm` 的模組中，同時也有一個相應的 [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin) 可以配合使用，並輕鬆跟已經存在的 JavaScript 應用程式整合。詳情請參考[這裡](https://drager.github.io/wasm-pack/book/introduction.html)。 :::note 注意，使用 `wasm-pack` 時，`Cargo.toml` 的 crate-type 必須是 `cdylib`。 diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx index 727e71165..2ba434b03 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.20/getting-started/build-a-sample-app.mdx @@ -99,7 +99,7 @@ mkdir static ## 執行你的 App！ -使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備，先用`cargo install wasm-pack`安裝 `wasm-pack` ，然後用下面的指令，建置與開啟開發用伺服器： +使用 [`wasm-pack`](https://drager.github.io/wasm-pack/book/) 來執行專案是比較好的選擇。如果你還沒有做任何準備，先用`cargo install wasm-pack`安裝 `wasm-pack` ，然後用下面的指令，建置與開啟開發用伺服器： ```bash wasm-pack build --target web --out-name wasm --out-dir ./static diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx index 727e71165..2ba434b03 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx @@ -99,7 +99,7 @@ mkdir static ## 執行你的 App！ -使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備，先用`cargo install wasm-pack`安裝 `wasm-pack` ，然後用下面的指令，建置與開啟開發用伺服器： +使用 [`wasm-pack`](https://drager.github.io/wasm-pack/book/) 來執行專案是比較好的選擇。如果你還沒有做任何準備，先用`cargo install wasm-pack`安裝 `wasm-pack` ，然後用下面的指令，建置與開啟開發用伺服器： ```bash wasm-pack build --target web --out-name wasm --out-dir ./static diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx index e6b139429..4bf9ade92 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -14,7 +14,7 @@ Yew 使用 `wasm-bindgen` 透過一些 crate 與瀏覽器進行互動： 本節將從更抽象的層次探討這些 crate，以便更容易理解和使用 Yew 中的 `wasm-bindgen` API。要了解有關 `wasm-bindgen` 及其相關 crate 的更深入指南，請查看 [`wasm-bindgen` 指引](https://wasm-bindgen.github.io/wasm-bindgen/)。 -有關上述 crate 的文檔，請查看 [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 +有關上述 crate 的文檔，請查看 [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html)。 :::tip 使用 `wasm-bindgen` doc.rs 搜尋來尋找已使用 `wasm-bindgen` 匯入的瀏覽器 API 和 JavaScript 類型。 @@ -77,21 +77,21 @@ _這個範例是基於 [1.2 使用 console.log 的 `wasm-bindgen` 指引](https: _[`wasm-bindgen` 指引中的 extends 部分](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 這是 JavaScript 擁有的物件的表示，這是 `wasm-bindgen` 的根捕獲類型。任何來自`wasm-bindgen` 的型別都是`JsValue`，這是因為JavaScript 沒有強型別系統，因此接受變數`x` 的任何函數都不定義其型別，因此`x` 可以是有效的JavaScript 值；因此`JsValue`。如果您正在使用接受 `JsValue` 的導入函數或類型，那麼任何導入的值在技術上都是有效的。 `JsValue` 可以被函數接受，但該函數可能仍然只接受某些類型，這可能會導致panic - 因此在使用原始`wasm-bindgen` API 時，請檢查導入的JavaScript 的文檔，以確定是否會在該值不是某種類型時引發異常（panic）。 -_[`JsValue` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。 _ +_[`JsValue` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)。 _ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust 有一個強型別系統，而 JavaScript…沒有😞。為了讓 Rust 保持這些強型別但仍然方便，WebAssembly 工作小組提出了一個非常巧妙的特性 `JsCast`。它的工作是幫助您從一個JavaScript "類型" 轉換到另一個"類型"，這聽起來很模糊，但它意味著如果您有一個類型，您知道它是另一個類型，那麼您可以使用`JsCast ` 的函數從一個型別跳到另一個型別。當使用 `web-sys`、`wasm_bindgen`、`js-sys` 時，了解這個很好的特性 - 您會注意到許多類型將從這些 crate 中實作 `JsCast`。 `JsCast` 提供了轉換的檢查和不檢查方法- 因此在運行時，如果您不確定某個物件是什麼類型，您可以嘗試將其轉換，這將返回可能的失敗類型，如[`Option`] (https://doc.rust-lang.org/std/option/enum.Option.html) 和[`Result`](https://doc.rust-lang.org/std/result/enum.Result. html)。 -一個常見的例子是在 [`web-sys`](./web-sys.mdx) 中，當您嘗試取得事件的目標時。您可能知道目標元素是什麼，但[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 總是會回傳一個[` Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 +一個常見的例子是在 [`web-sys`](./web-sys.mdx) 中，當您嘗試取得事件的目標時。您可能知道目標元素是什麼，但[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API 總是會回傳一個[` Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target)。 您需要將其轉換為元素類型，以便呼叫其方法。 ```rust @@ -115,19 +115,19 @@ fn handle_event(event: Event) { } ``` -[`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一個檢查的轉換，回傳一個`Option<&T>`，這表示如果轉換失敗，則可以再次使用原始類型，因此傳回`None`。 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法將消耗`self`，這是Rust 中`into` 方法的約定，傳回的類型是`Result`。如果轉換失敗，則原始的 `Self` 值將在 `Err` 中傳回。您可以再試一次或對原始類型進行其他操作。 +[`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) 方法是一個檢查的轉換，回傳一個`Option<&T>`，這表示如果轉換失敗，則可以再次使用原始類型，因此傳回`None`。 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 方法將消耗`self`，這是Rust 中`into` 方法的約定，傳回的類型是`Result`。如果轉換失敗，則原始的 `Self` 值將在 `Err` 中傳回。您可以再試一次或對原始類型進行其他操作。 -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) `Closure` 類型提供了一種將 Rust 閉包傳遞到 JavaScript 的方法，出於健全性原因，傳遞給 JavaScript 的閉包必須具有 `'static` 生命週期。 這種類型是一個“句柄”，這意味著每當它被丟棄時，它將使其引用的 JS 閉包無效。在 `Closure` 被丟棄後，對 JS 中閉包的任何使用都會引發異常。 -當您使用接受型別[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的`js-sys` 或`web-sys` API 時，通常會使用`Closure`。在[Events](../html/events.mdx) 頁面的[Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到Yew 中使用`Closure` 的範例。 +當您使用接受型別[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html) 的`js-sys` 或`web-sys` API 時，通常會使用`Closure`。在[Events](../html/events.mdx) 頁面的[Using `Closure` 部分](../html/events.mdx#using-closure-verbose) 中可以找到Yew 中使用`Closure` 的範例。 -_[`Closure` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -135,7 +135,7 @@ _[`Closure` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/clo 這不包括任何 Web API，因為這是 [`web-sys`](./web-sys.mdx) 的作用！ -_[`js-sys` 文件](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -143,18 +143,18 @@ _[`js-sys` 文件](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html 目前這個 crate 中有三個主要介面： -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - 一個使用[`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 建構的類型，然後可以用作`Future>`。如果 `Promise` 被解析，這個 `Future` 將解析為 `Ok`，如果 `Promise` 被拒絕，則解析為 `Err`，分別包含 `Promise` 的解析或拒絕值。 +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + 一個使用[`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) 建構的類型，然後可以用作`Future>`。如果 `Promise` 被解析，這個 `Future` 將解析為 `Ok`，如果 `Promise` 被拒絕，則解析為 `Err`，分別包含 `Promise` 的解析或拒絕值。 -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - 將 Rust `Future>` 轉換為 JavaScript `Promise`。未來的結果將轉換為 JavaScript 中的已解析或已拒絕 `Promise`。 -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - 在目前執行緒上產生一個 `Future`。這是在 Rust 中運行 Future 的最佳方法，而不是將其發送到 JavaScript。 -_[`wasm-bindgen-futures` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` 將是 Yew 中 `wasm-bindgen-futures` crate 中最常用的部分，因為這有助於使用具有非同步 API 的函式庫。 @@ -174,4 +174,4 @@ spawn_local(async { Yew 還在某些 API 中添加了對 futures 的支持，最值得注意的是您可以創建一個接受 `async` 區塊的 `callback_future` - 這在內部使用了 `spawn_local`。 -_[`spawn_local` 文件](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` 文件](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx index c90bcd4ae..b62cfe23e 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx @@ -61,13 +61,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[`wasm-bindgen` 指引中的 `web-sys` 繼承](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)_ +_[`wasm-bindgen` 指引中的 `web-sys` 繼承](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)_ ## `NodeRef` 中的 `Node` -Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 來提供一種方式來保留由 [`html!`](concepts/html/introduction.mdx) 巨集所建立的 `Node` 的引用。 `NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。 `NodeRef::get` 方法將傳回一個 `Option` 值，但是，在 Yew 中，大多數情況下，您希望將此值轉換為特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 對 `Node` 值進行轉換，但是Yew 提供了 `NodeRef::cast` 方法來執行此轉換，以方便使用，因此您不一定需要為 `JsCast` 特性包含 `wasm-bindgen` 依賴項。 +Yew 使用 [`NodeRef`](concepts/function-components/node-refs.mdx) 來提供一種方式來保留由 [`html!`](concepts/html/introduction.mdx) 巨集所建立的 `Node` 的引用。 `NodeRef` 中的 `Node` 指的是 [`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html)。 `NodeRef::get` 方法將傳回一個 `Option` 值，但是，在 Yew 中，大多數情況下，您希望將此值轉換為特定元素，以便使用其特定方法。如果存在，可以使用 [`JsCast`](./wasm-bindgen.mdx#JsCast) 對 `Node` 值進行轉換，但是Yew 提供了 `NodeRef::cast` 方法來執行此轉換，以方便使用，因此您不一定需要為 `JsCast` 特性包含 `wasm-bindgen` 依賴項。 -下面的兩個程式碼區塊本質上是相同的，第一個使用 `NodeRef::cast`，第二個使用 [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 傳回的 `web_sys::Node` 上。 +下面的兩個程式碼區塊本質上是相同的，第一個使用 `NodeRef::cast`，第二個使用 [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) 在 `NodeRef::get` 傳回的 `web_sys::Node` 上。 diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx index 09a05190b..6457ff7b5 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: '事件' ## 介紹 -Yew 與 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate 集成，並使用該 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 巨集中接受的所有 `web-sys` 事件。 +Yew 與 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate 集成，並使用該 crate 中的事件。下面的[表格](#event-types)列出了在 `html!` 巨集中接受的所有 `web-sys` 事件。 您仍然可以為下表中未列出的事件新增 [`Callback`](../function-components/callbacks.mdx)，請參閱[手動事件監聽器](#manual-event-listener)。 @@ -52,9 +52,9 @@ yew::set_event_bubbling(false); 這也意味著由 Yew 註冊的事件通常會在其他事件監聽器之前觸發。 -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## 具備類型的事件目標 @@ -66,7 +66,7 @@ yew::set_event_bubbling(false); 在事件 `Callback` 中，您可能想要取得該事件的目標。例如，`change` 事件沒有提供任何訊息，但用於通知某些內容已更改。 -在 Yew 中，以正確的類型獲取目標元素可以透過幾種方式完成，我們將在這裡逐一介紹。呼叫事件上的[`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 傳回一個可選的[ `web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 類型，當您想知道輸入元素的值時，這可能看起來不太有用。 +在 Yew 中，以正確的類型獲取目標元素可以透過幾種方式完成，我們將在這裡逐一介紹。呼叫事件上的[`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) 傳回一個可選的[ `web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) 類型，當您想知道輸入元素的值時，這可能看起來不太有用。 在下面的所有方法中，我們將解決相同的問題，以便清楚地了解方法的不同之處，而不是手邊的問題。 @@ -84,7 +84,7 @@ pub enum Msg { ### 使用 `JsCast` -[`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一個有用的trait：[`JsCast`](https://rustwasm.github .io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允許我們在類型之間直接轉換，只要它實現了`JsCast` 就行。我們可以謹慎地轉換，這涉及運行時檢查和處理 `Option` 和 `Result` 的邏輯，或者我們也可以冒險直接強行轉換。 +[`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate 有一個有用的trait：[`JsCast`](https://rustwasm.github .io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)，它允許我們在類型之間直接轉換，只要它實現了`JsCast` 就行。我們可以謹慎地轉換，這涉及運行時檢查和處理 `Option` 和 `Result` 的邏輯，或者我們也可以冒險直接強行轉換。 多說無益，看代碼： @@ -154,11 +154,11 @@ fn MyComponent() -> Html { } ``` -`JsCast` 提供的方法是 [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -和 [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 -如你所見，它們允許我們從 `EventTarget` 轉換為 [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 +`JsCast` 提供的方法是 [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +和 [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into)。 +如你所見，它們允許我們從 `EventTarget` 轉換為 [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html)。 `dyn_into` 方法是謹慎的，因為它會在運行時檢查類型是否實際為 `HtmlInputElement`，如果不是則返回 -`Err(JsValue)`。 [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`。 [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) 是一個通用類型，將原來的物件回傳給你，以便再次嘗試轉換為別的類型。 這會兒你可能會想，什麼時候可以使用危險版本？在上面的情況下，它是安全的1，因為我們將 `Callback` 設定在一個沒有子元素的元素上，所以目標只能是同一個元素。 @@ -323,11 +323,11 @@ fn MyComponent() -> Html { 您可能想要監聽 Yew 的 `html` 巨集不支援的事件，請查看[這裡列出的支援的事件](#event-types)。 -為了手動為某個元素新增事件監聽器，我們需要藉助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 新增監聽器。 +為了手動為某個元素新增事件監聽器，我們需要藉助 [`NodeRef`](../function-components/node-refs.mdx)，以便在 `use_effect_with` 中使用 [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) 和 [wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API 新增監聽器。 以下範例將展示如何為虛構的 `custard` 事件新增監聽器。所有不受 yew 支援的事件或自訂事件都可以表示為 -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要存取自訂/不受支援事件的特定方法或字段，可以使用 -[`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法將其轉換為所需的類型。 +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html)。如果您需要存取自訂/不受支援事件的特定方法或字段，可以使用 +[`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) 的方法將其轉換為所需的類型。 ### 使用 `Closure`（冗長版本） @@ -383,7 +383,7 @@ fn MyComponent() -> Html { } ``` -有關 `Closure` 的更多信息，請參見 [wasm-bindgen 指南](https://rustwasm.github.io/wasm-bindgen/examples/closures.html)。 +有關 `Closure` 的更多信息，請參見 [wasm-bindgen 指南](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html)。 ### 使用 `gloo`（簡潔版本） diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx index 3677be622..f8a2c0ca1 100644 --- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx +++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.22/getting-started/introduction.mdx @@ -35,7 +35,7 @@ cargo install --locked trunk 除了 Trunk 之外，還有其他選項可用於打包 Yew 應用程式。您可能想嘗試以下選項之一： -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (仍在早期開發階段) diff --git a/website/versioned_docs/version-0.18.0/concepts/html/events.mdx b/website/versioned_docs/version-0.18.0/concepts/html/events.mdx index 113247a7e..501de73ed 100644 --- a/website/versioned_docs/version-0.18.0/concepts/html/events.mdx +++ b/website/versioned_docs/version-0.18.0/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'Events' ## Introduction -Yew integrates with the [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate and +Yew integrates with the [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate and uses the events from that crate. The [table below](#event-types) lists all of the `web-sys` events that are accepted in the `html!` macro. @@ -219,7 +219,7 @@ fn view(&self) -> Html { If you want to get the value as a number (`f64`) then `InputData` does have the `event` field which is the `web_sys::InputEvent` that you can use with the information provided in the [Typed event target](#typed-event-target) section and then you can call -[`value_as_number`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html#method.value_as_number) +[`value_as_number`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html#method.value_as_number) method on the target. ### `onchange` using ChangeData @@ -338,8 +338,8 @@ In event `Callback`s you may want to get the target of that event. For example, `input` event you may want to update some internal state. In Yew getting the target element in the correct type can be done in a couple of ways and we will go through -them here. Calling [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) -on an event returns an optional [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) +them here. Calling [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +on an event returns an optional [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) type, which might not seem very useful when you want to know the value of your input element. In all the approaches below we are going to tackle the same problem, so it's clear where the approach @@ -361,8 +361,8 @@ pub enum Msg { ### Using `JsCast` -The [`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has -a useful trait; [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +The [`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has +a useful trait; [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) which allows us to hop and skip our way to the type we want, as long as it implements `JsCast`. We can do this cautiously, which involves some runtime checks and failure types like `Option` and `Result`, or we can do it dangerously. @@ -470,13 +470,13 @@ impl Component for Comp { Use `batch_callback` when you want to conditionally return a value from a `Callback`. ::: -The methods from `JsCast` are [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -and [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) +The methods from `JsCast` are [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +and [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) and you can probably see, they allowed -us to go from `EventTarget` to [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). +us to go from `EventTarget` to [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). The `dyn_into` method is cautious because at runtime it will check whether the type is actually a `HtmlInputElement` and if not return an -`Err(JsValue)`, the [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`, the [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) is a catch-all type and is essentially giving you back the object to try again. At this point you might be thinking... when is the dangerous version ok to use? In the case above it @@ -633,16 +633,16 @@ You may want to listen to an event that is not supported by Yew's `html` macro, In order to add an event listener to one of elements manually we need the help of [`NodeRef`](../components/refs) so that in the `rendered` method we can add a listener using the -[`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) and -[wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. +[`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) and +[wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. We do this in `rendered` as this is the only time we can guarantee that the element exists in the browser, Yew needs some time to create them after `view` is called. The examples below are going to show adding listeners for the made-up `custard` event. All events either unsupported by yew or custom can be represented as a -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you need to access a specific method or field on a custom / unsupported event then you can use the -methods of [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +methods of [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) in order to convert to the type required. ### Using `Closure` (verbose) @@ -747,7 +747,7 @@ impl Component for Comp { ``` For more information on `Closures`, see -[The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/examples/closures.html). +[The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html). ### Using `gloo` (concise) diff --git a/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/wasm-bindgen.mdx b/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/wasm-bindgen.mdx index 0aa382b88..27ddc4a3e 100644 --- a/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/wasm-bindgen.mdx +++ b/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/wasm-bindgen.mdx @@ -17,7 +17,7 @@ This section will explore some of these crates in a high level in order to make and use `wasm-bindgen` APIs with Yew. For a more in-depth guide into `wasm-bindgen` and it's associated crates then check out [The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/). -For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html). +For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html). :::tip Use the `wasm-bindgen` doc.rs search to find browser APIs and JavaScript types that have been imported @@ -103,7 +103,7 @@ below. _[extends section in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`. Any type that comes from `wasm-bindgen` is a `JsValue` and this is because JavaScript doesn't have @@ -115,9 +115,9 @@ accept a `JsValue`, then any imported value is _technically_ valid. can lead to panics - so when using raw `wasm-bindgen` APIs check the documentation of the JavaScript being imported whether an exception will be caused if that value is not a certain type. -_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ +_[`JsValue` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust has a strong type system and JavaScript...doesn't 😞 So in order for Rust to maintain these strong types but still be convenient the web assembly group came up with a pretty neat trait `JsCast`. @@ -133,7 +133,7 @@ unsure what type a certain object is you can try to cast it which returns possib A common example of this in [`web-sys`](web-sys) is when you are trying to get the target of an event, you might know what the target element is but the -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) so you will need to cast it to the element type so you can call it's methods. ```rust @@ -157,17 +157,17 @@ fn handle_event(event: Event) { } ``` -The [`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) +The [`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) method is a checked cast that returns an `Option<&T>` which means the original type can be used again if the cast failed and thus returned `None`. The -[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) method will consume `self`, as per convention for into methods in Rust, and the type returned is `Result` this means if the casting fails then the value in `Err` is so you can try again or do something else with the original type. -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) The `Closure` type provides a way to transfer Rust closures to JavaScript, the closures passed to JavaScript must have a `'static` lifetime for soundness reasons. @@ -177,10 +177,10 @@ closure that it refers to. Any usage of the closure in JS after the Closure has raise an exception. `Closure` is often used when you are working with a `js-sys` or `web-sys` API that accepts a type -[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html). +[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html). An example of using a `Closure` in Yew can be found in the [Using `Closure` section](../html/events#using-closure-verbose) on the [Events](../html/events) page. -_[`Closure` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -189,7 +189,7 @@ their methods and properties. This does not include any web APIs as this is what [`web-sys`](web-sys) is for! -_[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -200,23 +200,23 @@ and provides the ability to interoperate with JavaScript events and JavaScript I There are three main interfaces in this crate currently: -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - A type that is constructed with a [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + A type that is constructed with a [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) and can then be used as a `Future>`. This Rust future will resolve or reject with the value coming out of the `Promise`. -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Converts a Rust `Future>` into a JavaScript `Promise`. The future’s result will translate to either a resolved or rejected `Promise` in JavaScript. -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - Spawns a `Future` on the current thread. This is the best way to run a Future in Rust without sending it to JavaScript. -_[`wasm-bindgen-futures` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` is going to be the most commonly used part of the `wasm-bindgen-futures` crate in Yew as this helps when using libraries that have async APIs. @@ -238,4 +238,4 @@ spawn_local(async { Yew has also added support for futures in certain APIs, most notably you can create a `callback_future` which accepts an `async` block - this uses `spawn_local` internally. -_[`spawn_local` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/web-sys.mdx b/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/web-sys.mdx index 47a940fd9..69ee6d644 100644 --- a/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/web-sys.mdx +++ b/website/versioned_docs/version-0.18.0/concepts/wasm-bindgen/web-sys.mdx @@ -68,13 +68,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)._ +_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)._ ## The `Node` in `NodeRef` Yew uses a [`NodeRef`](../components/refs) in order to provide a way for keeping a reference to a `Node` made by the [`html!`](../html/introduction) macro. The `Node` part of `NodeRef` is referring to -[`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The +[`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The `NodeRef::get` method will return a `Option` value, however, most of the time in Yew you want to cast this value to a specific element so you can use it's specific methods. This casting can be done using [`JsCast`](../wasm-bindgen#JsCast) on the `Node` value, if present, but Yew @@ -82,7 +82,7 @@ provides the `NodeRef::cast` method to perform this casting for convenience and necessarily have to include the `wasm-bindgen` dependency for the `JsCast` trait. The two code blocks below do essentially the same thing, the first is using `NodeRef::cast` and -the second is using [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +the second is using [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) on the `web_sys::Node` returned from `NodeRef::get`. ```rust diff --git a/website/versioned_docs/version-0.18.0/getting-started/introduction.mdx b/website/versioned_docs/version-0.18.0/getting-started/introduction.mdx index 4866caf59..4dbeb0d2d 100644 --- a/website/versioned_docs/version-0.18.0/getting-started/introduction.mdx +++ b/website/versioned_docs/version-0.18.0/getting-started/introduction.mdx @@ -34,7 +34,7 @@ All of our examples are built with Trunk. [Getting started with `trunk`](getting-started/project-setup/using-trunk.mdx) -### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/) +### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/) A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used together with the [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) for Webpack. @@ -58,7 +58,7 @@ This was the best preferred tool to use before the creation of `wasm-bindgen`. | Local Server | Supported | Only with webpack plugin | Supported | | Auto rebuild on local changes | Supported | Only with webpack plugin | Supported | | Asset handling | Supported | Only with webpack plugin | Static assets only | -| Headless Browser Testing | [In Progress](https://github.com/thedodd/trunk/issues/20) | [Supported](https://rustwasm.github.io/wasm-pack/book/commands/test.html) | [Supported](https://github.com/koute/cargo-web#features) | +| Headless Browser Testing | [In Progress](https://github.com/thedodd/trunk/issues/20) | [Supported](https://github.com/drager/wasm-pack/book/commands/test.html) | [Supported](https://github.com/koute/cargo-web#features) | | Supported Targets |
  • wasm32-unknown-unknown
|
  • wasm32-unknown-unknown
|
  • wasm32-unknown-unknown
  • wasm32-unknown-emscripten
  • asmjs-unknown-emscripten
| | `web-sys` | Compatible | Compatible | Incompatible | | `stdweb` | Incompatible | Compatible | Compatible | diff --git a/website/versioned_docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx b/website/versioned_docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx index 39fa9d054..c6ca3959f 100644 --- a/website/versioned_docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx +++ b/website/versioned_docs/version-0.18.0/getting-started/project-setup/using-wasm-pack.mdx @@ -2,7 +2,7 @@ title: 'Using wasm-pack' --- -This tool was created by the Rust / Wasm Working Group for building WebAssembly applications. It supports packaging code into `npm` modules and has an accompanying [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin) for easy integration with existing JavaScript applications. More information is given in [the `wasm-pack` documentation](https://rustwasm.github.io/docs/wasm-pack/introduction.html). +This tool was created by the Rust / Wasm Working Group for building WebAssembly applications. It supports packaging code into `npm` modules and has an accompanying [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin) for easy integration with existing JavaScript applications. More information is given in [the `wasm-pack` documentation](https://drager.github.io/wasm-pack/book/introduction.html). :::note `wasm-pack` requires that you set the crate-type explicitly to include `cdylib`: diff --git a/website/versioned_docs/version-0.19.0/concepts/html/events.mdx b/website/versioned_docs/version-0.19.0/concepts/html/events.mdx index 5f3ad6a73..56217f3b1 100644 --- a/website/versioned_docs/version-0.19.0/concepts/html/events.mdx +++ b/website/versioned_docs/version-0.19.0/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'Events' ## Introduction -Yew integrates with the [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate and +Yew integrates with the [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate and uses the events from that crate. The [table below](#event-types) lists all of the `web-sys` events that are accepted in the `html!` macro. @@ -148,8 +148,8 @@ In event `Callback`s you may want to get the target of that event. For example, `change` event gives no information but is used to notify that something has changed. In Yew getting the target element in the correct type can be done in a few ways and we will go through -them here. Calling [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) -on an event returns an optional [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) +them here. Calling [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +on an event returns an optional [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) type, which might not seem very useful when you want to know the value of your input element. In all the approaches below we are going to tackle the same problem, so it's clear where the approach @@ -170,8 +170,8 @@ pub enum Msg { ### Using `JsCast` -The [`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has -a useful trait; [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +The [`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has +a useful trait; [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) which allows us to hop and skip our way to the type we want, as long as it implements `JsCast`. We can do this cautiously, which involves some runtime checks and failure types like `Option` and `Result`, or we can do it dangerously. @@ -261,13 +261,13 @@ impl Component for Comp { Use `batch_callback` when you want to conditionally return a value from a `Callback`. ::: -The methods from `JsCast` are [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -and [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) +The methods from `JsCast` are [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +and [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) and you can probably see, they allowed -us to go from `EventTarget` to [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). +us to go from `EventTarget` to [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). The `dyn_into` method is cautious because at runtime it will check whether the type is actually a `HtmlInputElement` and if not return an -`Err(JsValue)`, the [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`, the [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) is a catch-all type and is essentially giving you back the object to try again. At this point you might be thinking... when is the dangerous version ok to use? In the case above it @@ -498,16 +498,16 @@ You may want to listen to an event that is not supported by Yew's `html` macro, In order to add an event listener to one of elements manually we need the help of [`NodeRef`](../components/refs) so that in the `rendered` method we can add a listener using the -[`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) and -[wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. +[`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) and +[wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. We do this in `rendered` as this is the only time we can guarantee that the element exists in the browser, Yew needs some time to create them after `view` is called. The examples below are going to show adding listeners for the made-up `custard` event. All events either unsupported by yew or custom can be represented as a -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you need to access a specific method or field on a custom / unsupported event then you can use the -methods of [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +methods of [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) in order to convert to the type required. ### Using `Closure` (verbose) @@ -607,7 +607,7 @@ impl Component for Comp { ``` For more information on `Closures`, see -[The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/examples/closures.html). +[The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html). ### Using `gloo` (concise) diff --git a/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx b/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx index 0503171ce..7f034e163 100644 --- a/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx +++ b/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/introduction.mdx @@ -19,7 +19,7 @@ This section will explore some of these crates in a high level in order to make and use `wasm-bindgen` APIs with Yew. For a more in-depth guide into `wasm-bindgen` and it's associated crates then check out [The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/). -For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html). +For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html). :::tip Use the `wasm-bindgen` doc.rs search to find browser APIs and JavaScript types that have been imported @@ -105,7 +105,7 @@ below. _[extends section in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`. Any type that comes from `wasm-bindgen` is a `JsValue` and this is because JavaScript doesn't have @@ -117,9 +117,9 @@ accept a `JsValue`, then any imported value is _technically_ valid. can lead to panics - so when using raw `wasm-bindgen` APIs check the documentation of the JavaScript being imported whether an exception will be caused if that value is not a certain type. -_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ +_[`JsValue` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust has a strong type system and JavaScript...doesn't 😞 So in order for Rust to maintain these strong types but still be convenient the web assembly group came up with a pretty neat trait `JsCast`. @@ -135,7 +135,7 @@ unsure what type a certain object is you can try to cast it which returns possib A common example of this in [`web-sys`](wasm-bindgen/web-sys) is when you are trying to get the target of an event, you might know what the target element is but the -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) so you will need to cast it to the element type. so you can call its methods. ```rust @@ -159,17 +159,17 @@ fn handle_event(event: Event) { } ``` -The [`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) +The [`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) method is a checked cast that returns an `Option<&T>` which means the original type can be used again if the cast failed and thus returned `None`. The -[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) method will consume `self`, as per convention for into methods in Rust, and the type returned is `Result`. If the casting fails, the original `Self` value is returned in `Err`. You can try again or do something else with the original type. -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) The `Closure` type provides a way to transfer Rust closures to JavaScript, the closures passed to JavaScript must have a `'static` lifetime for soundness reasons. @@ -179,10 +179,10 @@ closure that it refers to. Any usage of the closure in JS after the Closure has raise an exception. `Closure` is often used when you are working with a `js-sys` or `web-sys` API that accepts a type -[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html). +[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html). An example of using a `Closure` in Yew can be found in the [Using `Closure` section](html/events#using-closure-verbose) on the [Events](html/events) page. -_[`Closure` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -191,7 +191,7 @@ their methods and properties. This does not include any web APIs as this is what [`web-sys`](wasm-bindgen/web-sys) is for! -_[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -202,23 +202,23 @@ and provides the ability to interoperate with JavaScript events and JavaScript I There are three main interfaces in this crate currently: -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - A type that is constructed with a [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + A type that is constructed with a [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) and can then be used as a `Future>`. This Rust future will resolve or reject with the value coming out of the `Promise`. -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Converts a Rust `Future>` into a JavaScript `Promise`. The future’s result will translate to either a resolved or rejected `Promise` in JavaScript. -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - Spawns a `Future` on the current thread. This is the best way to run a Future in Rust without sending it to JavaScript. -_[`wasm-bindgen-futures` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` is going to be the most commonly used part of the `wasm-bindgen-futures` crate in Yew as this helps when using libraries that have async APIs. @@ -240,4 +240,4 @@ spawn_local(async { Yew has also added support for futures in certain APIs, most notably you can create a `callback_future` which accepts an `async` block - this uses `spawn_local` internally. -_[`spawn_local` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/web-sys.mdx b/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/web-sys.mdx index fd56cb0e0..22d5847c5 100644 --- a/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/web-sys.mdx +++ b/website/versioned_docs/version-0.19.0/concepts/wasm-bindgen/web-sys.mdx @@ -71,13 +71,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)._ +_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)._ ## The `Node` in `NodeRef` Yew uses a [`NodeRef`](../components/refs) in order to provide a way for keeping a reference to a `Node` made by the [`html!`](../html/introduction) macro. The `Node` part of `NodeRef` is referring to -[`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The +[`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The `NodeRef::get` method will return a `Option` value, however, most of the time in Yew you want to cast this value to a specific element so you can use it's specific methods. This casting can be done using [`JsCast`](../wasm-bindgen#JsCast) on the `Node` value, if present, but Yew @@ -85,7 +85,7 @@ provides the `NodeRef::cast` method to perform this casting for convenience and necessarily have to include the `wasm-bindgen` dependency for the `JsCast` trait. The two code blocks below do essentially the same thing, the first is using `NodeRef::cast` and -the second is using [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +the second is using [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) on the `web_sys::Node` returned from `NodeRef::get`. diff --git a/website/versioned_docs/version-0.19.0/getting-started/project-setup/using-wasm-pack.mdx b/website/versioned_docs/version-0.19.0/getting-started/project-setup/using-wasm-pack.mdx index 39fa9d054..c6ca3959f 100644 --- a/website/versioned_docs/version-0.19.0/getting-started/project-setup/using-wasm-pack.mdx +++ b/website/versioned_docs/version-0.19.0/getting-started/project-setup/using-wasm-pack.mdx @@ -2,7 +2,7 @@ title: 'Using wasm-pack' --- -This tool was created by the Rust / Wasm Working Group for building WebAssembly applications. It supports packaging code into `npm` modules and has an accompanying [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin) for easy integration with existing JavaScript applications. More information is given in [the `wasm-pack` documentation](https://rustwasm.github.io/docs/wasm-pack/introduction.html). +This tool was created by the Rust / Wasm Working Group for building WebAssembly applications. It supports packaging code into `npm` modules and has an accompanying [Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin) for easy integration with existing JavaScript applications. More information is given in [the `wasm-pack` documentation](https://drager.github.io/wasm-pack/book/introduction.html). :::note `wasm-pack` requires that you set the crate-type explicitly to include `cdylib`: diff --git a/website/versioned_docs/version-0.19.0/more/wasm-build-tools.mdx b/website/versioned_docs/version-0.19.0/more/wasm-build-tools.mdx index 4c2ba218c..4d10259cb 100644 --- a/website/versioned_docs/version-0.19.0/more/wasm-build-tools.mdx +++ b/website/versioned_docs/version-0.19.0/more/wasm-build-tools.mdx @@ -21,7 +21,7 @@ All of our examples are built with Trunk. [Getting started with `trunk`](../getting-started/project-setup/using-trunk.mdx) -### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/) +### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/) A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used together with the [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) for Webpack. @@ -39,6 +39,6 @@ Because of this, it can only build libraries and doesn't provide useful tools li | Local Server | Supported | Only with webpack plugin | | Auto rebuild on local changes | Supported | Only with webpack plugin | | Asset handling | Supported | Only with webpack plugin | -| Headless Browser Testing | [In Progress](https://github.com/thedodd/trunk/issues/20) | [Supported](https://rustwasm.github.io/wasm-pack/book/commands/test.html) | +| Headless Browser Testing | [In Progress](https://github.com/thedodd/trunk/issues/20) | [Supported](https://github.com/drager/wasm-pack/book/commands/test.html) | | Supported Targets |
  • wasm32-unknown-unknown
|
  • wasm32-unknown-unknown
| | Example Usage | [Sample app](./../getting-started/build-a-sample-app.mdx) | [Starter template](https://github.com/yewstack/yew-wasm-pack-minimal) | diff --git a/website/versioned_docs/version-0.20/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/versioned_docs/version-0.20/concepts/basic-web-technologies/wasm-bindgen.mdx index fbe12f6b3..a853f6126 100644 --- a/website/versioned_docs/version-0.20/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/versioned_docs/version-0.20/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -18,7 +18,7 @@ This section will explore some of these crates in a high level in order to make and use `wasm-bindgen` APIs with Yew. For a more in-depth guide to `wasm-bindgen` and its associated crates then check out [The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/). -For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html). +For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html). :::tip Use the `wasm-bindgen` doc.rs search to find browser APIs and JavaScript types that have been imported @@ -103,7 +103,7 @@ its own section below. _[extends section in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) {#jsvalue} +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) {#jsvalue} This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`. Any type that comes from `wasm-bindgen` is a `JsValue` and this is because JavaScript doesn't have @@ -115,9 +115,9 @@ accept a `JsValue`, then any imported value is _technically_ valid. can lead to panics - so when using raw `wasm-bindgen` APIs check the documentation of the JavaScript being imported as to whether an exception (panic) will be raised if that value is not a certain type. -_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ +_[`JsValue` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) {#JsCast} +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) {#JsCast} Rust has a strong type system and JavaScript...doesn't 😞. In order for Rust to maintain these strong types but still be convenient the WebAssembly group came up with a pretty neat trait `JsCast`. @@ -133,7 +133,7 @@ unsure what type a certain object is you can try to cast it which returns possib A common example of this in [`web-sys`](./web-sys.mdx) is when you are trying to get the target of an event, you might know what the target element is but the -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) so you will need to cast it to the element type. so you can call its methods. ```rust @@ -157,17 +157,17 @@ fn handle_event(event: Event) { } ``` -The [`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) +The [`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) method is a checked cast that returns an `Option<&T>` which means the original type can be used again if the cast failed and thus returned `None`. The -[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) method will consume `self`, as per convention for into methods in Rust, and the type returned is `Result`. If the casting fails, the original `Self` value is returned in `Err`. You can try again or do something else with the original type. -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) The `Closure` type provides a way to transfer Rust closures to JavaScript, the closures passed to JavaScript must have a `'static` lifetime for soundness reasons. @@ -177,11 +177,11 @@ closure that it refers to. Any usage of the closure in JS after the Closure has raise an exception. `Closure` is often used when you are working with a `js-sys` or `web-sys` API that accepts a type -[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html). +[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html). An example of using a `Closure` in Yew can be found in the [Using `Closure` section](../html/events.mdx#using-closure-verbose) on the [Events](../html/events.mdx) page. -_[`Closure` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -190,7 +190,7 @@ their methods and properties. This does not include any web APIs as this is what [`web-sys`](./web-sys.mdx) is for! -_[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -202,23 +202,23 @@ with JavaScript events and JavaScript I/O primitives. There are three main interfaces in this crate currently: -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - A type that is constructed with a [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + A type that is constructed with a [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) and can then be used as a `Future>`. This Rust future will resolve or reject with the value coming out of the `Promise`. -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Converts a Rust `Future>` into a JavaScript `Promise`. The future’s result will translate to either a resolved or rejected `Promise` in JavaScript. -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - Spawns a `Future` on the current thread. This is the best way to run a Future in Rust without sending it to JavaScript. -_[`wasm-bindgen-futures` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` is going to be the most commonly used part of the `wasm-bindgen-futures` crate in Yew as this helps when using libraries that have async APIs. @@ -240,4 +240,4 @@ spawn_local(async { Yew has also added support for futures in certain APIs, most notably you can create a `callback_future` which accepts an `async` block - this uses `spawn_local` internally. -_[`spawn_local` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/versioned_docs/version-0.20/concepts/basic-web-technologies/web-sys.mdx b/website/versioned_docs/version-0.20/concepts/basic-web-technologies/web-sys.mdx index 3ebee641c..58dae94ba 100644 --- a/website/versioned_docs/version-0.20/concepts/basic-web-technologies/web-sys.mdx +++ b/website/versioned_docs/version-0.20/concepts/basic-web-technologies/web-sys.mdx @@ -75,13 +75,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)._ +_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)._ ## The `Node` in `NodeRef` Yew uses a [`NodeRef`](concepts/function-components/node-refs.mdx) in order to provide a way for keeping a reference to a `Node` made by the [`html!`](concepts/html/introduction.mdx) macro. The `Node` part of `NodeRef` is referring to -[`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The +[`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The `NodeRef::get` method will return a `Option` value, however, most of the time in Yew you want to cast this value to a specific element so you can use it's specific methods. This casting can be done using [`JsCast`](./wasm-bindgen.mdx#JsCast) on the `Node` value, if present, but Yew @@ -89,7 +89,7 @@ provides the `NodeRef::cast` method to perform this casting for convenience and necessarily have to include the `wasm-bindgen` dependency for the `JsCast` trait. The two code blocks below do essentially the same thing, the first is using `NodeRef::cast` and -the second is using [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +the second is using [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) on the `web_sys::Node` returned from `NodeRef::get`. diff --git a/website/versioned_docs/version-0.20/concepts/html/events.mdx b/website/versioned_docs/version-0.20/concepts/html/events.mdx index 84d924f4b..eebd477d5 100644 --- a/website/versioned_docs/version-0.20/concepts/html/events.mdx +++ b/website/versioned_docs/version-0.20/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'Events' ## Introduction -Yew integrates with the [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate and +Yew integrates with the [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate and uses the events from that crate. The [table below](#event-types) lists all of the `web-sys` events that are accepted in the `html!` macro. @@ -67,9 +67,9 @@ form is created. This can lead to mismatches between the event you'd expect in h This also means that events registered by Yew will usually fire before other event listeners. -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## Typed event target @@ -84,8 +84,8 @@ In event `Callback`s you may want to get the target of that event. For example, `change` event gives no information but is used to notify that something has changed. In Yew getting the target element in the correct type can be done in a few ways and we will go through -them here. Calling [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) -on an event returns an optional [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) +them here. Calling [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +on an event returns an optional [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) type, which might not seem very useful when you want to know the value of your input element. In all the approaches below we are going to tackle the same problem, so it's clear where the approach @@ -106,8 +106,8 @@ pub enum Msg { ### Using `JsCast` -The [`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has -a useful trait; [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +The [`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has +a useful trait; [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) which allows us to hop and skip our way to the type we want, as long as it implements `JsCast`. We can do this cautiously, which involves some runtime checks and failure types like `Option` and `Result`, or we can do it dangerously. @@ -183,13 +183,13 @@ fn MyComponent() -> Html { } ``` -The methods from `JsCast` are [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -and [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) +The methods from `JsCast` are [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +and [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) and you can probably see, they allowed -us to go from `EventTarget` to [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). +us to go from `EventTarget` to [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). The `dyn_into` method is cautious because at runtime it will check whether the type is actually a `HtmlInputElement` and if not return an -`Err(JsValue)`, the [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`, the [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) is a catch-all type and is essentially giving you back the object to try again. At this point you might be thinking... when is the dangerous version ok to use? In the case above it @@ -370,14 +370,14 @@ You may want to listen to an event that is not supported by Yew's `html` macro, In order to add an event listener to one of elements manually we need the help of [`NodeRef`](../function-components/node-refs.mdx) so that in `use_effect_with_deps` we can add a listener using the -[`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) and -[wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. +[`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) and +[wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. The examples below are going to show adding listeners for the made-up `custard` event. All events either unsupported by yew or custom can be represented as a -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you need to access a specific method or field on a custom / unsupported event then you can use the -methods of [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +methods of [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) in order to convert to the type required. ### Using `Closure` (verbose) @@ -436,7 +436,7 @@ fn MyComponent() -> Html { ``` For more information on `Closures`, see -[The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/examples/closures.html). +[The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html). ### Using `gloo` (concise) diff --git a/website/versioned_docs/version-0.20/getting-started/introduction.mdx b/website/versioned_docs/version-0.20/getting-started/introduction.mdx index 891864a48..1e0b8ad63 100644 --- a/website/versioned_docs/version-0.20/getting-started/introduction.mdx +++ b/website/versioned_docs/version-0.20/getting-started/introduction.mdx @@ -43,7 +43,7 @@ cargo install --locked trunk There are options other than Trunk that may be used for bundling Yew applications. You might want to try one of these options: -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (still in early development) diff --git a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx index 06a706c60..aa23164a5 100644 --- a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -18,7 +18,7 @@ This section will explore some of these crates at a high level, to make it easie and use `wasm-bindgen` APIs with Yew. For a more in-depth guide to `wasm-bindgen` and its associated crates then check out [The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/). -For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html). +For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html). :::tip Use the `wasm-bindgen` doc.rs search to find browser APIs and JavaScript types that have been imported @@ -103,7 +103,7 @@ its section below. _[extends section in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) {#jsvalue} +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) {#jsvalue} This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`. Because JavaScript does not have a strong type system, any type that comes from `wasm-bindgen` is a `JsValue`. @@ -115,9 +115,9 @@ Even though `JsValue` may be accepted by a JS function, that function may still Passing an incorrect `JsValue` can lead to an exception which triggers a panic - so when using raw `wasm-bindgen` APIs, check the your JavaScript's documentation for types of inputs that will cause an exception (and a panic). -_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ +_[`JsValue` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) {#JsCast} +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) {#JsCast} Rust has a strong type system and JavaScript...doesn't 😞. For Rust to maintain these strong types but still be convenient, the WebAssembly group came up with a pretty neat trait `JsCast`. @@ -133,7 +133,7 @@ unsure what type a certain object is, you can try to cast it, which returns poss A common example of this in [`web-sys`](./web-sys.mdx) is when you are trying to get the target of an event. You might know what the target element is, but the -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target). +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target). You will need to cast it to the element type so you can call its methods. ```rust @@ -157,17 +157,17 @@ fn handle_event(event: Event) { } ``` -The [`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) +The [`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) method is a checked cast that returns an `Option<&T>`, which means the original type can be used again if the cast failed and thus returned `None`. The -[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) method will consume `self`, as per convention for `into` methods in Rust, and the type returned is `Result`. If the casting fails, the original `Self` value is returned in `Err`. You can try again or do something else with the original type. -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) The `Closure` type provides a way to transfer Rust closures to JavaScript. The closures passed to JavaScript must have a `'static` lifetime for soundness reasons. @@ -177,11 +177,11 @@ closure that it refers to. Any usage of the closure in JS after the Closure has raise an exception. `Closure` is often used when you are working with a `js-sys` or `web-sys` API that accepts a type -[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html). +[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html). An example of using a `Closure` in Yew can be found in the [Using `Closure` section](../html/events.mdx#using-closure-verbose) on the [Events](../html/events.mdx) page. -_[`Closure` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -190,7 +190,7 @@ their methods and properties. This does not include any web APIs; that's what [`web-sys`](./web-sys.mdx) is for! -_[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -202,24 +202,24 @@ with JavaScript events and JavaScript I/O primitives. There are three main interfaces in this crate currently: -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - A type that is constructed with a [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + A type that is constructed with a [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) and can then be used as a `Future>`. This `Future` will resolve to `Ok` if the `Promise` is resolved and `Err` if the `Promise` is rejected, containing the resolved or rejected value from the `Promise` respectively. -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Converts a Rust `Future>` into a JavaScript `Promise`. The future’s result will translate to either a resolved or rejected `Promise` in JavaScript. -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - Spawns a `Future` on the current thread. This is the best way to run a Future in Rust without sending it to JavaScript. -_[`wasm-bindgen-futures` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` is going to be the most commonly used part of the `wasm-bindgen-futures` crate in Yew as this helps when using libraries that have async APIs. @@ -241,4 +241,4 @@ spawn_local(async { Yew has also added support for futures in certain APIs, most notably you can create a `callback_future` which accepts an `async` block - this uses `spawn_local` internally. -_[`spawn_local` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx index 392eb2d52..614354ba8 100644 --- a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx +++ b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx @@ -75,13 +75,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)._ +_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)._ ## The `Node` in `NodeRef` Yew uses a [`NodeRef`](concepts/function-components/node-refs.mdx) to provide a way for keeping a reference to a `Node` made by the [`html!`](concepts/html/introduction.mdx) macro. The `Node` part of `NodeRef` is referring to -[`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The +[`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The `NodeRef::get` method will return a `Option` value, however, most of the time in Yew you want to cast this value to a specific element so you can use its specific methods. This casting can be done using [`JsCast`](./wasm-bindgen.mdx#JsCast) on the `Node` value, if present, but Yew @@ -89,7 +89,7 @@ provides the `NodeRef::cast` method to perform this casting for convenience and necessarily have to include the `wasm-bindgen` dependency for the `JsCast` trait. The two code blocks below do essentially the same thing, the first is using `NodeRef::cast` and -the second is using [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +the second is using [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) on the `web_sys::Node` returned from `NodeRef::get`. diff --git a/website/versioned_docs/version-0.21/concepts/html/events.mdx b/website/versioned_docs/version-0.21/concepts/html/events.mdx index 25825bdbd..9a4af8c2f 100644 --- a/website/versioned_docs/version-0.21/concepts/html/events.mdx +++ b/website/versioned_docs/version-0.21/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'Events' ## Introduction -Yew integrates with the [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate and +Yew integrates with the [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate and uses the events from that crate. The [table below](#event-types) lists all of the `web-sys` events that are accepted in the `html!` macro. @@ -67,9 +67,9 @@ form is created. This can lead to mismatches between the event you would expect This also means that events registered by Yew will usually fire before other event listeners. -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## Typed event target @@ -84,8 +84,8 @@ In event `Callback`s you may want to get the target of that event. For example, `change` event gives no information but is used to notify that something has changed. In Yew getting the target element in the correct type can be done in a few ways and we will go through -them here. Calling [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) -on an event returns an optional [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) +them here. Calling [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +on an event returns an optional [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) type, which might not seem very useful when you want to know the value of your input element. In all the approaches below we are going to tackle the same problem, so it is clear where the approach @@ -106,8 +106,8 @@ pub enum Msg { ### Using `JsCast` -The [`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has -a useful trait; [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +The [`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has +a useful trait; [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) which allows us to hop and skip our way to the type we want, as long as it implements `JsCast`. We can do this cautiously, which involves some runtime checks and failure types like `Option` and `Result`, or we can do it dangerously. @@ -183,13 +183,13 @@ fn MyComponent() -> Html { } ``` -The methods from `JsCast` are [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -and [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) +The methods from `JsCast` are [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +and [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) and you can probably see, they allowed -us to go from `EventTarget` to [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). +us to go from `EventTarget` to [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). The `dyn_into` method is cautious because at runtime it will check whether the type is actually a `HtmlInputElement` and if not return an -`Err(JsValue)`, the [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`, the [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) is a catch-all type and is essentially giving you back the object to try again. At this point you might be thinking... when is the dangerous version ok to use? In the case above it @@ -370,14 +370,14 @@ You may want to listen to an event that is not supported by Yew's `html` macro, In order to add an event listener to one of elements manually we need the help of [`NodeRef`](../function-components/node-refs.mdx) so that in `use_effect_with` we can add a listener using the -[`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) and -[wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. +[`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) and +[wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. The examples below are going to show adding listeners for the made-up `custard` event. All events either unsupported by yew or custom can be represented as a -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you need to access a specific method or field on a custom / unsupported event then you can use the -methods of [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +methods of [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) in order to convert to the type required. ### Using `Closure` (verbose) @@ -436,7 +436,7 @@ fn MyComponent() -> Html { ``` For more information on `Closures`, see -[The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/examples/closures.html). +[The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html). ### Using `gloo` (concise) diff --git a/website/versioned_docs/version-0.21/getting-started/introduction.mdx b/website/versioned_docs/version-0.21/getting-started/introduction.mdx index ca2761a6e..42245745d 100644 --- a/website/versioned_docs/version-0.21/getting-started/introduction.mdx +++ b/website/versioned_docs/version-0.21/getting-started/introduction.mdx @@ -43,7 +43,7 @@ cargo install --locked trunk There are options other than Trunk that may be used for bundling Yew applications. You might want to try one of these options: -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (still in early development) diff --git a/website/versioned_docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/versioned_docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx index 3eb0072ba..424e79826 100644 --- a/website/versioned_docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx +++ b/website/versioned_docs/version-0.22/concepts/basic-web-technologies/wasm-bindgen.mdx @@ -18,7 +18,7 @@ This section will explore some of these crates at a high level, to make it easie and use `wasm-bindgen` APIs with Yew. For a more in-depth guide to `wasm-bindgen` and its associated crates then check out [The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/). -For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html). +For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html). :::tip Use the `wasm-bindgen` doc.rs search to find browser APIs and JavaScript types that have been imported @@ -97,12 +97,12 @@ These implementations allow you to call a method from `A` on an instance of `C` it was `&B` or `&A`. It is important to note that every single type imported using `#[wasm-bindgen]` has the same root type, -you can think of it as the `A` in the example above, this type is [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) which has +you can think of it as the `A` in the example above, this type is [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) which has its section below. _[extends section in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ -### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +### [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`. Any type that comes from `wasm-bindgen` is a `JsValue` and this is because JavaScript does not have @@ -114,9 +114,9 @@ accept a `JsValue`, then any imported value is _technically_ valid. can lead to panics - so when using raw `wasm-bindgen` APIs check the documentation of the JavaScript being imported as to whether an exception (panic) will be raised if that value is not a certain type. -_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ +_[`JsValue` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ -### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +### [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) Rust has a strong type system and JavaScript...doesn't 😞. For Rust to maintain these strong types but still be convenient, the WebAssembly group came up with a pretty neat trait `JsCast`. @@ -132,7 +132,7 @@ unsure what type a certain object is you can try to cast it which returns possib A common example of this in [`web-sys`](./web-sys.mdx) is when you are trying to get the target of an event. You might know what the target element is but the -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target). +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target). You will need to cast it to the element type so you can call its methods. ```rust @@ -156,17 +156,17 @@ fn handle_event(event: Event) { } ``` -The [`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) +The [`dyn_ref`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref) method is a checked cast that returns an `Option<&T>` which means the original type can be used again if the cast failed and thus returned `None`. The -[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +[`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) method will consume `self`, as per convention for `into` methods in Rust, and the type returned is `Result`. If the casting fails, the original `Self` value is returned in `Err`. You can try again or do something else with the original type. -_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ +_[`JsCast` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._ -### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) +### [`Closure`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html) The `Closure` type provides a way to transfer Rust closures to JavaScript, the closures passed to JavaScript must have a `'static` lifetime for soundness reasons. @@ -176,11 +176,11 @@ closure that it refers to. Any usage of the closure in JS after the Closure has raise an exception. `Closure` is often used when you are working with a `js-sys` or `web-sys` API that accepts a type -[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html). +[`&js_sys::Function`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Function.html). An example of using a `Closure` in Yew can be found in the [Using `Closure` section](../html/events.mdx#using-closure-verbose) on the [Events](../html/events.mdx) page. -_[`Closure` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ +_[`Closure` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._ ## [`js-sys`](https://crates.io/crates/js-sys) @@ -189,7 +189,7 @@ their methods and properties. This does not include any web APIs as this is what [`web-sys`](./web-sys.mdx) is for! -_[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._ +_[`js-sys` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/index.html)._ ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) @@ -201,24 +201,24 @@ with JavaScript events and JavaScript I/O primitives. There are three main interfaces in this crate currently: -1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - - A type that is constructed with a [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) +1. [`JsFuture`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) - + A type that is constructed with a [`Promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/js_sys/struct.Promise.html) and can then be used as a `Future>`. This `Future` will resolve to `Ok` if the `Promise` is resolved and `Err` if the `Promise` is rejected, containing the resolved or rejected value from the `Promise` respectively. -2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - +2. [`future_to_promise`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) - Converts a Rust `Future>` into a JavaScript `Promise`. The future’s result will translate to either a resolved or rejected `Promise` in JavaScript. -3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - +3. [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) - Spawns a `Future` on the current thread. This is the best way to run a Future in Rust without sending it to JavaScript. -_[`wasm-bindgen-futures` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ +_[`wasm-bindgen-futures` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._ -### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) +### [`spawn_local`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) `spawn_local` is going to be the most commonly used part of the `wasm-bindgen-futures` crate in Yew as this helps when using libraries that have async APIs. @@ -240,4 +240,4 @@ spawn_local(async { Yew has also added support for futures in certain APIs, most notably you can create a `callback_future` which accepts an `async` block - this uses `spawn_local` internally. -_[`spawn_local` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ +_[`spawn_local` documentation](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._ diff --git a/website/versioned_docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx b/website/versioned_docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx index a8fa90abf..f5bb18bee 100644 --- a/website/versioned_docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx +++ b/website/versioned_docs/version-0.22/concepts/basic-web-technologies/web-sys.mdx @@ -74,13 +74,13 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) { } ``` -_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/web-sys/inheritance.html)._ +_[Inheritance in `web-sys` in The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/web-sys/inheritance.html)._ ## The `Node` in `NodeRef` Yew uses a [`NodeRef`](concepts/function-components/node-refs.mdx) to provide a way for keeping a reference to a `Node` made by the [`html!`](concepts/html/introduction.mdx) macro. The `Node` part of `NodeRef` is referring to -[`web_sys::Node`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The +[`web_sys::Node`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Node.html). The `NodeRef::get` method will return a `Option` value, however, most of the time in Yew you want to cast this value to a specific element so you can use its specific methods. This casting can be done using [`JsCast`](./wasm-bindgen.mdx#JsCast) on the `Node` value, if present, but Yew @@ -88,7 +88,7 @@ provides the `NodeRef::cast` method to perform this casting for convenience and necessarily have to include the `wasm-bindgen` dependency for the `JsCast` trait. The two code blocks below do essentially the same thing, the first is using `NodeRef::cast` and -the second is using [`JsCast::dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +the second is using [`JsCast::dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) on the `web_sys::Node` returned from `NodeRef::get`. diff --git a/website/versioned_docs/version-0.22/concepts/html/events.mdx b/website/versioned_docs/version-0.22/concepts/html/events.mdx index 383ac9959..c199bfc3b 100644 --- a/website/versioned_docs/version-0.22/concepts/html/events.mdx +++ b/website/versioned_docs/version-0.22/concepts/html/events.mdx @@ -4,7 +4,7 @@ title: 'Events' ## Introduction -Yew integrates with the [`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/) crate and +Yew integrates with the [`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/) crate and uses the events from that crate. The [table below](#event-types) lists all of the `web-sys` events that are accepted in the `html!` macro. @@ -67,9 +67,9 @@ form is created. This can lead to mismatches between the event you would expect This also means that events registered by Yew will usually fire before other event listeners. -[`event::current_target`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target -[`event::event_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase -[`event::capturing_phase`]: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE +[`event::current_target`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.current_target +[`event::event_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.event_phase +[`event::capturing_phase`]: https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#associatedconstant.CAPTURING_PHASE ## Typed event target @@ -84,8 +84,8 @@ In event `Callback`s you may want to get the target of that event. For example, `change` event gives no information but is used to notify that something has changed. In Yew getting the target element in the correct type can be done in a few ways and we will go through -them here. Calling [`web_sys::Event::target`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) -on an event returns an optional [`web_sys::EventTarget`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) +them here. Calling [`web_sys::Event::target`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target) +on an event returns an optional [`web_sys::EventTarget`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.EventTarget.html) type, which might not seem very useful when you want to know the value of your input element. In all the approaches below we are going to tackle the same problem, so it is clear where the approach @@ -106,8 +106,8 @@ pub enum Msg { ### Using `JsCast` -The [`wasm-bindgen`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has -a useful trait: [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html), +The [`wasm-bindgen`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) crate has +a useful trait: [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html), which allows us to hop and skip our way to the type we want, as long as it implements `JsCast`. We can do this cautiously, which involves some runtime checks and failure types like `Option` and `Result`, or we can do it dangerously. @@ -183,13 +183,13 @@ fn MyComponent() -> Html { } ``` -The methods from `JsCast` are [`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) -and [`unchecked_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) +The methods from `JsCast` are [`dyn_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into) +and [`unchecked_into`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.unchecked_into) and you can probably see, they allowed -us to go from `EventTarget` to [`HtmlInputElement`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). +us to go from `EventTarget` to [`HtmlInputElement`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.HtmlInputElement.html). The `dyn_into` method is cautious because at runtime it will check whether the type is actually a `HtmlInputElement` and if not return an -`Err(JsValue)`, the [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) +`Err(JsValue)`, the [`JsValue`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) is a catch-all type and is essentially giving you back the object to try again. At this point you might be thinking... when is the dangerous version ok to use? In the case above it @@ -370,14 +370,14 @@ You may want to listen to an event that is not supported by Yew's `html` macro, In order to add an event listener to one of elements manually we need the help of [`NodeRef`](../function-components/node-refs.mdx) so that in `use_effect_with` we can add a listener using the -[`web-sys`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/index.html) and -[wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. +[`web-sys`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/index.html) and +[wasm-bindgen](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/index.html) API. The examples below are going to show adding listeners for the made-up `custard` event. All events either unsupported by yew or custom can be represented as a -[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you +[`web_sys::Event`](https://wasm-bindgen.github.io/wasm-bindgen/api/web_sys/struct.Event.html). If you need to access a specific method or field on a custom / unsupported event then you can use the -methods of [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) +methods of [`JsCast`](https://wasm-bindgen.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) in order to convert to the type required. ### Using `Closure` (verbose) @@ -436,7 +436,7 @@ fn MyComponent() -> Html { ``` For more information on `Closures`, see -[The `wasm-bindgen` Guide](https://rustwasm.github.io/wasm-bindgen/examples/closures.html). +[The `wasm-bindgen` Guide](https://wasm-bindgen.github.io/wasm-bindgen/examples/closures.html). ### Using `gloo` (concise) diff --git a/website/versioned_docs/version-0.22/getting-started/introduction.mdx b/website/versioned_docs/version-0.22/getting-started/introduction.mdx index 239b3b665..658db0e28 100644 --- a/website/versioned_docs/version-0.22/getting-started/introduction.mdx +++ b/website/versioned_docs/version-0.22/getting-started/introduction.mdx @@ -43,7 +43,7 @@ cargo install --locked trunk There are options other than Trunk that may be used for bundling Yew applications. You might want to try one of these options: -- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/) +- [`wasm-pack`](https://github.com/drager/wasm-pack/) - [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run) - [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (still in early development)