Update to yew 0.21 and material-web-3

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -3,4 +3,11 @@ node_modules
 dist
 
 # no need to include @material/web bundled in the repo
-md-web
+# md-web
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

Cargo.toml

@@ -9,16 +9,18 @@ edition = "2021"
 indexmap = "2.0.2"
 js-sys = "0.3.64"
 wasm-bindgen = "0.2.87"
-yew = { git = "https://github.com/yewstack/yew", features = ["csr"] }
+yew = { version = "0.21", features = ["csr"] }
 
 [dependencies.web-sys]
 version = "0.3.64"
 features = [
-    "HtmlFormElement"
+    "HtmlFormElement",
+    "CustomEvent"
 ]
 
 [workspace]
 members = [
     "build",
-    "usages"
+    "usages",
+    "matdemo"
 ]

build/README.md

@@ -5,8 +5,8 @@ Generates Rust wrapper for a component from material-web.
 ## Updating material web submodule
 
 1. Update the submodule to the latest version: `git submodule update --recursive --remote build/material-web`
-2. Checkout the new tag: `cd build/material-web && git checkout v1.4.0`
-3. Update the submodule reference in the main repository: `git add build/material-web && git commit -m "pin build/material web to v1.4.0"`
+2. Checkout the new tag: `cd build/material-web && git checkout v2.4.0`
+3. Update the submodule reference in the main repository: `git add build/material-web && git commit -m "pin build/material web to v2.4.0"`
 4. Update build/package.json with the tag used in step 2
 5. Run `npm install` in the build directory
 6. Run `npm run build` in the build directory

build/index.html

@@ -6,7 +6,7 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
-
+    <link data-trunk rel="rust" data-bin="usages" />
     <script type="module">
         import "/dist/core.js"
         import "/dist/elevated-button.js"

build/package.json

@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@material/web": "1.4.0"
+    "@material/web": "2.4.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.2",

build/rollup.config.mjs

@@ -8,6 +8,11 @@ const config = {
         "./rollup_inputs/fab.js",
         "./rollup_inputs/chip.js",
         "./rollup_inputs/icon-button.js",
+        "./rollup_inputs/chips.js",
+        "./rollup_inputs/field.js",
+        "./rollup_inputs/select.js",
+        "./rollup_inputs/tabs.js",
+        "./rollup_inputs/textfield.js",
         "@material/web/checkbox/checkbox.js",
         "@material/web/radio/radio.js",
         "@material/web/menu/menu.js",
@@ -19,6 +24,10 @@ const config = {
         "@material/web/progress/linear-progress.js",
         "@material/web/slider/slider.js",
         "@material/web/switch/switch.js",
+        // Added new components below
+        "@material/web/dialog/dialog.js",
+        "@material/web/divider/divider.js",
+        "@material/web/ripple/ripple.js",
     ],
     plugins: [nodeResolve()],
     output: {

build/rollup_inputs/chips.js

@@ -0,0 +1,2 @@
+import "@material/web/chips/chip.js";
+import "@material/web/chips/chip-set.js";

build/rollup_inputs/divider.js

@@ -0,0 +1 @@
+import '@material/web/divider/divider.js';

build/rollup_inputs/field.js

@@ -0,0 +1,2 @@
+import "@material/web/field/filled-field.js";
+import "@material/web/field/outlined-field.js";

build/rollup_inputs/select.js

@@ -0,0 +1,2 @@
+import "@material/web/select/filled-select.js";
+import "@material/web/select/outlined-select.js";

build/rollup_inputs/tabs.js

@@ -0,0 +1,2 @@
+import "@material/web/tabs/tabs.js";
+import "@material/web/tabs/tab.js";

build/rollup_inputs/textfield.js

@@ -0,0 +1,2 @@
+import "@material/web/textfield/filled-text-field.js";
+import "@material/web/textfield/outlined-text-field.js";

matdemo/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "matdemo"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew = { version = "0.21", features = ["csr"] }
+material-yew = { path = ".." }
+wasm-bindgen = "0.2"
+
+
+[profile.release]
+lto = true
+codegen-units = 1
+opt-level = "z"

matdemo/README.md

@@ -0,0 +1,32 @@
+# matdemo
+
+A demo web application for Material Yew components.
+
+## Prerequisites
+- [Rust](https://rustup.rs/) (with wasm32 target)
+- [Trunk](https://trunkrs.dev/) (`cargo install trunk`)
+
+## Build and Run
+
+1. Install Trunk if you haven't:
+   ```bash
+   cargo install trunk
+   ```
+2. Add the wasm32 target if needed:
+   ```bash
+   rustup target add wasm32-unknown-unknown
+   ```
+3. Build and serve the app:
+   ```bash
+   trunk serve --open
+   ```
+   This will open the demo at http://localhost:8080
+
+## Project Structure
+- `src/main.rs`: App entry point
+- `src/pages.rs`: Demo pages for each component
+- `index.html`: Main HTML file
+- `Trunk.toml`: Trunk configuration
+
+## Notes
+- The demo showcases all available Material Yew components with simple usage examples.

matdemo/Trunk.toml

@@ -0,0 +1,7 @@
+[static]
+dir = "../md-web"
+mount = "/md-web"
+
+[serve]
+port = 8080
+open = true

matdemo/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Material Yew Demo</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <!-- Material Web v3 theme and typography -->
+    <link rel="stylesheet" href="https://unpkg.com/@material/web@latest/all.css" />
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module">import init from './matdemo.js'; init();</script>
+</body>
+</html>

matdemo/src/main.rs

@@ -0,0 +1,18 @@
+use yew::prelude::*;
+use material_yew::*;
+
+mod pages;
+
+#[function_component(App)]
+fn app() -> Html {
+    html! {
+        <>
+            <h1>{ "Material Yew Component Demos" }</h1>
+            <pages::DemoPages />
+        </>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}