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)