{"id":15069992,"url":"https://github.com/nafg/scalajs-facades","last_synced_at":"2025-04-10T17:11:10.926Z","repository":{"id":37887867,"uuid":"111059805","full_name":"nafg/scalajs-facades","owner":"nafg","description":"Facades for scalajs-react","archived":false,"fork":false,"pushed_at":"2024-04-15T04:42:54.000Z","size":496,"stargazers_count":9,"open_issues_count":6,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T19:36:52.599Z","etag":null,"topics":["react-select","reactjs","scala","scalajs","scalajs-react"],"latest_commit_sha":null,"homepage":"","language":"Scala","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nafg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-11-17T04:56:30.000Z","updated_at":"2024-05-16T07:36:25.278Z","dependencies_parsed_at":"2023-02-19T05:35:13.339Z","dependency_job_id":"d876c81a-292f-4240-92a7-3a17c011e89e","html_url":"https://github.com/nafg/scalajs-facades","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fscalajs-facades","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fscalajs-facades/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fscalajs-facades/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fscalajs-facades/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nafg","download_url":"https://codeload.github.com/nafg/scalajs-facades/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248261453,"owners_count":21074222,"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":["react-select","reactjs","scala","scalajs","scalajs-react"],"created_at":"2024-09-25T01:46:17.013Z","updated_at":"2025-04-10T17:11:10.897Z","avatar_url":"https://github.com/nafg.png","language":"Scala","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/nafg/scalajs-facades.svg?branch=master)](https://travis-ci.org/nafg/scalajs-facades)\n\n# Scala.js Facades\n\nSimple Facade, a (macro-free) library for zero-boilerplate scalajs-react facades,\nplus (partial) facades for several react components built with it.\n\n## Installation\n\u003c!-- Begin autogenerated via sbt generateInstallInstructions --\u003e\n```scala\nresolvers += Resolver.jcenterRepo\n// Facade for @material-ui/core version 4.12.3\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"material-ui-core_4\" % \"0.16.0\"\n// Facade for @material-ui/lab version 4.0.0-alpha.60\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"material-ui-lab_4\" % \"0.16.0\"\n// Facade for react-autocomplete version 1.8.1\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"react-autocomplete_1\" % \"0.16.0\"\n// Facade for react-datepicker version 4.6.0\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"react-datepicker_4\" % \"0.16.0\"\n// Facade for react-input-mask version 2.0.4\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"react-input-mask_2\" % \"0.16.0\"\n// Facade for react-phone-number-input version 3.1.44\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"react-phone-number-input_3\" % \"0.16.0\"\n// Facade for react-select version 5.2.1\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"react-select_5\" % \"0.16.0\"\n// Facade for react-waypoint version 10.1.0\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"react-waypoint_10\" % \"0.16.0\"\n// Facade for react-widgets version 5.5.1\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"react-widgets_5\" % \"0.16.0\"\n// Library for react component facades that are simple to write and simple to use\nlibraryDependencies += \"io.github.nafg.scalajs-facades\" %%% \"simplefacade\" % \"0.16.0\"\n```\n\u003c!-- End autogenerated via sbt generateInstallInstructions --\u003e\n\n## Simple Facade\nA better way to define and use Scala.js facades for React components\n\nExisting approaches suffer from some issues:\n1. Require dealing with low-level javascript interop types like js.UndefOr and union types\n2. Pass all props, necessitating everything to be optional (js.UndefOr, or Option, if you solve the first issue)\n3. Reliance on macros\n4. Tedious to define or to use\n\n\n```scala\nimport io.github.nafg.simplefacade.Implicits.elementTypeWriter\nimport io.github.nafg.simplefacade.Implicits.vdomNodeWriter\nimport japgolly.scalajs.react.vdom.VdomNode\nimport scala.scalajs.js\nimport scala.scalajs.js.annotation.JSImport\nimport io.github.nafg.simplefacade.{FacadeModule, PropTypes}\n\n\nobject Badge extends FacadeModule.NodeChildren.Simple {\n  @JSImport(\"@material-ui/core/Badge\", JSImport.Default) @js.native object raw extends js.Object\n\n  override def mkProps = new Props\n\n  class Props extends PropTypes.WithChildren[VdomNode] {\n    val anchorOrigin = of[js.Object]\n    val badgeContent = of[VdomNode]\n    val className = of[String]\n    val classes = of[js.Object]\n    val color = of[String]\n    // more props\n  }\n}\n\n// in some render method\nBadge( _.badgeContent := \"1\", _.color := \"secondary\", _.dynamicProp(72))(\n  Icon(_.children :=  \"mail\")\n)\n\n```\n\n## Facade code generation using react-docgen\n\nCurrently, the Material-UI facade is generated by extracting the components and props from react-docgen.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnafg%2Fscalajs-facades","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnafg%2Fscalajs-facades","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnafg%2Fscalajs-facades/lists"}