Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,6 @@

Yew is named after a type of evergreen tree, and is pronounced /juː/. [Entry with audio on Cambridge Dictionary](https://dictionary.cambridge.org/dictionary/english/yew).

*Note: Yew is not 1.0 yet. Be prepared to do major refactoring due to breaking API changes.*

## Contributing

Yew is a community-driven effort and we welcome all kinds of contributions, big or small, from developers of all backgrounds. We want the Yew community to be a fun and friendly place, so please review our [Code of Conduct](https://github.com/yewstack/yew/blob/master/CODE_OF_CONDUCT.md) to learn what behavior will not be tolerated.
Expand Down
5 changes: 2 additions & 3 deletions website/docs/advanced-topics/server-side-rendering.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -261,9 +261,8 @@ Example: [wasi_ssr_module](https://github.com/yewstack/yew/tree/master/examples/
If you are using the `wasm32-unknown-unknown` target to build a SSR application, you can use the `not_browser_env` feature flag to disable access of browser-specific APIs inside of Yew. This would be useful on serverless platforms like Cloudflare Worker.
:::

:::caution
:::note

Server-side rendering is currently experimental. If you find a bug, please file
an issue on [GitHub](https://github.com/yewstack/yew/issues/new?assignees=&labels=bug&template=bug_report.md&title=).
We are improving the SSR experience by providing integration with popular frameworks like Axum. Feel free to submit PRs with your favorite frameworks.

:::
31 changes: 27 additions & 4 deletions website/docs/concepts/function-components/properties.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,33 @@ fn Greetings(
// `name` will use references because of the leading `&` in the definition.
```

Compared to standalone prop structs, `yew-autoprops` has the additional advantage of exposing unused props.

```rust
use yew::prelude::*;
use yew_autoprops::autoprops;

#[autoprops]
#[component]
// highlight-next-line
pub fn Foo(bar0: AttrValue, bar1: AttrValue) -> Html {
// `bar1` will turn into a compiler warning about unused variables
html! {<div>{bar0}</div>}
}

#[derive(PartialEq, Properties, Clone)]
pub struct BarProps {
bar0: AttrValue,
// this property is unused but the compiler cannot detect it
bar1: AttrValue,
}

#[component]
pub fn Bar(props: &BarProps) -> Html {
html! {<div>{&props.bar0}</div>}
}
```

## Evaluation Order

Props are evaluated in the order they're specified, as shown by the following example:
Expand Down Expand Up @@ -348,7 +375,3 @@ These include, but are not limited to:
See that crate to learn more.
4. You tell us. Did you run into an edge-case you wish you knew about earlier? Feel free to create an issue
or PR a fix to this documentation.

## yew-autoprops

[yew-autoprops](https://crates.io/crates/yew-autoprops) is an experimental package that allows one to create the Props struct on the fly out of the arguments of your function. Might be useful, if the properties struct is never reused.
7 changes: 3 additions & 4 deletions website/docs/concepts/html/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@ The `html!` macro allows you to write HTML and SVG code declaratively. It is sim

**Important notes**

1. The `html!` macro accepts any number of root nodes, including zero. An empty
`html! {}` invocation is valid and will not render anything.
2. Literals must always be quoted and wrapped in braces: `html! { <p>{ "Hello, World" }</p> }`
3. The `html!` macro will make all tag names lowercase. To use upper case characters (which are required for some SVG elements) use [dynamic tag names](concepts/html/elements.mdx#dynamic-tag-names): `html! { <@{"myTag"}></@> }`
1. The `html!` macro accepts any number of root nodes. An empty `html! {}` invocation will not render anything.
2. String literals need to be quoted and usually needs to be wrapped in braces: `html! { <p>{ "Hello, World" }</p> }`.
3. Bool types and number types can be used directly: `html!{ <span>{1}</span> <span>{true}</span> }`

:::note
The `html!` macro can reach the default recursion limit of the compiler. If you encounter compilation errors,
Expand Down
12 changes: 6 additions & 6 deletions website/docs/concepts/router.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -426,12 +426,6 @@ because the inner `SettingsRoute` only defines routes without a bare trailing sl
(see [Trailing Slashes](#trailing-slashes)). Unrecognized sub-paths like `/settings/gibberish`
are redirected to the main `NotFound` route at `/404`.

:::caution

Though note that this is still a work in progress so the way we do this is not final

:::

It can be implemented with the following code:

```rust
Expand Down Expand Up @@ -502,6 +496,12 @@ pub fn app() -> Html {
}
```

:::caution

If you want more ergonomic nested router support. Please comment under [the first-class nested routing RFC](https://github.com/yewstack/yew/discussions/4111).

:::

### Basename

It's possible to define a basename with `yew-router`.
Expand Down
44 changes: 18 additions & 26 deletions website/docs/more/debugging.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,26 @@ Yew automatically logs panics in the browser console.

In JavaScript, `console.log()` is used to log to the browser console. Some options for Yew are listed below.

### [`wasm-logger`](https://crates.io/crates/wasm-logger)
### [`tracing-web`](https://crates.io/crates/tracing-web) (recommended)

`wasm-logger` crate integrates with [`log`](https://crates.io/crates/log) crate to send the log level, source line, and filename to the browser console.
`tracing-web` can be used with [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber) to output messages to the browser console. It works seamlessly on both the client and the server, making it a natural fit for SSR applications where you want a single logging setup across both ends.

```rust ,ignore
use log::info;
use tracing_subscriber::prelude::*;
use wasm_bindgen::JsValue;

fn main() {
wasm_logger::init(wasm_logger::Config::default());
let fmt_layer = tracing_subscriber::fmt::layer()
.with_ansi(false) // only partially supported across browsers
.without_time() // browsers can show timestamps natively in the dev console
.with_writer(tracing_web::MakeWebConsoleWriter::new());

tracing_subscriber::registry()
.with(fmt_layer)
.init();

let object = JsValue::from("world");
info!("Hello {}", object.as_string().unwrap());
tracing::info!("Hello {}", object.as_string().unwrap());
}
```

Expand All @@ -41,40 +48,25 @@ fn main() {
}
```

### [`tracing-web`](https://crates.io/crates/tracing-web)
### [`wasm-logger`](https://crates.io/crates/wasm-logger) (unmaintained)

`tracing-web` can be used with [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber) to output messages to the browser console.
`wasm-logger` crate integrates with [`log`](https://crates.io/crates/log) crate to send the log level, source line, and filename to the browser console. Note that this crate is no longer actively maintained. Consider using `tracing-web` instead.

```rust ,ignore
use tracing_subscriber::{
fmt::{
format::{FmtSpan, Pretty},
time::UtcTime,
},
prelude::*,
};
use log::info;
use wasm_bindgen::JsValue;

fn main() {
let fmt_layer = tracing_subscriber::fmt::layer()
.with_ansi(false)
.with_timer(UtcTime::rfc_3339())
.with_writer(tracing_web::MakeConsoleWriter)
.with_span_events(FmtSpan::ACTIVE);
let perf_layer = tracing_web::performance_layer().with_details_from_fields(Pretty::default());
wasm_logger::init(wasm_logger::Config::default());

tracing_subscriber::registry()
.with(fmt_layer)
.with(perf_layer)
.init();
let object = JsValue::from("world");
tracing::info!("Hello {}", object.as_string().unwrap());
info!("Hello {}", object.as_string().unwrap());
}
```

## Debugging component lifecycles

[`tracing`](https://crates.io/crates/tracing) can be used to collect event information related to a component's lifecycle. `tracing` also comes with a feature flag for `log` support, which integrates nicely with `wasm-logger`.
[`tracing`](https://crates.io/crates/tracing) can be used to collect event information related to a component's lifecycle. `tracing` also comes with a feature flag for `log` support, which integrates nicely with `tracing-web`.

[Compile time filters](https://docs.rs/tracing/latest/tracing/level_filters/index.html#compile-time-filters) can be used to adjust verbosity or disable logging, which should result in a smaller Wasm file.

Expand Down
17 changes: 17 additions & 0 deletions website/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,23 @@ module.exports = {
favicon: 'img/logo.svg',
organizationName: 'yewstack', // Usually your GitHub org/user name.
projectName: 'yew', // Usually your repo name.
headTags: [
{
tagName: 'link',
attributes: {
rel: 'icon',
href: '/favicon.ico',
sizes: 'any',
},
},
{
tagName: 'link',
attributes: {
rel: 'apple-touch-icon',
href: '/apple-touch-icon.png',
},
},
],
themeConfig: {
colorMode: {
respectPrefersColorScheme: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,33 @@ fn Greetings(
// `is_loading` は値としてコンポーネントに渡され、`message` と `name` は定義に先行する `&` があるため参照として渡されます。
```

独立したプロパティ構造体と比較して、`yew-autoprops` には未使用のプロパティを検出できるという追加の利点があります。

```rust
use yew::prelude::*;
use yew_autoprops::autoprops;

#[autoprops]
#[component]
// highlight-next-line
pub fn Foo(bar0: AttrValue, bar1: AttrValue) -> Html {
// `bar1` は未使用変数に関するコンパイラ警告になります
html! {<div>{bar0}</div>}
}

#[derive(PartialEq, Properties, Clone)]
pub struct BarProps {
bar0: AttrValue,
// このプロパティは未使用ですが、コンパイラはそれを検出できません
bar1: AttrValue,
}

#[component]
pub fn Bar(props: &BarProps) -> Html {
html! {<div>{&props.bar0}</div>}
}
```

## 評価順序

属性は指定された順序で評価されます。以下の例を参照してください:
Expand Down Expand Up @@ -333,7 +360,3 @@ fn main() {
**なぜ悪いのか?** `Vec<T>` も `String` と同様にクローンのコストが高いです。`IArray<T>` は参照カウントされたスライス (`Rc<[T]>`) または `&'static [T]` であり、非常に安価にクローンできます。<br />
**注意**:`IArray` は [implicit-clone](https://crates.io/crates/implicit-clone) からインポートできます。詳細はそのパッケージを参照してください。
4. 新しい発見があるかもしれません。早く知っておきたかったエッジケースに遭遇しましたか?問題を作成するか、このドキュメントに修正のPRを提供してください。

## yew-autoprops

[yew-autoprops](https://crates.io/crates/yew-autoprops) は実験的なパッケージで、関数の引数に基づいて動的にProps構造体を作成することを可能にします。プロパティ構造体が再利用されない場合、これは有用かもしれません。
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import TabItem from '@theme/TabItem'

**重要な注意点**

1. `html!` マクロは、0 を含む任意の数のルートノードを受け入れます。空の `html! {}` 呼び出しは有効で、何もレンダリングしません
2. リテラルは常に引用符で囲み、中括弧で囲む必要があります:`html! { <p>{ "Hello, World" }</p> }`
3. `html!` マクロはすべてのタグ名を小文字に変換します。大文字の文字(特定の SVG 要素に必要な文字)を使用するには、[動的タグ名](concepts/html/elements.mdx#dynamic-tag-names) を使用してください:`html! { <@{"myTag"}></@> }`
1. `html!` マクロは任意の数のルートノードを受け入れます。空の `html! {}` 呼び出しは何もレンダリングしません
2. 文字列リテラルは引用符で囲む必要があり、通常は中括弧で囲む必要があります:`html! { <p>{ "Hello, World" }</p> }`
3. Bool 型と数値型は直接使用できます:`html!{ <span>{1}</span> <span>{true}</span> }`

:::note
`html!` マクロはコンパイラのデフォルトの再帰制限に達する可能性があります。コンパイル エラーが発生した場合は、クレートのルートに `#![recursion_limit="1024"]` のような属性を追加して問題を解決してください。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -391,12 +391,6 @@ import ThemedImage from '@theme/ThemedImage'

ネストされた `SettingsRouter` は、すべての `/settings` で始まる URL を処理します。外側のルーターでは `/settings/` 用に別の `SettingsSlash` バリアントを定義し、`SettingsRoot` にリダイレクトします。これは、内側の `SettingsRoute` が末尾スラッシュのみのルートを定義していないためです([末尾のスラッシュ](#末尾のスラッシュ) を参照)。`/settings/gibberish` のような認識されないサブパスは、メインの `NotFound` ルート `/404` にリダイレクトされます。

:::caution

このインターフェースはまだ開発中であり、このように記述する方法は最終決定されていません。

:::

以下のコードで実装できます:

```rust
Expand Down Expand Up @@ -467,6 +461,12 @@ pub fn app() -> Html {
}
```

:::caution

より使いやすいネストされたルーターのサポートをご希望の場合は、[ファーストクラスのネストルーティング RFC](https://github.com/yewstack/yew/discussions/4111) にコメントしてください。

:::

### ベースパス (Basename)

`yew-router` を使用してベースパス (Basename) を定義できます。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,26 @@ Yew はブラウザのコンソールにパニックログを自動的に出力

JavaScript では、`console.log()` を使用してブラウザのコンソールに出力します。以下は Yew のいくつかのオプションです。

### [`wasm-logger`](https://crates.io/crates/wasm-logger)
### [`tracing-web`](https://crates.io/crates/tracing-web) (recommended)

`wasm-logger` クレートは [`log`](https://crates.io/crates/log) クレートと統合されており、ログレベル、ソース行、ファイル名をブラウザのコンソールに送信します
`tracing-web` は [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber) と一緒に使用でき、メッセージをブラウザのコンソールに出力します

```rust ,ignore
use log::info;
use tracing_subscriber::prelude::*;
use wasm_bindgen::JsValue;

fn main() {
wasm_logger::init(wasm_logger::Config::default());
let fmt_layer = tracing_subscriber::fmt::layer()
.with_ansi(false) // only partially supported across browsers
.without_time() // browsers can show timestamps natively in the dev console
.with_writer(tracing_web::MakeWebConsoleWriter::new());

tracing_subscriber::registry()
.with(fmt_layer)
.init();

let object = JsValue::from("world");
info!("Hello {}", object.as_string().unwrap());
tracing::info!("Hello {}", object.as_string().unwrap());
}
```

Expand All @@ -40,34 +47,19 @@ fn main() {
}
```

### [`tracing-web`](https://crates.io/crates/tracing-web)
### [`wasm-logger`](https://crates.io/crates/wasm-logger) (unmaintained)

`tracing-web` は [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber) と一緒に使用でき、メッセージをブラウザのコンソールに出力します
`wasm-logger` クレートは [`log`](https://crates.io/crates/log) クレートと統合されており、ログレベル、ソース行、ファイル名をブラウザのコンソールに送信します

```rust ,ignore
use tracing_subscriber::{
fmt::{
format::{FmtSpan, Pretty},
time::UtcTime,
},
prelude::*,
};
use log::info;
use wasm_bindgen::JsValue;

fn main() {
let fmt_layer = tracing_subscriber::fmt::layer()
.with_ansi(false)
.with_timer(UtcTime::rfc_3339())
.with_writer(tracing_web::MakeConsoleWriter)
.with_span_events(FmtSpan::ACTIVE);
let perf_layer = tracing_web::performance_layer().with_details_from_fields(Pretty::default());
wasm_logger::init(wasm_logger::Config::default());

tracing_subscriber::registry()
.with(fmt_layer)
.with(perf_layer)
.init();
let object = JsValue::from("world");
tracing::info!("Hello {}", object.as_string().unwrap());
info!("Hello {}", object.as_string().unwrap());
}
```

Expand Down
Loading
Loading