{"id":37022987,"url":"https://github.com/nguyenyou/ui5-webcomponents-laminar","last_synced_at":"2026-01-14T02:45:18.688Z","repository":{"id":292764051,"uuid":"978159839","full_name":"nguyenyou/ui5-webcomponents-laminar","owner":"nguyenyou","description":"Laminar wrappers for UI5 Web Components","archived":false,"fork":false,"pushed_at":"2025-09-17T16:27:33.000Z","size":10566,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-17T18:52:01.515Z","etag":null,"topics":["laminar","scala-js","scala3","scalajs","ui","ui5-webcomponents"],"latest_commit_sha":null,"homepage":"https://ui5-webcomponents-laminar.vercel.app/","language":"Scala","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nguyenyou.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-05T15:00:39.000Z","updated_at":"2025-09-17T16:27:37.000Z","dependencies_parsed_at":"2025-09-06T10:21:00.967Z","dependency_job_id":null,"html_url":"https://github.com/nguyenyou/ui5-webcomponents-laminar","commit_stats":null,"previous_names":["nguyenyou/ui5-webcomponents-laminar"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/nguyenyou/ui5-webcomponents-laminar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nguyenyou%2Fui5-webcomponents-laminar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nguyenyou%2Fui5-webcomponents-laminar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nguyenyou%2Fui5-webcomponents-laminar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nguyenyou%2Fui5-webcomponents-laminar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nguyenyou","download_url":"https://codeload.github.com/nguyenyou/ui5-webcomponents-laminar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nguyenyou%2Fui5-webcomponents-laminar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28408735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T01:52:23.358Z","status":"online","status_checked_at":"2026-01-14T02:00:06.678Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["laminar","scala-js","scala3","scalajs","ui","ui5-webcomponents"],"created_at":"2026-01-14T02:45:18.074Z","updated_at":"2026-01-14T02:45:18.667Z","avatar_url":"https://github.com/nguyenyou.png","language":"Scala","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Scala3](https://img.shields.io/badge/Scala%203-%23de3423.svg?logo=scala\u0026logoColor=white)\n![Maven Central Version](https://img.shields.io/maven-central/v/io.github.nguyenyou/ui5-webcomponents-laminar_sjs1_3)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/nguyenyou/ui5-webcomponents-laminar/main/.github/assets/banner.png\" alt=\"Laminar wrappers for UI5 Web Components\"\u003e\n\u003c/p\u003e\n\n# Laminar wrappers for UI5 Web Components\n\nThis library provides Laminar wrappers for UI5 Web Components, making it easy to use SAP's UI components in your Scala.js projects.\n\n## Design Philosophy\n\n### 1. Natural Translation Between HTML and Scala\n\nOur wrappers mirror the structure of UI5 Web Components, allowing for intuitive translation between HTML examples and Scala code:\n\n```html\n\u003cui5-button design=\"Emphasized\"\u003e\n    Emphasized\n\u003c/ui5-button\u003e\n```\n\nBecomes:\n\n```scala\nButton(\n  _.design := \"Emphasized\"\n)(\n  \"Emphasized\"\n)\n```\n\nWe maintain a clear separation between component properties and children.\n\nFor more examples, visit our [conversion playground](https://ui5webcomponents-to-laminar.vercel.app/) (fun fact: this site is 100% vibe coded) This tool helps you quickly translate UI5 Web Components examples into Laminar wrappers.\n\nAn additional benefit of separating properties from children is significantly improved IDE support. This approach avoids a known Scala compiler limitation ([SCL-21713](https://youtrack.jetbrains.com/issue/SCL-21713/Method-accepting-a-union-of-types-that-includes-a-Function-type-problems-with-go-to-definition-type-hints-and-autocomplete-Scala)) that otherwise breaks code completion, type hints, and go-to-definition functionality when methods accept unions of types including function types.\n\n### 2. Leveraging Scala 3 Union Types\n\nInstead of traditional enums:\n\n```scala\nenum ButtonDesign {\n  case Default, Positive, Negative, Transparent, Emphasized, Attention\n}\n\nButton(\n  _.design := ButtonDesign.Emphasized\n)(\n  \"Emphasized\"\n)\n```\n\nWe use Scala 3's Union Types feature for a cleaner API:\n\n```scala\ntype ButtonDesign = \"Default\" | \"Positive\" | \"Negative\" | \"Transparent\" | \"Emphasized\" | \"Attention\"\n\nButton(\n  _.design := \"Emphasized\"\n)(\n  \"Emphasized\"\n)\n```\n\nThis approach offers excellent IDE support in both IntelliJ and Metals while reducing imports and maintaining type safety. It also aligns perfectly with our goal of seamless translation from HTML.\n\n### 3. Auto-Generated Wrappers\n\n#### Generated from Component Elements Manifest (CEM)\n\nUI5 Web Components evolve rapidly with frequent feature additions and changes. To keep pace, our wrappers are automatically generated from the same Component Elements Manifest (CEM) used by the official [ui5-webcomponents-react](https://github.com/SAP/ui5-webcomponents-react) library.\n\nThis approach ensures long-term maintainability and compatibility with the underlying UI5 components.\n\n#### Leveraging ScalablyTyped for Facades Generation\n\nWe use ScalablyTyped to generate type-safe facades for the UI5 Web Components. This provides two key benefits:\n\n1. **Type-Safe DOM References**  \n   Access the underlying UI5 web component with complete type safety via the `ref` attribute. All component properties and methods are fully typed:\n\n   ```scala\n   val button = Button()(\"Click me\")\n   button.ref.accessibilityAttributes.setExpanded(true)\n   ```\n\n2. **Type-Safe Custom Events**  \n   UI5 components emit custom events with detailed payloads. Our wrappers provide type-safe access to these event details:\n\n   ```scala\n   Select(\n     _.onChange.map(_.detail.selectedOption.id) --\u003e selectedOptionVar.writer\n   )()\n   ```\n\nThis approach eliminates the need to manually define types for complex TypeScript interfaces while ensuring your code remains type-safe.\n\n### 4. Standing on the Shoulders of Giants\n\nThis project builds upon the excellent work of existing Laminar wrapper libraries:\n\n- [LaminarSAPUI5Bindings](https://github.com/sherpal/LaminarSAPUI5Bindings)\n- [laminar-shoelace-components](https://github.com/raquo/laminar-shoelace-components)\n\nTheir innovative approaches and well-designed patterns have greatly influenced this project. We're deeply grateful for their contributions to the Scala.js ecosystem.\n\n## Quickstart\n\nFollowing these simple steps for a quickstart.\n\n```sh\nnpx degit nguyenyou/ui5-webcomponents-laminar/examples/quickstart ui5-webcomponents-laminar-quickstart\ncd ui5-webcomponents-laminar-quickstart\nnpm install\nnpm run dev\n```\n\n## Setup manually\n\nThere are two pieces needed in order to use this library.\n\n1. This library: `io.github.nguyenyou::ui5-webcomponents-laminar::2.10.0` (latest version at the moment of writing).\n\n```scala\ndef ivyDeps = Agg(\n  ivy\"io.github.nguyenyou::ui5-webcomponents-laminar::2.10.0\",\n)\n```\n\nThe dependency format might be different depending on your build tool. I use [Mill Build Tool](https://github.com/com-lihaoyi/mill) at the moment. For other build tools, you can take a look at my [scalawind examples](https://github.com/nguyenyou/scalawind/tree/main/examples) for preferences on how to define the dependency.\n\n2. The actual UI5 webcomponents library because the scala library is just providing the \"facades\" (bindings/wrappers), or you can think of it like a bridge for our ScalaJS project to connect with the UI5 Web Components library.\n\n```sh\nnpm install @ui5/webcomponents\n```\n\nThat is the minimal setup. You can install all their libraries if you want, we have support for all of them:\n\n```sh\nnpm install @ui5/webcomponents @ui5/webcomponents-fiori @ui5/webcomponents-ai @ui5/webcomponents-compat\n```\n\n## Community \u0026 Contributions\n\nI'd love to hear from you! If you're using this library, have questions, or want to contribute:\n\n- **Issues \u0026 Suggestions**: Please feel free to [open an issue](https://github.com/nguyenyou/ui5-webcomponents-laminar/issues) for bugs, feature requests, or questions.\n- **Contributions**: PRs are warmly welcomed! Even small documentation improvements make a big difference.\n- **Feedback**: I'm still learning and growing with this project, so your feedback and experiences are invaluable.\n\nThis project is meant to serve the community, and I'm eager to learn from your insights and experiences.\n\n## Development\n\n### Website\n\n```sh\ncorepack enable\nyarn insall\nyarn dev\n```\n\nOpen: http://localhost:5173\n## Credits\n\nThis project wouldn't be possible without the brilliant work and generous sharing of knowledge from many wonderful people:\n\n- **[Antoine Doeraene (sherpal)](https://github.com/sherpal)** - For creating [LaminarSAPUI5Bindings](https://github.com/sherpal/LaminarSAPUI5Bindings), which provided the foundation and inspiration for this project.\n\n- **[Nikita Gazarov (raquo)](https://github.com/raquo)** - For developing [laminar-shoelace-components](https://github.com/raquo/laminar-shoelace-components) and pioneering the concept of generating bindings from CEM.\n\n- **The UI5 Team at SAP** - For their amazing [ui5-webcomponents-react](https://github.com/SAP/ui5-webcomponents-react) project and the CEM parser that powers the wrapper generation.\n\nI'm truly standing on the shoulders of giants, and I'm deeply grateful for all their contributions.\n\n## What's Next\n\nThis project was initially created in just a week, and I'm still learning and discovering new approaches every day. Each day brings new insights, unlocks new use cases, and yes, reveals new bugs! I will improve this project over time, so stay tuned.\n\n## Useful Resources\n\n- https://www.sap.com/design-system/fiori-design-web\n- https://experience.sap.com/fiori-design-web/web-components-overview/\n- https://sap.github.io/ui5-webcomponents/\n- https://sap.github.io/ui5-webcomponents-react\n- https://www.sap.com/design-system/fiori-design-web/foundations/visual/design-tokens\n- https://www.sap.com/design-system/fiori-design-web/foundations/visual/colors/morning-horizon\n\n## License\n\nui5-webcomponents-laminar is MIT licensed.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnguyenyou%2Fui5-webcomponents-laminar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnguyenyou%2Fui5-webcomponents-laminar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnguyenyou%2Fui5-webcomponents-laminar/lists"}