{"id":16235907,"url":"https://github.com/lukethacoder/wasm-web-components-playground","last_synced_at":"2025-04-08T08:25:20.501Z","repository":{"id":219224904,"uuid":"748493858","full_name":"lukethacoder/wasm-web-components-playground","owner":"lukethacoder","description":"🦀 Building Web Components using Rust (WASM) - no JS here","archived":false,"fork":false,"pushed_at":"2024-01-27T05:44:30.000Z","size":27,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-14T05:26:06.967Z","etag":null,"topics":["rust","wasm","web-components"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukethacoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-01-26T04:56:26.000Z","updated_at":"2024-06-03T13:20:32.000Z","dependencies_parsed_at":"2025-02-14T05:35:42.449Z","dependency_job_id":null,"html_url":"https://github.com/lukethacoder/wasm-web-components-playground","commit_stats":null,"previous_names":["lukethacoder/wasm-web-components-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fwasm-web-components-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fwasm-web-components-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fwasm-web-components-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fwasm-web-components-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukethacoder","download_url":"https://codeload.github.com/lukethacoder/wasm-web-components-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247802681,"owners_count":20998634,"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":["rust","wasm","web-components"],"created_at":"2024-10-10T13:28:04.447Z","updated_at":"2025-04-08T08:25:20.473Z","avatar_url":"https://github.com/lukethacoder.png","language":"Rust","readme":"\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/lukethacoder/word-repo\"\u003e\n    \u003cimg src=\"https://images.unsplash.com/photo-1550586554-a5a846e56593?q=80\u0026w=2352\u0026auto=format\u0026fit=crop\u0026ixlib=rb-4.0.3\u0026ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\" alt=\"photograph of 3 random crabs in a nice bowl\" width=\"280\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003ewasm-web-components\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n    playing around with building Web Components in Rust (via WASM)\n  \u003c/p\u003e\n\u003c/div\u003e\n\n## Installation\n\nMake sure you have [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) installed.\n\nInstall Dependencies\n\n```\ncargo build\n```\n\n## Adding New Components\n\nWe are using Workspaces, so you can add a new component by running:\n\n```\ncargo new components/NAME_OF_COMPONENT --lib\n```\n\nMake sure to add this snippet to the `Cargo.toml` file for each new component setup.\n\n```toml\n[lib]\ncrate-type = [\"cdylib\", \"rlib\"]\n\n[dependencies]\ncustom-elements = { workspace = true }\nwasm-bindgen.workspace = true\nweb-sys = { version = \"0.3\", features = [\n  \"Window\",\n  \"Document\",\n  \"HtmlElement\",\n  \"Node\",\n  \"Text\"\n]}\n```\n\n## Build\n\nTo build your web components (before running the dev server), run:\n\n\u003e NOTE: each component has its own build command. It might be smart to write a script that builds all of the components in one go?\n\n```\nwasm-pack build --target=web --out-dir '../../pkg/NAME_OF_COMPONENT' components/NAME_OF_COMPONENT\n```\n\n## Development Server\n\nInstall [microserver](https://crates.io/crates/microserver) and then run it from the root of the project.\n\n```\nmicroserver -a 127.0.0.1 -p 3000\n```\n\nThis will serve up the `index.html` file at [localhost:3000](http://localhost:3000)\n\n\u003e NOTE: you can use any other tool to serve up the `index.html` file locally","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukethacoder%2Fwasm-web-components-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukethacoder%2Fwasm-web-components-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukethacoder%2Fwasm-web-components-playground/lists"}