mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
Siyuan Yan
GitHub
parent
3c6fed4834
commit
e822833f40
@ -436,5 +436,9 @@
|
||||
"theme.contentVisibility.draftBanner.message": {
|
||||
"message": "This page is a draft. It will only be visible in dev and be excluded from the production build.",
|
||||
"description": "The draft content banner message"
|
||||
},
|
||||
"theme.blog.author.noPosts": {
|
||||
"message": "この著者による投稿はまだありません。",
|
||||
"description": "The text for authors with 0 blog post"
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@ impl Component for MyComponent {
|
||||
}
|
||||
```
|
||||
|
||||
使い方については[`html!`ガイド](html.mdx)をご確認ください。
|
||||
使い方については[`html!`ガイド](../html/introduction.mdx)をご確認ください。
|
||||
|
||||
### Rendered
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: The procedural macro for generating HTML and SVG
|
||||
title: 'HTML'
|
||||
sidebar_label: Introduction
|
||||
description: 'The procedural macro for generating HTML and SVG'
|
||||
---
|
||||
|
||||
`html!`マクロによって HTML と SVG のコードを宣言的に書くことができます。
|
||||
@ -8,7 +9,7 @@ JSX \(HTML のようなコードを JavaScript 内部に書くことができる
|
||||
|
||||
**重要な注意**
|
||||
|
||||
1. `html!`マクロはルートの HTML ノードのみ受け付けます \([フラグメントかイテレータを使う](html/lists.mdx)ことでやり取りできます\)
|
||||
1. `html!`マクロはルートの HTML ノードのみ受け付けます \([フラグメントかイテレータを使う](lists.mdx)ことでやり取りできます\)
|
||||
2. 空の`html! {}`の呼び出しは可能ですが何もレンダリングしません
|
||||
3. リテラルはクオーテーションがつけられ、ブレースで囲う必要があります: `html! { "Hello, World" }`
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Yew's glue to browser APIs
|
||||
---
|
||||
|
||||
# サービス
|
||||
|
||||
:::note
|
||||
このセクションはまだ WIP です。
|
||||
:::
|
||||
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: 'Services'
|
||||
sidebar_label: Overview
|
||||
description: "Yew's glue to browser APIs"
|
||||
---
|
||||
|
||||
# サービス
|
||||
|
||||
:::note
|
||||
このセクションはまだ WIP です。
|
||||
:::
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Set yourself up for success
|
||||
title: 'Project Setup'
|
||||
sidebar_label: Introduction
|
||||
description: 'Set yourself up for success'
|
||||
---
|
||||
|
||||
# 始める
|
||||
@ -22,15 +23,6 @@ Webpack には[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin
|
||||
|
||||
[`wasm-pack`で始める](project-setup/using-wasm-pack.mdx)
|
||||
|
||||
### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
|
||||
|
||||
Rust/Wasm 活動チームによって開発されているライブラリと CLI ツールで、JS / WebAssembly の互換性を持たせるための低レベルなツールです
|
||||
(`wasm-pack`で内部的に使われています)。
|
||||
`wasm-bindgen`は手書きの JavaScript で WebAssembly のバイナリを使う必要があるため、直接使うのは非推奨です。
|
||||
しかし、詳細な情報については[**`wasm-bindgen` ガイド**](https://rustwasm.github.io/docs/wasm-bindgen/)から得られます。
|
||||
|
||||
[`wasm-bindgen`で始める。](project-setup/using-wasm-bindgen.mdx)
|
||||
|
||||
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
||||
|
||||
`wasm-pack`と`wasm-bindgen`を導入する前は好まれた Web ワークフローツールです。
|
||||
@ -47,9 +39,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
<th style={{ textAlign: 'left' }}>
|
||||
<code>wasm-pack</code>
|
||||
</th>
|
||||
<th style={{ textAlign: 'left' }}>
|
||||
<code>wasm-bindgen</code>
|
||||
</th>
|
||||
<th style={{ textAlign: 'left' }}>
|
||||
<code>cargo-web</code>
|
||||
</th>
|
||||
@ -62,10 +51,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
<a href="https://rustwasm.github.io/">Rust / Wasm活動チーム</a>
|
||||
により活発にメンテナンス
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>
|
||||
により活発にメンテナンス
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
6ヶ月間GitHubでの活発な活動無し
|
||||
</td>
|
||||
@ -75,9 +60,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
ほぼ大丈夫! <code>webpack</code>があればなお良い。
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
だいたい大丈夫。開発においては少し流れを書かないといけない。
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
しっかり動く！完結していて、外部ライブラリに頼る必要無し。
|
||||
</td>
|
||||
@ -87,7 +69,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<code>webpack</code>プラグインによるサポートあり
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>サポート無し</td>
|
||||
<td style={{ textAlign: 'left' }}>サポートあり</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -97,7 +78,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<code>webpack</code>プラグインによるサポートあり
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>サポート無し</td>
|
||||
<td style={{ textAlign: 'left' }}>サポートあり</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -107,11 +87,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
サポートあり
|
||||
</a>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">
|
||||
サポートあり
|
||||
</a>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<a href="https://github.com/koute/cargo-web#features">
|
||||
サポートあり
|
||||
@ -127,13 +102,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<ul>
|
||||
<li>
|
||||
<code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<ul>
|
||||
<li>
|
||||
@ -153,7 +121,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
<code>web-sys</code>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>互換性あり</td>
|
||||
<td style={{ textAlign: 'left' }}>互換性あり</td>
|
||||
<td style={{ textAlign: 'left' }}>互換性無し</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -162,7 +129,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>互換性あり</td>
|
||||
<td style={{ textAlign: 'left' }}>互換性あり</td>
|
||||
<td style={{ textAlign: 'left' }}>互換性あり</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: 'left' }}>使用例</td>
|
||||
@ -171,12 +137,6 @@ Rust/Wasm 活動チームによって開発されているライブラリと CLI
|
||||
入門用テンプレート
|
||||
</a>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
Yewで
|
||||
<a href="https://github.com/yewstack/yew/blob/master/examples/build.sh">
|
||||
作る例
|
||||
</a>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
Yewで
|
||||
<a href="https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples">
|
||||
@ -1,51 +0,0 @@
|
||||
---
|
||||
title: Using wasm-bindgen
|
||||
---
|
||||
|
||||
## インストール
|
||||
|
||||
```bash
|
||||
cargo install wasm-bindgen-cli
|
||||
```
|
||||
|
||||
## ビルド
|
||||
|
||||
はじめに、Wasm ファイルを生成するアプリをビルドしましょう。
|
||||
[サンプルアプリをビルド](../build-a-sample-app.md)のアプリをビルドしたいとします。
|
||||
生成されたファイルのパスは`target/wasm32-unknown-unknown/debug/yew-app.wasm`にあるはずです。
|
||||
もしクレートに何か別の名前をつけた場合、Wasm ファイルの名前は`yew-app.wasm`ではなく、`Cargo.toml`ファイルに
|
||||
`package.name`として名前をつけたものになるでしょう。
|
||||
|
||||
```bash
|
||||
cargo build --target wasm32-unknown-unknown
|
||||
```
|
||||
|
||||
次に、wasm-bindgen の CLI を動かしましょう。
|
||||
このコマンドは`--out-dir`のディレクトリにいくつかのファイルを生成し、その中には Wasm バイナリを読み込んで動かすための
|
||||
コンパイルされた WebAssembly と JavaScript のラッパーが入っています。
|
||||
現在のブラウザは直接 WebAssembly ファイルを読み込むことができないため、代わりに JavaScript 経由で読み込まれるなければならず、
|
||||
そのためにこれらのラッパーが必要となります。
|
||||
[サンプルアプリを作る(../build-a-sample-app.md)の例では`static`フォルダにファイルが生成されるようにしており
|
||||
(そのために`wasm-bindgen`へ`--out-dir static`と渡す必要があります)、
|
||||
`wasm.js`と`wasm_bg.wasm`という名前になります(`wasm-bindgen`へ`--out-name wasm`と渡すことで実現できます)
|
||||
|
||||
```bash
|
||||
wasm-bindgen --target web --out-dir static --out-name wasm target/wasm32-unknown-unknown/debug/appname.wasm --no-typescript
|
||||
```
|
||||
|
||||
## アプリをサーブする
|
||||
|
||||
好きなサーバーを使ってください。
|
||||
ここではシンプルな Python のサーバーを使います。
|
||||
|
||||
```bash
|
||||
python -m http.server 8000
|
||||
```
|
||||
|
||||
## サポートされているターゲット
|
||||
|
||||
- `wasm32-unknown-unknown`
|
||||
|
||||
## 参考ドキュメント
|
||||
|
||||
- [The `wasm-bindgen` docs](https://rustwasm.github.io/docs/wasm-bindgen/)
|
||||
@ -436,5 +436,9 @@
|
||||
"theme.contentVisibility.draftBanner.message": {
|
||||
"message": "This page is a draft. It will only be visible in dev and be excluded from the production build.",
|
||||
"description": "The draft content banner message"
|
||||
},
|
||||
"theme.blog.author.noPosts": {
|
||||
"message": "This author has not written any posts yet.",
|
||||
"description": "The text for authors with 0 blog post"
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ impl Component for MyComponent {
|
||||
}
|
||||
```
|
||||
|
||||
有关用法的详细信息，请查看 [`html!` 宏指南](html.mdx)。
|
||||
有关用法的详细信息，请查看 [`html!` 宏指南](../html/introduction.mdx)。
|
||||
|
||||
### Rendered
|
||||
|
||||
@ -8,7 +8,7 @@ description: 用于生成 HTML 和 SVG 的宏程序
|
||||
|
||||
**重要提示**
|
||||
|
||||
1. `html!` 宏调用中只能有一个根节点（你可以通过[使用片段（fragments）或迭代器](html/lists.mdx)来绕过这一点）
|
||||
1. `html!` 宏调用中只能有一个根节点（你可以通过[使用片段（fragments）或迭代器](../html/lists.mdx)来绕过这一点）
|
||||
2. 空的 `html! {}` 宏调用是有效的但不会渲染任何内容
|
||||
3. 常量必须始终被引号括起来并被包含在大括号里：`html! { "Hello, World" }`
|
||||
|
||||
@ -117,7 +117,7 @@ html! {
|
||||
|
||||
有一些特殊的属性不会直接影响 DOM，而是充当 Yew 虚拟 DOM 的指令。目前，有这样两个特殊的 props： `ref`和`key` 。
|
||||
|
||||
`ref`允许您直接访问和操作底层 DOM 节点。见[参考文献](components/refs)获取的更多细节。
|
||||
`ref`允许您直接访问和操作底层 DOM 节点。见[参考文献](../components/refs.mdx)获取的更多细节。
|
||||
|
||||
`key`为元素提供了一个唯一标识符，Yew 可以将其用于优化。
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
# 使用 wasm-bindgen
|
||||
|
||||
:::note
|
||||
`Contribute to our docs:` [Explain how to use wasm-bindgen to build an app](https://github.com/yewstack/docs/issues/34)
|
||||
:::
|
||||
@ -436,5 +436,9 @@
|
||||
"theme.contentVisibility.draftBanner.message": {
|
||||
"message": "This page is a draft. It will only be visible in dev and be excluded from the production build.",
|
||||
"description": "The draft content banner message"
|
||||
},
|
||||
"theme.blog.author.noPosts": {
|
||||
"message": "This author has not written any posts yet.",
|
||||
"description": "The text for authors with 0 blog post"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: 介绍
|
||||
description: 元件，以及生命周期鉤子
|
||||
---
|
||||
|
||||
@ -57,7 +58,7 @@ impl Component for MyComponent {
|
||||
}
|
||||
```
|
||||
|
||||
更多使用細節，請參考 [`html!` 教學](html.md)。
|
||||
更多使用細節，請參考 [`html!` 教學](../html/introduction.mdx)。
|
||||
|
||||
### Rendered
|
||||
|
||||
@ -6,4 +6,4 @@ description: Yew 與瀏覽器的 API 的接合劑
|
||||
|
||||
這個區塊有的文章：
|
||||
|
||||
- [Format](services/format.md)
|
||||
- [Format](format.mdx)
|
||||
@ -16,19 +16,13 @@ description: Set yourself up for success
|
||||
|
||||
一套 CLI 工具，由 Rust/Wasm Working Group 為了編譯並打包 WebAssembly 所開發的。最好與 Webpack 的 [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) 搭配使用。
|
||||
|
||||
[開始使用 wasm-pack](project-setup/using-wasm-pack.md)
|
||||
|
||||
### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
|
||||
|
||||
同時是套件，也是 CLI 工具，並由 Rust / Wasm Working Group 開發。他是一套較底層的工具（通常是 `wasm-pack` 內部使用），用以增加 JavaScript 與 WebAssembly 的互操作性。我們不建議直接使用 `wasm-bindgen`，因為你需要多寫一些 JavaScript 的程式碼來引入你的 WebAssembly 二進位檔案。雖然如此，你仍然可以使用 wasm-bindgen，更多資訊請參考 [**`wasm-bindgen` guide**](https://rustwasm.github.io/docs/wasm-bindgen/)**。**
|
||||
|
||||
[開始使用 wasm-bindgen](project-setup/using-wasm-bindgen.md)
|
||||
[開始使用 wasm-pack](project-setup/using-wasm-pack.mdx)
|
||||
|
||||
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
||||
|
||||
在 `wasm-pack` 與 `wasm-bindgen` 出來之前，這是我們的首選工具。在安裝與執行方面，他的速度仍是最快的，我們推薦你安裝他去執行我們的那些還沒有使用 `wasm-pack` 的範例。
|
||||
|
||||
[開始使用 cargo-web](project-setup/using-cargo-web.md)
|
||||
[開始使用 cargo-web](project-setup/using-cargo-web.mdx)
|
||||
|
||||
### 比較
|
||||
|
||||
@ -39,9 +33,6 @@ description: Set yourself up for success
|
||||
<th style={{ textAlign: 'left' }}>
|
||||
<code>wasm-pack</code>
|
||||
</th>
|
||||
<th style={{ textAlign: 'left' }}>
|
||||
<code>wasm-bindgen</code>
|
||||
</th>
|
||||
<th style={{ textAlign: 'left' }}>
|
||||
<code>cargo-web</code>
|
||||
</th>
|
||||
@ -59,13 +50,6 @@ description: Set yourself up for success
|
||||
</a>{' '}
|
||||
維護中
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
持續由{' '}
|
||||
<a href="https://rustwasm.github.io/">
|
||||
Rust / Wasm Working Group
|
||||
</a>{' '}
|
||||
維護中
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
GitHub Repo
|
||||
已經六個月以上沒有動靜了
|
||||
@ -79,9 +63,6 @@ description: Set yourself up for success
|
||||
還可以，需要搭配
|
||||
Webpack
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
太過底層，你需要寫一腳本來優化開發體驗
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
可以動！另外無需外部套件支援
|
||||
</td>
|
||||
@ -94,7 +75,6 @@ description: Set yourself up for success
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
搭配 <code>webpack</code> 插件
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>不支援</td>
|
||||
<td style={{ textAlign: 'left' }}>支援</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -104,7 +84,6 @@ description: Set yourself up for success
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
搭配 <code>webpack</code> 插件
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>不支援</td>
|
||||
<td style={{ textAlign: 'left' }}>支援</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -116,11 +95,6 @@ description: Set yourself up for success
|
||||
Supported
|
||||
</a>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">
|
||||
Supported
|
||||
</a>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<a href="https://github.com/koute/cargo-web#features">
|
||||
Supported
|
||||
@ -138,13 +112,6 @@ description: Set yourself up for success
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<ul>
|
||||
<li>
|
||||
<code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<ul>
|
||||
<li>
|
||||
@ -164,7 +131,6 @@ description: Set yourself up for success
|
||||
<code>web-sys</code>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>相容</td>
|
||||
<td style={{ textAlign: 'left' }}>相容</td>
|
||||
<td style={{ textAlign: 'left' }}>不相容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -173,7 +139,6 @@ description: Set yourself up for success
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>相容</td>
|
||||
<td style={{ textAlign: 'left' }}>相容</td>
|
||||
<td style={{ textAlign: 'left' }}>相容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
@ -190,12 +155,6 @@ description: Set yourself up for success
|
||||
編譯腳本
|
||||
</a>
|
||||
</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
Yew 範例的
|
||||
<a href="https://github.com/yewstack/yew/blob/master/examples/build_all.sh">
|
||||
編譯腳本
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -1,5 +0,0 @@
|
||||
# 使用 wasm-bindgen
|
||||
|
||||
:::note
|
||||
`歡迎來貢獻文件：`[`解說如何用 wasm-bindgen 建立一個應用程式`](https://github.com/yewstack/docs/issues/34)\`\`
|
||||
:::
|
||||
Loading…
x
Reference in New Issue
Block a user