{"id":13502941,"url":"https://github.com/chinedufn/percy","last_synced_at":"2025-05-14T02:04:54.530Z","repository":{"id":37561675,"uuid":"141128198","full_name":"chinedufn/percy","owner":"chinedufn","description":"Build frontend browser apps with Rust + WebAssembly. Supports server side rendering.","archived":false,"fork":false,"pushed_at":"2024-09-29T13:42:49.000Z","size":9946,"stargazers_count":2283,"open_issues_count":43,"forks_count":84,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-04-16T21:30:58.591Z","etag":null,"topics":["browser","frontend","virtual-dom","wasm","web","webassembly"],"latest_commit_sha":null,"homepage":"https://chinedufn.github.io/percy/","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chinedufn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-APACHE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-16T11:14:12.000Z","updated_at":"2025-04-15T21:07:51.000Z","dependencies_parsed_at":"2023-02-08T09:01:21.894Z","dependency_job_id":"49e60165-163a-4f5d-b1db-5b0e025a2baa","html_url":"https://github.com/chinedufn/percy","commit_stats":{"total_commits":692,"total_committers":29,"mean_commits":"23.862068965517242","dds":"0.14306358381502893","last_synced_commit":"b3a3eec66ad5908fb067c89bcf6cafbe8a69ed9a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinedufn%2Fpercy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinedufn%2Fpercy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinedufn%2Fpercy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinedufn%2Fpercy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinedufn","download_url":"https://codeload.github.com/chinedufn/percy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052675,"owners_count":22006716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","frontend","virtual-dom","wasm","web","webassembly"],"created_at":"2024-07-31T22:02:31.177Z","updated_at":"2025-05-14T02:04:54.495Z","avatar_url":"https://github.com/chinedufn.png","language":"Rust","funding_links":[],"categories":["Rust","库","browser","frontend","Alternatives"],"sub_categories":["Frameworks"],"readme":"Percy\n=====\n\n[![Actions Status](https://github.com/chinedufn/percy/workflows/tests/badge.svg)](https://github.com/chinedufn/percy/actions)\n[![Actions Status](https://github.com/chinedufn/percy/workflows/github-pages/badge.svg)](https://github.com/chinedufn/percy/actions)\n\n\u003e Build frontend browser apps with Rust + WebAssembly. Supports server side rendering.\n\n## The Percy Book\n\nThis README gives a light introduction to Percy. Check out [The Percy Book] for a full walk through.\n\n[The Percy Book]: https://chinedufn.github.io/percy/\n\n## Stable Rust\n\nPercy compiles on stable Rust with one caveat:\n\nOn nightly Rust you can create text nodes without quotes.\n\n```rust\n// Nightly Rust does not require quotes around text nodes.\nhtml! { \u003cdiv\u003eMy text nodes here \u003c/div\u003e };\n```\n\nOn stable Rust, quotation marks are required.\n\n```rust\n// Stable Rust requires quotes around text nodes.\nhtml! { \u003cdiv\u003e{ \"My text nodes here \" }\u003c/div\u003e };\n```\n\nThis difference will go away once span locations are stabilized in the Rust compiler - [Rust tracking issue](https://github.com/rust-lang/rust/issues/54725).\n\n## Getting Started\n\nThe best way to get up to speed is by checking out [The Percy Book](https://chinedufn.github.io/percy/), but here is a\nvery basic example to get your feet wet with.\n\n### Quickstart - Getting your feet wet\n\nPercy allows you to create applications that only have server side rendering, only client side rendering,\nor both server and client side rendering.\n\nHere's a quick-and-easy working example of client side rendering that you can try right now:\n\n---\n\nFirst, Create a new project using\n\n```sh\ncargo new client-side-web-app --lib\ncd client-side-web-app\n```\n\n---\n\nAdd the following files to your project.\n\n```sh\ntouch build.sh\ntouch index.html\ntouch app.css\n```\n\n---\n\nHere's the directory structure:\n\n```sh\n.\n├── Cargo.toml\n├── build.sh\n├── index.html\n├── app.css\n└── src\n    └── lib.rs\n```\n\n---\n\nNow edit each file with the following contents:\n\n```sh\n# contents of build.sh\n\n#!/bin/bash\n\ncd \"$(dirname \"$0\")\"\n\nmkdir -p public\n\ncargo build --target wasm32-unknown-unknown\nwasm-bindgen target/wasm32-unknown-unknown/debug/client_side_web_app.wasm --no-typescript --target web --out-dir ./public --debug\ncp index.html public/\ncp app.css public/\n```\n\n---\n\n```rust\n// contents of src/lib.rs\n\nuse wasm_bindgen::prelude::*;\nuse web_sys;\n\nuse percy_dom::prelude::*;\n\n#[wasm_bindgen]\nstruct App {\n  pdom: PercyDom\n}\n\n#[wasm_bindgen]\nimpl App {\n    #[wasm_bindgen(constructor)]\n    pub fn new () -\u003e App {\n        let start_view = html! { \u003cdiv\u003e Hello \u003c/div\u003e };\n\n        let window = web_sys::window().unwrap();\n        let document = window.document().unwrap();\n        let body = document.body().unwrap();\n\n        let mut pdom = PercyDom::new_append_to_mount(start_view, \u0026body);\n\n        let greetings = \"Hello, World!\";\n\n        let end_view = html! {\n           // Use regular Rust comments within your html\n           \u003cdiv class=[\"big\", \"blue\"]\u003e\n              /* Interpolate values using braces */\n              \u003cstrong\u003e{ greetings }\u003c/strong\u003e\n\n              \u003cbutton\n                class=\"giant-button\"\n                onclick=|_event| {\n                   web_sys::console::log_1(\u0026\"Button Clicked!\".into());\n                }\n              \u003e\n                // No need to wrap text in quotation marks (:\n                Click me and check your console\n              \u003c/button\u003e\n           \u003c/div\u003e\n        };\n\n        pdom.update(end_view);\n\n        App { pdom }\n    }\n}\n```\n\n---\n\n```toml\n# contents of Cargo.toml\n\n[package]\nname = \"client-side-web-app\"\nversion = \"0.1.0\"\nauthors = [\"Friends of Percy\"]\nedition = \"2018\"\n\n[lib]\ncrate-type = [\"cdylib\"] # Don't forget this!\n\n[dependencies]\nwasm-bindgen = \"0.2\"\njs-sys = \"0.3\"\npercy-dom = \"0.9\"\n\n[dependencies.web-sys]\nversion = \"0.3\"\nfeatures = [\n    \"Document\",\n    \"MouseEvent\",\n    \"Window\",\n    \"console\"\n]\n```\n\n---\n\n```html\n\u003c!-- contents of index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n        \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"app.css\"/\u003e\n        \u003ctitle\u003eClient Side Demo\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody style='margin: 0; padding: 0; width: 100%; height: 100%;'\u003e\n        \u003cscript type=\"module\"\u003e\n            import init, {App} from '/client_side_web_app.js'\n        \n            async function run ()  {\n                await init('/client_side_web_app_bg.wasm')\n                new App()\n            }\n        \n            run()\n        \u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n---\n\n```css\n/* contents of app.css */\n.big {\n  font-size: 30px;\n}\n.blue {\n  color: blue;\n}\n.giant-button {\n  font-size: 24px;\n  font-weight: bold;\n}\n```\n\n---\n\nNow run\n\n```sh\n# Used to compile your Rust code to WebAssembly\ncargo install wasm-bindgen-cli\n\n# Or any other static file server that supports the application/wasm mime type\ncargo install https\n\nchmod +x ./build.sh\n./build.sh\n\n# Visit localhost:8080 in your browser\nhttp ./public --port 8080\n```\n\nAnd you should see the following:\n\n![Client side example](./example.png)\n\nNice work!\n\n## More Examples\n\n- [Isomorphic web app](examples/isomorphic)\n\n- [Unit Testing View Components](examples/unit-testing-components)\n\n- [Open an Issue or PR if you have an idea for a useful example!](https://github.com/chinedufn/percy/issues)\n\n## API Documentation\n\n- [percy-dom API docs](https://chinedufn.github.io/percy/api/percy_dom/macro.html.html)\n\n- [html-macro API docs](https://chinedufn.github.io/percy/api/html_macro)\n\n- [percy-router API docs](https://chinedufn.github.io/percy/api/percy_router)\n\n## Contributing\n\nAlways feel very free to open issues and PRs with any questions / thoughts that you have!\n\nEven if it feels basic or simple - if there's a question on your mind that you can't quickly answer yourself then that's a failure\nin the documentation.\n\nMuch more information on how to contribute to the codebase can be found in the [contributing section](https://chinedufn.github.io/percy/contributing/getting-started.html) of The Percy Book!\n\n## To Test\n\nTo run all of the unit, integration and browser tests, [grab the dependencies then](https://chinedufn.github.io/percy/contributing/getting-started.html) :\n\n```sh\n./test.sh\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinedufn%2Fpercy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinedufn%2Fpercy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinedufn%2Fpercy/lists"}