Update to Docusaurus v3 (#3518)

* prep

* update deps

* builds??

* fix deps

* switch back to Algolia search

#2253 switched to local search but that doesn't work with Docusaurus v3. Switch back to Algolia search

* fix mdx build issues

* fmt:write

* write translations

* use docusaurus preset

* contextualSearch & fmt

* npm run write-translations
This commit is contained in:
Muhammad Hamza 2023-11-05 17:27:39 +05:00 committed by GitHub
parent 915000572c
commit 00a6183bd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 7317 additions and 4079 deletions

View File

@ -25,7 +25,7 @@ jobs:
- name: Setup node
uses: actions/setup-node@v4
with:
node-version: "16"
node-version: "18"
- name: Install dependencies
run: |

View File

@ -115,7 +115,7 @@ fn main() {
Finally, add an `index.html` file in the root directory of your app.
```html , title=index.html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -105,7 +105,7 @@ fn main() {
Now, let's create an `index.html` at the root of the project.
```html title="index.html"
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head></head>
<body></body>

View File

@ -119,33 +119,47 @@ module.exports = {
prism: {
additionalLanguages: ['rust', 'toml'],
},
gtag: {
trackingID: 'G-DENCL8P4YP',
anonymizeIP: true,
algolia: {
appId: 'F8S2ICRD2T',
apiKey: '2dc337d68f84389c3713a393aff39816',
indexName: 'yew-rs',
contextualSearch: true,
insights: true, // Optional, automatically send insights when user interacts with search results
searchPagePath: 'search',
},
},
i18n: {
defaultLocale: 'en',
locales: ['en', 'ja', 'zh-Hans', 'zh-Hant'],
},
plugins: [
'content-pages',
'docusaurus-plugin-sass',
presets: [
[
'@docusaurus/theme-classic',
'@docusaurus/preset-classic',
{
customCss: require.resolve('./src/css/custom.css'),
theme: {
customCss: ['./src/css/custom.css'],
},
],
[
'@docusaurus/plugin-content-docs',
{
docs: {
path: 'docs',
sidebarPath: require.resolve('./sidebars/docs.js'),
editUrl,
routeBasePath: '/docs',
},
blog: {
path: 'blog',
blogTitle: 'Yew Blog',
editUrl,
},
pages: {},
gtag: {
trackingID: 'G-DENCL8P4YP',
anonymizeIP: true,
},
},
],
],
plugins: [
'docusaurus-plugin-sass',
[
'@docusaurus/plugin-content-docs',
{
@ -156,14 +170,6 @@ module.exports = {
editUrl,
},
],
[
'@docusaurus/plugin-content-blog',
{
path: 'blog',
blogTitle: 'Yew Blog',
editUrl,
},
],
[
'client-redirects',
{
@ -177,12 +183,5 @@ module.exports = {
],
},
],
[
'@easyops-cn/docusaurus-search-local',
{
hashed: true,
indexBlog: false,
},
],
],
}

View File

@ -295,5 +295,133 @@
"theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
"message": "Toggle navigation bar",
"description": "The ARIA label for hamburger menu button of mobile navigation"
},
"theme.admonition.warning": {
"message": "警告",
"description": "The default label used for the Warning admonition (:::warning)"
},
"theme.DocSidebarItem.expandCategoryAriaLabel": {
"message": "Expand sidebar category '{label}'",
"description": "The ARIA label to expand the sidebar category"
},
"theme.DocSidebarItem.collapseCategoryAriaLabel": {
"message": "Collapse sidebar category '{label}'",
"description": "The ARIA label to collapse the sidebar category"
},
"theme.unlistedContent.title": {
"message": "Unlisted page",
"description": "The unlisted content banner title"
},
"theme.unlistedContent.message": {
"message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.",
"description": "The unlisted content banner message"
},
"theme.SearchPage.inputPlaceholder": {
"message": "検索するキーワードを入力してください",
"description": "The placeholder for search page input"
},
"theme.SearchPage.inputLabel": {
"message": "検索",
"description": "The ARIA label for search page input"
},
"theme.SearchPage.algoliaLabel": {
"message": "Algoliaで検索",
"description": "The ARIA label for Algolia mention"
},
"theme.SearchPage.fetchingNewResults": {
"message": "新しい検索結果を取得しています...",
"description": "The paragraph for fetching new search results"
},
"theme.SearchModal.searchBox.resetButtonTitle": {
"message": "クリア",
"description": "The label and ARIA label for search box reset button"
},
"theme.SearchModal.searchBox.cancelButtonText": {
"message": "キャンセル",
"description": "The label and ARIA label for search box cancel button"
},
"theme.SearchModal.startScreen.recentSearchesTitle": {
"message": "最近の検索",
"description": "The title for recent searches"
},
"theme.SearchModal.startScreen.noRecentSearchesText": {
"message": "最近の検索履歴はありません",
"description": "The text when no recent searches"
},
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
"message": "この検索をお気に入りに追加",
"description": "The label for save recent search button"
},
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
"message": "この検索を履歴から削除",
"description": "The label for remove recent search button"
},
"theme.SearchModal.startScreen.favoriteSearchesTitle": {
"message": "お気に入り",
"description": "The title for favorite searches"
},
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
"message": "この検索をお気に入りから削除",
"description": "The label for remove favorite search button"
},
"theme.SearchModal.errorScreen.titleText": {
"message": "検索結果の取得に失敗しました",
"description": "The title for error screen of search modal"
},
"theme.SearchModal.errorScreen.helpText": {
"message": "ネットワーク接続を確認してください",
"description": "The help text for error screen of search modal"
},
"theme.SearchModal.footer.selectText": {
"message": "選ぶ",
"description": "The explanatory text of the action for the enter key"
},
"theme.SearchModal.footer.selectKeyAriaLabel": {
"message": "エンターキー",
"description": "The ARIA label for the Enter key button that makes the selection"
},
"theme.SearchModal.footer.navigateText": {
"message": "移動",
"description": "The explanatory text of the action for the Arrow up and Arrow down key"
},
"theme.SearchModal.footer.navigateUpKeyAriaLabel": {
"message": "上矢印キー",
"description": "The ARIA label for the Arrow up key button that makes the navigation"
},
"theme.SearchModal.footer.navigateDownKeyAriaLabel": {
"message": "下矢印キー",
"description": "The ARIA label for the Arrow down key button that makes the navigation"
},
"theme.SearchModal.footer.closeText": {
"message": "閉じる",
"description": "The explanatory text of the action for Escape key"
},
"theme.SearchModal.footer.closeKeyAriaLabel": {
"message": "エスケープキー",
"description": "The ARIA label for the Escape key button that close the modal"
},
"theme.SearchModal.footer.searchByText": {
"message": "検索",
"description": "The text explain that the search is making by Algolia"
},
"theme.SearchModal.noResultsScreen.noResultsText": {
"message": "見つかりませんでした",
"description": "The text explains that there are no results for the following search"
},
"theme.SearchModal.noResultsScreen.suggestedQueryText": {
"message": "次の検索を試す:",
"description": "The text for the suggested query when no results are found for the following search"
},
"theme.SearchModal.noResultsScreen.reportMissingResultsText": {
"message": "よりよい検索結果がありますか?",
"description": "The text for the question where the user thinks there are missing results"
},
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
"message": "報告する",
"description": "The text for the link to report missing results"
},
"theme.SearchModal.placeholder": {
"message": "ドキュメントを検索",
"description": "The placeholder of the input of the DocSearch pop-up modal"
}
}

View File

@ -38,5 +38,41 @@
"sidebar.sidebar.category.More": {
"message": "More",
"description": "The label for category More in sidebar sidebar"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Project Setup": {
"message": "Project Setup",
"description": "The label for category Project Setup in sidebar docs"
},
"sidebar.docs.category.Concepts": {
"message": "Concepts",
"description": "The label for category Concepts in sidebar docs"
},
"sidebar.docs.category.Components": {
"message": "Components",
"description": "The label for category Components in sidebar docs"
},
"sidebar.docs.category.wasm-bindgen": {
"message": "wasm-bindgen",
"description": "The label for category wasm-bindgen in sidebar docs"
},
"sidebar.docs.category.HTML": {
"message": "HTML",
"description": "The label for category HTML in sidebar docs"
},
"sidebar.docs.category.Services": {
"message": "Services",
"description": "The label for category Services in sidebar docs"
},
"sidebar.docs.category.Advanced topics": {
"message": "Advanced topics",
"description": "The label for category Advanced topics in sidebar docs"
},
"sidebar.docs.category.More": {
"message": "More",
"description": "The label for category More in sidebar docs"
}
}

View File

@ -85,9 +85,8 @@ window.alert("hello from wasm!");
</td>
<td style={{ textAlign: 'left' }}>
しばしば<code>Result</code>
を返さずpanicするようになっている。例えば <code>
stdweb::web::window()
</code>
を返さずpanicするようになっている。例えば
<code>stdweb::web::window()</code>
ワーカーの中で呼ばれるパニックする。
</td>
</tr>

View File

@ -54,5 +54,57 @@
"sidebar.sidebar.category.yew-router": {
"message": "yew-router",
"description": "The label for category yew-router in sidebar sidebar"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Project Setup": {
"message": "Project Setup",
"description": "The label for category Project Setup in sidebar docs"
},
"sidebar.docs.category.Concepts": {
"message": "Concepts",
"description": "The label for category Concepts in sidebar docs"
},
"sidebar.docs.category.wasm-bindgen": {
"message": "wasm-bindgen",
"description": "The label for category wasm-bindgen in sidebar docs"
},
"sidebar.docs.category.Components": {
"message": "Components",
"description": "The label for category Components in sidebar docs"
},
"sidebar.docs.category.HTML": {
"message": "HTML",
"description": "The label for category HTML in sidebar docs"
},
"sidebar.docs.category.Function Components": {
"message": "Function Components",
"description": "The label for category Function Components in sidebar docs"
},
"sidebar.docs.category.Advanced topics": {
"message": "Advanced topics",
"description": "The label for category Advanced topics in sidebar docs"
},
"sidebar.docs.category.More": {
"message": "More",
"description": "The label for category More in sidebar docs"
},
"sidebar.docs.category.Migration guides": {
"message": "Migration guides",
"description": "The label for category Migration guides in sidebar docs"
},
"sidebar.docs.category.yew": {
"message": "yew",
"description": "The label for category yew in sidebar docs"
},
"sidebar.docs.category.yew-agent": {
"message": "yew-agent",
"description": "The label for category yew-agent in sidebar docs"
},
"sidebar.docs.category.yew-router": {
"message": "yew-router",
"description": "The label for category yew-router in sidebar docs"
}
}

View File

@ -295,5 +295,133 @@
"theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
"message": "切换导航栏",
"description": "The ARIA label for hamburger menu button of mobile navigation"
},
"theme.admonition.warning": {
"message": "注意",
"description": "The default label used for the Warning admonition (:::warning)"
},
"theme.DocSidebarItem.expandCategoryAriaLabel": {
"message": "展开侧边栏分类 '{label}'",
"description": "The ARIA label to expand the sidebar category"
},
"theme.DocSidebarItem.collapseCategoryAriaLabel": {
"message": "折叠侧边栏分类 '{label}'",
"description": "The ARIA label to collapse the sidebar category"
},
"theme.unlistedContent.title": {
"message": "未列出页",
"description": "The unlisted content banner title"
},
"theme.unlistedContent.message": {
"message": "此页面未列出。搜索引擎不会对其索引,只有拥有直接链接的用户才能访问。",
"description": "The unlisted content banner message"
},
"theme.SearchPage.inputPlaceholder": {
"message": "在此输入搜索字词",
"description": "The placeholder for search page input"
},
"theme.SearchPage.inputLabel": {
"message": "搜索",
"description": "The ARIA label for search page input"
},
"theme.SearchPage.algoliaLabel": {
"message": "通过 Algolia 搜索",
"description": "The ARIA label for Algolia mention"
},
"theme.SearchPage.fetchingNewResults": {
"message": "正在获取新的搜索结果...",
"description": "The paragraph for fetching new search results"
},
"theme.SearchModal.searchBox.resetButtonTitle": {
"message": "清除查询",
"description": "The label and ARIA label for search box reset button"
},
"theme.SearchModal.searchBox.cancelButtonText": {
"message": "取消",
"description": "The label and ARIA label for search box cancel button"
},
"theme.SearchModal.startScreen.recentSearchesTitle": {
"message": "最近搜索",
"description": "The title for recent searches"
},
"theme.SearchModal.startScreen.noRecentSearchesText": {
"message": "没有最近搜索",
"description": "The text when no recent searches"
},
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
"message": "保存这个搜索",
"description": "The label for save recent search button"
},
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
"message": "从历史记录中删除这个搜索",
"description": "The label for remove recent search button"
},
"theme.SearchModal.startScreen.favoriteSearchesTitle": {
"message": "收藏",
"description": "The title for favorite searches"
},
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
"message": "从收藏列表中删除这个搜索",
"description": "The label for remove favorite search button"
},
"theme.SearchModal.errorScreen.titleText": {
"message": "无法获取结果",
"description": "The title for error screen of search modal"
},
"theme.SearchModal.errorScreen.helpText": {
"message": "你可能需要检查网络连接。",
"description": "The help text for error screen of search modal"
},
"theme.SearchModal.footer.selectText": {
"message": "选中",
"description": "The explanatory text of the action for the enter key"
},
"theme.SearchModal.footer.selectKeyAriaLabel": {
"message": "Enter 键",
"description": "The ARIA label for the Enter key button that makes the selection"
},
"theme.SearchModal.footer.navigateText": {
"message": "导航",
"description": "The explanatory text of the action for the Arrow up and Arrow down key"
},
"theme.SearchModal.footer.navigateUpKeyAriaLabel": {
"message": "向上键",
"description": "The ARIA label for the Arrow up key button that makes the navigation"
},
"theme.SearchModal.footer.navigateDownKeyAriaLabel": {
"message": "向下键",
"description": "The ARIA label for the Arrow down key button that makes the navigation"
},
"theme.SearchModal.footer.closeText": {
"message": "关闭",
"description": "The explanatory text of the action for Escape key"
},
"theme.SearchModal.footer.closeKeyAriaLabel": {
"message": "Esc 键",
"description": "The ARIA label for the Escape key button that close the modal"
},
"theme.SearchModal.footer.searchByText": {
"message": "搜索提供",
"description": "The text explain that the search is making by Algolia"
},
"theme.SearchModal.noResultsScreen.noResultsText": {
"message": "没有结果:",
"description": "The text explains that there are no results for the following search"
},
"theme.SearchModal.noResultsScreen.suggestedQueryText": {
"message": "试试搜索",
"description": "The text for the suggested query when no results are found for the following search"
},
"theme.SearchModal.noResultsScreen.reportMissingResultsText": {
"message": "认为这个查询应该有结果?",
"description": "The text for the question where the user thinks there are missing results"
},
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
"message": "请告知我们。",
"description": "The text for the link to report missing results"
},
"theme.SearchModal.placeholder": {
"message": "搜索文档",
"description": "The placeholder of the input of the DocSearch pop-up modal"
}
}

View File

@ -23,9 +23,7 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
但是我们可以更进一步!对于任何实现了 `PartialEq` 的项,可以使用一个 trait 和一个 blanket implementation 将这六行样板代码减少到一行。
{% code title="neq\_assign.rs" %}
```rust
```rust title="neq_assign.rs"
pub trait NeqAssign {
fn neq_assign(&mut self, new: Self) -> ShouldRender;
}
@ -46,8 +44,6 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
}
```
{% endcode %}
该 trait 称为 `NeqAssign` 是因为如果目标值和新值不相等,它将赋为新值。
这比简单的实现还要短:

View File

@ -27,9 +27,7 @@ html!{
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 拥有 Props 的嵌套子组件
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
添加 `yew` 到你的依赖库中([这里](https://docs.rs/yew) 可以查看最新版本的 Yew
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -21,13 +19,9 @@ edition = "2018"
yew = { version = "0.14.3", features = ["std_web"] }
```
{% endcode %}
将这份代码复制到你的 `src/main.rs` 文件中:
{% code title="src/main.rs" %}
```rust
```rust title="src/main.rs"
use yew::prelude::*;
struct Model {
@ -72,8 +66,6 @@ fn main() {
}
```
{% endcode %}
这份代码将构建你的称为 `Model` 的 `Component` 根组件,它会显示一个按钮,当你点击它时,`Model` 将会更新自己的状态。特别注意 `main()` 中的 `App::<Model>::new().mount_to_body()`,它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序,则可以使用 `App::<Model>::new().mount_to_body_with_props(..)`。
## 运行你的应用程序!

View File

@ -38,5 +38,41 @@
"sidebar.sidebar.category.More": {
"message": "More",
"description": "The label for category More in sidebar sidebar"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Project Setup": {
"message": "Project Setup",
"description": "The label for category Project Setup in sidebar docs"
},
"sidebar.docs.category.Concepts": {
"message": "Concepts",
"description": "The label for category Concepts in sidebar docs"
},
"sidebar.docs.category.Components": {
"message": "Components",
"description": "The label for category Components in sidebar docs"
},
"sidebar.docs.category.wasm-bindgen": {
"message": "wasm-bindgen",
"description": "The label for category wasm-bindgen in sidebar docs"
},
"sidebar.docs.category.HTML": {
"message": "HTML",
"description": "The label for category HTML in sidebar docs"
},
"sidebar.docs.category.Services": {
"message": "Services",
"description": "The label for category Services in sidebar docs"
},
"sidebar.docs.category.Advanced topics": {
"message": "Advanced topics",
"description": "The label for category Advanced topics in sidebar docs"
},
"sidebar.docs.category.More": {
"message": "More",
"description": "The label for category More in sidebar docs"
}
}

View File

@ -27,9 +27,7 @@ html!{
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 拥有 Props 的嵌套子组件
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -88,7 +88,7 @@ fn main() {
最后,将`index.html`文件添加当前应用的根目录下:
```html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -19,7 +19,7 @@ Trunk 基于`index.html`文件构建您的应用,并将其作为配置文件
要构建一个简单的 Yew 应用程序,您只需要在项目的根目录下创建`index.html`
```html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -54,5 +54,57 @@
"sidebar.sidebar.category.yew-router": {
"message": "yew-router",
"description": "The label for category yew-router in sidebar sidebar"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Project Setup": {
"message": "Project Setup",
"description": "The label for category Project Setup in sidebar docs"
},
"sidebar.docs.category.Concepts": {
"message": "Concepts",
"description": "The label for category Concepts in sidebar docs"
},
"sidebar.docs.category.wasm-bindgen": {
"message": "wasm-bindgen",
"description": "The label for category wasm-bindgen in sidebar docs"
},
"sidebar.docs.category.Components": {
"message": "Components",
"description": "The label for category Components in sidebar docs"
},
"sidebar.docs.category.HTML": {
"message": "HTML",
"description": "The label for category HTML in sidebar docs"
},
"sidebar.docs.category.Function Components": {
"message": "Function Components",
"description": "The label for category Function Components in sidebar docs"
},
"sidebar.docs.category.Advanced topics": {
"message": "Advanced topics",
"description": "The label for category Advanced topics in sidebar docs"
},
"sidebar.docs.category.More": {
"message": "More",
"description": "The label for category More in sidebar docs"
},
"sidebar.docs.category.Migration guides": {
"message": "Migration guides",
"description": "The label for category Migration guides in sidebar docs"
},
"sidebar.docs.category.yew": {
"message": "yew",
"description": "The label for category yew in sidebar docs"
},
"sidebar.docs.category.yew-agent": {
"message": "yew-agent",
"description": "The label for category yew-agent in sidebar docs"
},
"sidebar.docs.category.yew-router": {
"message": "yew-router",
"description": "The label for category yew-router in sidebar docs"
}
}

View File

@ -23,9 +23,7 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
但是我们可以更进一步!对于任何实现了 `PartialEq` 的项,可以使用一个 trait 和一个 blanket implementation 将这六行样板代码减少到一行。
{% code title="neq\_assign.rs" %}
```rust
```rust title="neq_assign.rs"
pub trait NeqAssign {
fn neq_assign(&mut self, new: Self) -> ShouldRender;
}
@ -46,8 +44,6 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
}
```
{% endcode %}
该 trait 称为 `NeqAssign` 是因为如果目标值和新值不相等,它将赋为新值。
这比简单的实现还要短:

View File

@ -27,9 +27,7 @@ html!{
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 拥有 Props 的嵌套子组件
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
添加 `yew` 到你的依赖库中([这里](https://docs.rs/yew) 可以查看最新版本的 Yew
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -21,13 +19,9 @@ edition = "2018"
yew = { version = "0.14.3", features = ["std_web"] }
```
{% endcode %}
将这份代码复制到你的 `src/main.rs` 文件中:
{% code title="src/main.rs" %}
```rust
```rust title="src/main.rs"
use yew::prelude::*;
struct Model {
@ -72,8 +66,6 @@ fn main() {
}
```
{% endcode %}
这份代码将构建你的称为 `Model` 的 `Component` 根组件,它会显示一个按钮,当你点击它时,`Model` 将会更新自己的状态。特别注意 `main()` 中的 `App::<Model>::new().mount_to_body()`,它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序,则可以使用 `App::<Model>::new().mount_to_body_with_props(..)`。
## 运行你的应用程序!

View File

@ -23,9 +23,7 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
但是我们可以更进一步!对于任何实现了 `PartialEq` 的项,可以使用一个 trait 和一个 blanket implementation 将这六行样板代码减少到一行。
{% code title="neq\_assign.rs" %}
```rust
```rust title="neq_assign.rs"
pub trait NeqAssign {
fn neq_assign(&mut self, new: Self) -> ShouldRender;
}
@ -46,8 +44,6 @@ fn change(&mut self, props: Self::Properties) -> ShouldRender {
}
```
{% endcode %}
该 trait 称为 `NeqAssign` 是因为如果目标值和新值不相等,它将赋为新值。
这比简单的实现还要短:

View File

@ -27,9 +27,7 @@ html!{
如果组件的 `Properties` 中有 `children` 字段,则可以被传递子组件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 拥有 Props 的嵌套子组件
如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,`List` 组件可以包含 `ListItem` 组件。有关此模式的真实示例,请查看 `yew-router` 的源码。有关更高级的示例,请在 yew 主仓库中查看 `nested-list` 示例代码。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
添加 `yew` 到你的依赖库中([这里](https://docs.rs/yew) 可以查看最新版本的 Yew
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -21,13 +19,9 @@ edition = "2018"
yew = { version = "0.14.3", features = ["std_web"] }
```
{% endcode %}
将这份代码复制到你的 `src/main.rs` 文件中:
{% code title="src/main.rs" %}
```rust
```rust title="src/main.rs"
use yew::prelude::*;
struct Model {
@ -72,8 +66,6 @@ fn main() {
}
```
{% endcode %}
这份代码将构建你的称为 `Model` 的 `Component` 根组件,它会显示一个按钮,当你点击它时,`Model` 将会更新自己的状态。特别注意 `main()` 中的 `App::<Model>::new().mount_to_body()`,它会启动你的应用并将其挂载到页面的 `<body>` 标签中。如果你想使用任何动态属性来启动应用程序,则可以使用 `App::<Model>::new().mount_to_body_with_props(..)`。
## 运行你的应用程序!

View File

@ -295,5 +295,133 @@
"theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
"message": "Toggle navigation bar",
"description": "The ARIA label for hamburger menu button of mobile navigation"
},
"theme.admonition.warning": {
"message": "warning",
"description": "The default label used for the Warning admonition (:::warning)"
},
"theme.DocSidebarItem.expandCategoryAriaLabel": {
"message": "Expand sidebar category '{label}'",
"description": "The ARIA label to expand the sidebar category"
},
"theme.DocSidebarItem.collapseCategoryAriaLabel": {
"message": "Collapse sidebar category '{label}'",
"description": "The ARIA label to collapse the sidebar category"
},
"theme.unlistedContent.title": {
"message": "未列出頁",
"description": "The unlisted content banner title"
},
"theme.unlistedContent.message": {
"message": "此頁面未列出。搜索引擎不會對其索引,只有擁有直接連結的用戶才能訪問。",
"description": "The unlisted content banner message"
},
"theme.SearchPage.inputPlaceholder": {
"message": "在此輸入搜尋字詞",
"description": "The placeholder for search page input"
},
"theme.SearchPage.inputLabel": {
"message": "搜尋",
"description": "The ARIA label for search page input"
},
"theme.SearchPage.algoliaLabel": {
"message": "透過 Algolia 搜尋",
"description": "The ARIA label for Algolia mention"
},
"theme.SearchPage.fetchingNewResults": {
"message": "正在取得新的搜尋結果...",
"description": "The paragraph for fetching new search results"
},
"theme.SearchModal.searchBox.resetButtonTitle": {
"message": "清除查詢",
"description": "The label and ARIA label for search box reset button"
},
"theme.SearchModal.searchBox.cancelButtonText": {
"message": "取消",
"description": "The label and ARIA label for search box cancel button"
},
"theme.SearchModal.startScreen.recentSearchesTitle": {
"message": "最近搜索",
"description": "The title for recent searches"
},
"theme.SearchModal.startScreen.noRecentSearchesText": {
"message": "沒有最近搜索",
"description": "The text when no recent searches"
},
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
"message": "保存這個搜索",
"description": "The label for save recent search button"
},
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
"message": "從歷史記錄中刪除這個搜索",
"description": "The label for remove recent search button"
},
"theme.SearchModal.startScreen.favoriteSearchesTitle": {
"message": "收藏",
"description": "The title for favorite searches"
},
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
"message": "從收藏列表中刪除這個搜索",
"description": "The label for remove favorite search button"
},
"theme.SearchModal.errorScreen.titleText": {
"message": "無法獲取結果",
"description": "The title for error screen of search modal"
},
"theme.SearchModal.errorScreen.helpText": {
"message": "你可能需要檢查網路連接。",
"description": "The help text for error screen of search modal"
},
"theme.SearchModal.footer.selectText": {
"message": "選中",
"description": "The explanatory text of the action for the enter key"
},
"theme.SearchModal.footer.selectKeyAriaLabel": {
"message": "Enter 鍵",
"description": "The ARIA label for the Enter key button that makes the selection"
},
"theme.SearchModal.footer.navigateText": {
"message": "導航",
"description": "The explanatory text of the action for the Arrow up and Arrow down key"
},
"theme.SearchModal.footer.navigateUpKeyAriaLabel": {
"message": "向上鍵",
"description": "The ARIA label for the Arrow up key button that makes the navigation"
},
"theme.SearchModal.footer.navigateDownKeyAriaLabel": {
"message": "向下鍵",
"description": "The ARIA label for the Arrow down key button that makes the navigation"
},
"theme.SearchModal.footer.closeText": {
"message": "關閉",
"description": "The explanatory text of the action for Escape key"
},
"theme.SearchModal.footer.closeKeyAriaLabel": {
"message": "Esc 鍵",
"description": "The ARIA label for the Escape key button that close the modal"
},
"theme.SearchModal.footer.searchByText": {
"message": "搜索提供",
"description": "The text explain that the search is making by Algolia"
},
"theme.SearchModal.noResultsScreen.noResultsText": {
"message": "沒有結果:",
"description": "The text explains that there are no results for the following search"
},
"theme.SearchModal.noResultsScreen.suggestedQueryText": {
"message": "試試搜索",
"description": "The text for the suggested query when no results are found for the following search"
},
"theme.SearchModal.noResultsScreen.reportMissingResultsText": {
"message": "認為這個查詢應該有結果?",
"description": "The text for the question where the user thinks there are missing results"
},
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
"message": "請告知我們。",
"description": "The text for the link to report missing results"
},
"theme.SearchModal.placeholder": {
"message": "搜索文檔",
"description": "The placeholder of the input of the DocSearch pop-up modal"
}
}

View File

@ -27,9 +27,7 @@ html!{
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 指定子結點的型別
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew)
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -22,13 +20,9 @@ yew = "0.16"
wasm-bindgen = "0.2"
```
{% endcode %}
將下面的模板複製進你的 `src/lib.rs` 檔案:
{% code title="src/lib.rs" %}
```rust
```rust title="src/lib.rs"
use wasm_bindgen::prelude::*;
use yew::prelude::*;
@ -80,8 +74,6 @@ pub fn run_app() {
}
```
{% endcode %}
模板會建置名叫 `Model` 的根元件 `Component`Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
@ -90,9 +82,7 @@ pub fn run_app() {
mkdir static
```
{% code title="index.html" %}
```bash
```bash title="index.html"
<!doctype html>
<html lang="en">
<head>
@ -107,8 +97,6 @@ mkdir static
</html>
```
{% endcode %}
## 執行你的 App
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:

View File

@ -38,5 +38,41 @@
"sidebar.sidebar.category.More": {
"message": "More",
"description": "The label for category More in sidebar sidebar"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Project Setup": {
"message": "Project Setup",
"description": "The label for category Project Setup in sidebar docs"
},
"sidebar.docs.category.Concepts": {
"message": "Concepts",
"description": "The label for category Concepts in sidebar docs"
},
"sidebar.docs.category.Components": {
"message": "Components",
"description": "The label for category Components in sidebar docs"
},
"sidebar.docs.category.wasm-bindgen": {
"message": "wasm-bindgen",
"description": "The label for category wasm-bindgen in sidebar docs"
},
"sidebar.docs.category.HTML": {
"message": "HTML",
"description": "The label for category HTML in sidebar docs"
},
"sidebar.docs.category.Services": {
"message": "Services",
"description": "The label for category Services in sidebar docs"
},
"sidebar.docs.category.Advanced topics": {
"message": "Advanced topics",
"description": "The label for category Advanced topics in sidebar docs"
},
"sidebar.docs.category.More": {
"message": "More",
"description": "The label for category More in sidebar docs"
}
}

View File

@ -27,9 +27,7 @@ html!{
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 指定子結點的型別
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew)
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -22,13 +20,9 @@ yew = "0.16"
wasm-bindgen = "0.2"
```
{% endcode %}
將下面的模板複製進你的 `src/lib.rs` 檔案:
{% code title="src/lib.rs" %}
```rust
```rust title="src/lib.rs"
use wasm_bindgen::prelude::*;
use yew::prelude::*;
@ -80,8 +74,6 @@ pub fn run_app() {
}
```
{% endcode %}
模板會建置名叫 `Model` 的根元件 `Component`Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
@ -90,9 +82,7 @@ pub fn run_app() {
mkdir static
```
{% code title="index.html" %}
```bash
```bash title="index.html"
<!doctype html>
<html lang="en">
<head>
@ -107,8 +97,6 @@ mkdir static
</html>
```
{% endcode %}
## 執行你的 App
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:

View File

@ -4,9 +4,7 @@
Yew apps 可以用 `web-sys` 或 `stdweb` 編譯。這兩個 creates 都提供了 Rust 與 WebAPIs 的連結。當把 `yew` 加進你的依賴時,請擇其一使用:
{% code title="Cargo.toml" %}
```rust
```rust title="Cargo.toml"
# 選擇 `web-sys`
yew = { version = "0.13", features = ["web_sys"] }
@ -14,8 +12,6 @@ yew = { version = "0.13", features = ["web_sys"] }
yew = { version = "0.13", features = ["std_web"] }
```
{% endcode %}
我們建議使用 `web-sys`,因為他是由 [Rust / Wasm Working Group](https://rustwasm.github.io/) 維護。
## 使用範例

View File

@ -9,9 +9,7 @@
你的 `Cargo.toml` 必須要設定一個 `cdylib` 的 crate-type。
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -29,8 +27,6 @@ yew = 0.15
wasm-bindgen = "0.2"
```
{% endcode %}
## 其他的模板
- [Parcel Template](https://github.com/spielrs/yew-parcel-template) - 由一個社群成員用 [Parcel](https://parceljs.org/) 製作

View File

@ -54,5 +54,57 @@
"sidebar.sidebar.category.yew-router": {
"message": "yew-router",
"description": "The label for category yew-router in sidebar sidebar"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Project Setup": {
"message": "Project Setup",
"description": "The label for category Project Setup in sidebar docs"
},
"sidebar.docs.category.Concepts": {
"message": "Concepts",
"description": "The label for category Concepts in sidebar docs"
},
"sidebar.docs.category.wasm-bindgen": {
"message": "wasm-bindgen",
"description": "The label for category wasm-bindgen in sidebar docs"
},
"sidebar.docs.category.Components": {
"message": "Components",
"description": "The label for category Components in sidebar docs"
},
"sidebar.docs.category.HTML": {
"message": "HTML",
"description": "The label for category HTML in sidebar docs"
},
"sidebar.docs.category.Function Components": {
"message": "Function Components",
"description": "The label for category Function Components in sidebar docs"
},
"sidebar.docs.category.Advanced topics": {
"message": "Advanced topics",
"description": "The label for category Advanced topics in sidebar docs"
},
"sidebar.docs.category.More": {
"message": "More",
"description": "The label for category More in sidebar docs"
},
"sidebar.docs.category.Migration guides": {
"message": "Migration guides",
"description": "The label for category Migration guides in sidebar docs"
},
"sidebar.docs.category.yew": {
"message": "yew",
"description": "The label for category yew in sidebar docs"
},
"sidebar.docs.category.yew-agent": {
"message": "yew-agent",
"description": "The label for category yew-agent in sidebar docs"
},
"sidebar.docs.category.yew-router": {
"message": "yew-router",
"description": "The label for category yew-router in sidebar docs"
}
}

View File

@ -27,9 +27,7 @@ html!{
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 指定子結點的型別
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew)
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -22,13 +20,9 @@ yew = "0.16"
wasm-bindgen = "0.2"
```
{% endcode %}
將下面的模板複製進你的 `src/lib.rs` 檔案:
{% code title="src/lib.rs" %}
```rust
```rust title="src/lib.rs"
use wasm_bindgen::prelude::*;
use yew::prelude::*;
@ -80,8 +74,6 @@ pub fn run_app() {
}
```
{% endcode %}
模板會建置名叫 `Model` 的根元件 `Component`Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
@ -90,9 +82,7 @@ pub fn run_app() {
mkdir static
```
{% code title="index.html" %}
```bash
```bash title="index.html"
<!doctype html>
<html lang="en">
<head>
@ -107,8 +97,6 @@ mkdir static
</html>
```
{% endcode %}
## 執行你的 App
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:

View File

@ -27,9 +27,7 @@ html!{
只要元件的 `Properties` 中有 `children`,就可以傳遞子結點給元件。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<Container>
<h4>{ "Hi" }</h4>
@ -38,11 +36,7 @@ html! {
}
```
{% endcode %}
{% code title="container.rs" %}
```rust
```rust title="container.rs"
pub struct Container(Props);
#[derive(Properties)]
@ -65,15 +59,11 @@ impl Component for Container {
}
```
{% endcode %}
## 指定子結點的型別
如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, `List` 元件包裹 `ListItem` 元件。另一個真實的範例是 `yew-router` 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 `nested-list` 範例。
{% code title="parent.rs" %}
```rust
```rust title="parent.rs"
html! {
<List>
<ListItem value="a" />
@ -83,11 +73,7 @@ html! {
}
```
{% endcode %}
{% code title="list.rs" %}
```rust
```rust title="list.rs"
pub struct List(Props);
#[derive(Properties)]
@ -110,5 +96,3 @@ impl Component for List {
}
}
```
{% endcode %}

View File

@ -8,9 +8,7 @@ cargo new --bin yew-app && cd yew-app
在依賴庫裡加入 `yew` 與 `wasm-bindgen`(最新的版號,請參考[這裡](https://docs.rs/yew)
{% code title="Cargo.toml" %}
```text
```text title="Cargo.toml"
[package]
name = "yew-app"
version = "0.1.0"
@ -22,13 +20,9 @@ yew = "0.16"
wasm-bindgen = "0.2"
```
{% endcode %}
將下面的模板複製進你的 `src/lib.rs` 檔案:
{% code title="src/lib.rs" %}
```rust
```rust title="src/lib.rs"
use wasm_bindgen::prelude::*;
use yew::prelude::*;
@ -80,8 +74,6 @@ pub fn run_app() {
}
```
{% endcode %}
模板會建置名叫 `Model` 的根元件 `Component`Model 會顯示一個按鈕,當你按下按鈕時, `Model` 會更新自己的狀態。需要特別注意的是,在 `main()` 裡的 `App::<Model>::new().mount_to_body()`,他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `<body>` 標籤中。如果你想要在啟動應用程式時,帶入動態的屬性,你可以改用 `App::<Model>::new().mount_to_body_with_props(..)`。
最後,在你的專案,新增 `static` 資料夾,並新增 `index.html` 檔案到 static 裡。
@ -90,9 +82,7 @@ pub fn run_app() {
mkdir static
```
{% code title="index.html" %}
```bash
```bash title="index.html"
<!doctype html>
<html lang="en">
<head>
@ -107,8 +97,6 @@ mkdir static
</html>
```
{% endcode %}
## 執行你的 App
使用 [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) 來執行專案是比較好的選擇。如果你還沒有做任何準備,先用`cargo install wasm-pack`安裝 `wasm-pack` ,然後用下面的指令,建置與開啟開發用伺服器:

10087
website/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -17,21 +17,17 @@
"fmt:write": "prettier --write ."
},
"dependencies": {
"@docusaurus/core": "^2.4.3",
"@docusaurus/plugin-client-redirects": "^2.4.3",
"@docusaurus/plugin-content-docs": "^2.4.3",
"@docusaurus/plugin-content-pages": "^2.4.3",
"@docusaurus/plugin-google-gtag": "^2.4.3",
"@docusaurus/theme-classic": "^2.4.3",
"@easyops-cn/docusaurus-search-local": "^0.32.0",
"@mdx-js/react": "^1.6.22",
"@svgr/webpack": "^8.0.1",
"clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.2",
"@docusaurus/core": "^3.0.0",
"@docusaurus/plugin-client-redirects": "^3.0.0",
"@docusaurus/preset-classic": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@svgr/webpack": "^8.1.0",
"clsx": "^2.0.0",
"docusaurus-plugin-sass": "^0.2.5",
"file-loader": "^6.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.55.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.69.5",
"url-loader": "^4.1.1"
},
"browserslist": {
@ -46,16 +42,19 @@
"last 1 safari version"
]
},
"engines": {
"node": ">=18.0"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^2.4.3",
"@tsconfig/docusaurus": "^2.0.0",
"@types/react": "^17.0.43",
"@types/react-helmet": "^6.1.6",
"@docusaurus/module-type-aliases": "^3.0.0",
"@docusaurus/tsconfig": "3.0.0",
"@types/react": "^18.2.34",
"@types/react-helmet": "^6.1.8",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.54.0",
"dir-compare": "^4.0.0",
"prettier": "^2.8.8",
"typescript": "^4.8.3"
"@typescript-eslint/eslint-plugin": "^6.9.1",
"@typescript-eslint/parser": "^6.9.1",
"dir-compare": "^4.2.0",
"prettier": "^3.0.3",
"typescript": "^5.2.2"
}
}

View File

@ -1,4 +1,4 @@
{
"extends": "@tsconfig/docusaurus/tsconfig.json",
"extends": "@docusaurus/tsconfig",
"include": ["src/"]
}

View File

@ -90,7 +90,7 @@ If you would like to start your application with any dynamic properties, you can
Finally, add an `index.html` file in the root directory of your app:
```html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -23,7 +23,7 @@ as an entry point.
To build a simple Yew app you just need an `index.html` file at the root of your project:
```html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -24,7 +24,7 @@ as an entry point.
To build a simple Yew app you just need an `index.html` file at the root of your project:
```html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -99,7 +99,7 @@ fn main() {
Now, let's create an `index.html` at the root of the project.
```html title="index.html"
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head> </head>
<body></body>

View File

@ -122,7 +122,7 @@ fn main() {
Finally, add an `index.html` file in the root directory of your app.
```html , title=index.html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -105,7 +105,7 @@ fn main() {
Now, let's create an `index.html` at the root of the project.
```html title="index.html"
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head></head>
<body></body>

View File

@ -115,7 +115,7 @@ fn main() {
Finally, add an `index.html` file in the root directory of your app.
```html , title=index.html
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

View File

@ -105,7 +105,7 @@ fn main() {
Now, let's create an `index.html` at the root of the project.
```html title="index.html"
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head></head>
<body></body>

View File

@ -1,5 +1,5 @@
{
"version-0.18.0/sidebar": [
"docs": [
{
"collapsed": true,
"type": "category",
@ -12,37 +12,37 @@
"items": [
{
"type": "doc",
"id": "version-0.18.0/getting-started/introduction"
"id": "getting-started/introduction"
},
{
"type": "doc",
"id": "version-0.18.0/getting-started/project-setup/using-trunk"
"id": "getting-started/project-setup/using-trunk"
},
{
"type": "doc",
"id": "version-0.18.0/getting-started/project-setup/using-wasm-pack"
"id": "getting-started/project-setup/using-wasm-pack"
},
{
"type": "doc",
"id": "version-0.18.0/getting-started/project-setup/using-cargo-web"
"id": "getting-started/project-setup/using-cargo-web"
}
]
},
{
"type": "doc",
"id": "version-0.18.0/getting-started/build-a-sample-app"
"id": "getting-started/build-a-sample-app"
},
{
"type": "doc",
"id": "version-0.18.0/getting-started/choose-web-library"
"id": "getting-started/choose-web-library"
},
{
"type": "doc",
"id": "version-0.18.0/getting-started/examples"
"id": "getting-started/examples"
},
{
"type": "doc",
"id": "version-0.18.0/getting-started/starter-templates"
"id": "getting-started/starter-templates"
}
]
},
@ -58,23 +58,23 @@
"items": [
{
"type": "doc",
"id": "version-0.18.0/concepts/components/introduction"
"id": "concepts/components/introduction"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/components/callbacks"
"id": "concepts/components/callbacks"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/components/properties"
"id": "concepts/components/properties"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/components/children"
"id": "concepts/components/children"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/components/refs"
"id": "concepts/components/refs"
}
]
},
@ -85,11 +85,11 @@
"items": [
{
"type": "doc",
"id": "version-0.18.0/concepts/wasm-bindgen/wasm-bindgen"
"id": "concepts/wasm-bindgen/wasm-bindgen"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/wasm-bindgen/web-sys"
"id": "concepts/wasm-bindgen/web-sys"
}
]
},
@ -100,31 +100,31 @@
"items": [
{
"type": "doc",
"id": "version-0.18.0/concepts/html/introduction"
"id": "concepts/html/introduction"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/html/components"
"id": "concepts/html/components"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/html/elements"
"id": "concepts/html/elements"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/html/events"
"id": "concepts/html/events"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/html/classes"
"id": "concepts/html/classes"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/html/lists"
"id": "concepts/html/lists"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/html/literals-and-expressions"
"id": "concepts/html/literals-and-expressions"
}
]
},
@ -135,25 +135,25 @@
"items": [
{
"type": "doc",
"id": "version-0.18.0/concepts/services/introduction"
"id": "concepts/services/introduction"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/services/fetch"
"id": "concepts/services/fetch"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/services/format"
"id": "concepts/services/format"
}
]
},
{
"type": "doc",
"id": "version-0.18.0/concepts/router"
"id": "concepts/router"
},
{
"type": "doc",
"id": "version-0.18.0/concepts/agents"
"id": "concepts/agents"
}
]
},
@ -164,11 +164,11 @@
"items": [
{
"type": "doc",
"id": "version-0.18.0/advanced-topics/how-it-works"
"id": "advanced-topics/how-it-works"
},
{
"type": "doc",
"id": "version-0.18.0/advanced-topics/optimizations"
"id": "advanced-topics/optimizations"
}
]
},
@ -179,23 +179,23 @@
"items": [
{
"type": "doc",
"id": "version-0.18.0/more/debugging"
"id": "more/debugging"
},
{
"type": "doc",
"id": "version-0.18.0/more/css"
"id": "more/css"
},
{
"type": "doc",
"id": "version-0.18.0/more/external-libs"
"id": "more/external-libs"
},
{
"type": "doc",
"id": "version-0.18.0/more/testing"
"id": "more/testing"
},
{
"type": "doc",
"id": "version-0.18.0/more/roadmap"
"id": "more/roadmap"
}
]
}

View File

@ -1,5 +1,5 @@
{
"version-0.19.0/sidebar": [
"docs": [
{
"type": "category",
"label": "Getting Started",
@ -10,15 +10,15 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/getting-started/introduction"
"id": "getting-started/introduction"
},
{
"type": "doc",
"id": "version-0.19.0/getting-started/project-setup/using-trunk"
"id": "getting-started/project-setup/using-trunk"
},
{
"type": "doc",
"id": "version-0.19.0/getting-started/project-setup/using-wasm-pack"
"id": "getting-started/project-setup/using-wasm-pack"
}
],
"collapsible": true,
@ -26,15 +26,15 @@
},
{
"type": "doc",
"id": "version-0.19.0/getting-started/build-a-sample-app"
"id": "getting-started/build-a-sample-app"
},
{
"type": "doc",
"id": "version-0.19.0/getting-started/examples"
"id": "getting-started/examples"
},
{
"type": "doc",
"id": "version-0.19.0/getting-started/starter-templates"
"id": "getting-started/starter-templates"
}
],
"collapsible": true,
@ -50,11 +50,11 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/concepts/wasm-bindgen/introduction"
"id": "concepts/wasm-bindgen/introduction"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/wasm-bindgen/web-sys"
"id": "concepts/wasm-bindgen/web-sys"
}
],
"collapsible": true,
@ -66,27 +66,27 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/concepts/components/introduction"
"id": "concepts/components/introduction"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/components/callbacks"
"id": "concepts/components/callbacks"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/components/scope"
"id": "concepts/components/scope"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/components/properties"
"id": "concepts/components/properties"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/components/children"
"id": "concepts/components/children"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/components/refs"
"id": "concepts/components/refs"
}
],
"collapsible": true,
@ -98,35 +98,35 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/concepts/html/introduction"
"id": "concepts/html/introduction"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/html/components"
"id": "concepts/html/components"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/html/elements"
"id": "concepts/html/elements"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/html/events"
"id": "concepts/html/events"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/html/classes"
"id": "concepts/html/classes"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/html/fragments"
"id": "concepts/html/fragments"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/html/lists"
"id": "concepts/html/lists"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/html/literals-and-expressions"
"id": "concepts/html/literals-and-expressions"
}
],
"collapsible": true,
@ -138,19 +138,19 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/concepts/function-components/introduction"
"id": "concepts/function-components/introduction"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/function-components/attribute"
"id": "concepts/function-components/attribute"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/function-components/pre-defined-hooks"
"id": "concepts/function-components/pre-defined-hooks"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/function-components/custom-hooks"
"id": "concepts/function-components/custom-hooks"
}
],
"collapsible": true,
@ -158,15 +158,15 @@
},
{
"type": "doc",
"id": "version-0.19.0/concepts/agents"
"id": "concepts/agents"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/contexts"
"id": "concepts/contexts"
},
{
"type": "doc",
"id": "version-0.19.0/concepts/router"
"id": "concepts/router"
}
],
"collapsible": true,
@ -178,15 +178,15 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/advanced-topics/how-it-works"
"id": "advanced-topics/how-it-works"
},
{
"type": "doc",
"id": "version-0.19.0/advanced-topics/optimizations"
"id": "advanced-topics/optimizations"
},
{
"type": "doc",
"id": "version-0.19.0/advanced-topics/portals"
"id": "advanced-topics/portals"
}
],
"collapsible": true,
@ -198,31 +198,31 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/more/debugging"
"id": "more/debugging"
},
{
"type": "doc",
"id": "version-0.19.0/more/development-tips"
"id": "more/development-tips"
},
{
"type": "doc",
"id": "version-0.19.0/more/external-libs"
"id": "more/external-libs"
},
{
"type": "doc",
"id": "version-0.19.0/more/css"
"id": "more/css"
},
{
"type": "doc",
"id": "version-0.19.0/more/testing"
"id": "more/testing"
},
{
"type": "doc",
"id": "version-0.19.0/more/roadmap"
"id": "more/roadmap"
},
{
"type": "doc",
"id": "version-0.19.0/more/wasm-build-tools"
"id": "more/wasm-build-tools"
}
],
"collapsible": true,
@ -238,7 +238,7 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/migration-guides/yew/from-0_18_0-to-0_19_0"
"id": "migration-guides/yew/from-0_18_0-to-0_19_0"
}
],
"collapsible": true,
@ -250,7 +250,7 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/migration-guides/yew-agent/from-0_0_0-to-0_1_0"
"id": "migration-guides/yew-agent/from-0_0_0-to-0_1_0"
}
],
"collapsible": true,
@ -262,7 +262,7 @@
"items": [
{
"type": "doc",
"id": "version-0.19.0/migration-guides/yew-router/from-0_15_0-to-0_16_0"
"id": "migration-guides/yew-router/from-0_15_0-to-0_16_0"
}
],
"collapsible": true,