{"id":15667679,"url":"https://github.com/calmm-js/baret","last_synced_at":"2025-06-12T11:39:53.785Z","repository":{"id":58240008,"uuid":"84190130","full_name":"calmm-js/baret","owner":"calmm-js","description":"Baret is a library that allows you to embed Bacon.js observables into React VDOM","archived":false,"fork":false,"pushed_at":"2018-04-04T14:03:01.000Z","size":138,"stargazers_count":13,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-06T19:55:53.437Z","etag":null,"topics":["bacon","jsx","observables","react","reactive","vdom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/calmm-js.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}},"created_at":"2017-03-07T11:12:30.000Z","updated_at":"2024-12-30T16:38:21.000Z","dependencies_parsed_at":"2022-08-31T00:40:26.186Z","dependency_job_id":null,"html_url":"https://github.com/calmm-js/baret","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/calmm-js/baret","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calmm-js%2Fbaret","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calmm-js%2Fbaret/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calmm-js%2Fbaret/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calmm-js%2Fbaret/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calmm-js","download_url":"https://codeload.github.com/calmm-js/baret/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calmm-js%2Fbaret/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259456757,"owners_count":22860603,"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":["bacon","jsx","observables","react","reactive","vdom"],"created_at":"2024-10-03T14:04:50.930Z","updated_at":"2025-06-12T11:39:53.748Z","avatar_url":"https://github.com/calmm-js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[ [≡](#contents) | [Tutorial](#tutorial) | [Reference](#reference) ]\n\n# Baret\n\nBaret is a library that allows you to\nembed [Bacon.js](https://baconjs.github.io/) observables\ninto [React](https://facebook.github.io/react/) Virtual DOM.  Embedding\nobservables into VDOM has the following benefits:\n* It allows you to use\n  only\n  [functional components](https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components),\n  because you can then use observables for managing state\n  and [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) for\n  component lifetime, leading to more **_concise code_**.\n* It helps you to use React in an **_algorithmically efficient_** way:\n  * The body of a functional component is evaluated only once each time the\n    component is mounted.\n    * This also helps you to avoid issues such as\n      the\n      [gotcha with ref](https://facebook.github.io/react/docs/refs-and-the-dom.html#caveats).\n  * Only elements that contain embedded observables are rerendered when changes\n    are pushed through observables.  An update to a deeply nested VDOM element\n    can be an O(1) operation.\n\nUsing Baret couldn't be simpler.  You just `import React from \"baret\"` and you\nare good to go.\n\n[![npm version](https://badge.fury.io/js/baret.svg)](http://badge.fury.io/js/baret)\n[![Gitter](https://img.shields.io/gitter/room/calmm-js/chat.js.svg)](https://gitter.im/calmm-js/chat)\n[![Build Status](https://travis-ci.org/calmm-js/baret.svg?branch=master)](https://travis-ci.org/calmm-js/baret)\n[![Code Coverage](https://img.shields.io/codecov/c/github/calmm-js/baret/master.svg)](https://codecov.io/github/calmm-js/baret?branch=master)\n[![](https://david-dm.org/calmm-js/baret.svg)](https://david-dm.org/calmm-js/baret)\n[![](https://david-dm.org/calmm-js/baret/dev-status.svg)](https://david-dm.org/calmm-js/baret?type=dev)\n\n## Contents\n\n* [Tutorial](#tutorial)\n* [Reference](#reference)\n  * [`baret-lift` attribute](#baret-lift)\n  * [`fromBacon(observableVDOM)`](#fromBacon \"fromBacon: Observable VDOM -\u003e VDOM\")\n  * [`fromClass(Component)`](#fromClass \"fromClass: Component props -\u003e Component (Observable props)\")\n    * [`$$ref` attribute](#ref)\n\n## Tutorial\n\nTo use Baret, you simply import it as `React`:\n\n```jsx\nimport React from \"baret\"\n```\n\nand you can then write React components:\n\n```jsx\nconst oncePerSecond = Bacon.interval(1000).toProperty()\n\nconst Clock = () =\u003e\n  \u003cdiv\u003e\n    The time is {oncePerSecond.map(() =\u003e new Date().toString())}.\n  \u003c/div\u003e\n```\n\nwith VDOM that can have embedded [Bacon.js](https://baconjs.github.io/)\nobservables.\n\n**NOTE:** The result, like the `Clock` above, is *just* a React component.  If\nyou export it, you can use it just like any other React component and even in\nmodules that do not import `baret`.\n\n## Reference\n\n### \u003ca name=\"baret-lift\"\u003e\u003c/a\u003e [≡](#contents) [`baret-lift` attribute](#baret-lift)\n\nBaret only lifts built-in HTML elements implicitly.  The `baret-lift` attribute\non a non-primitive element instructs Baret to lift the element.\n\nFor example, you could write:\n\n```jsx\nimport * as RR from \"react-router\"\nimport React   from \"baret\"\n\nconst Link1 = ({...props}) =\u003e \u003cRR.Link baret-lift {...props}/\u003e\n```\n\nto be able to use `Link1` with\nembedded [Bacon.js](https://baconjs.github.io/) observables:\n\n```jsx\n\u003cLink1 href=\"https://www.youtube.com/watch?v=Rbm6GXllBiw\"\n       ref={elem =\u003e elem \u0026\u0026 elem.focus()}\u003e\n  {Bacon.sequentially(1000, [3, 2, 1, \"Boom!\"])}\n\u003c/Link1\u003e\n```\n\nNote that the `ref` attribute is only there as an example to contrast\nwith [`$$ref`](#ref).\n\n### \u003ca name=\"fromBacon\"\u003e\u003c/a\u003e [≡](#contents) [`fromBacon(observableVDOM)`](#fromBacon \"fromBacon: Observable VDOM -\u003e VDOM\")\n\n`fromBacon` allows one to convert a Bacon observable of React elements into a\nReact element.  It is useful in case the top-most element of a component depends\non a Bacon observable.\n\nFor example:\n\n```jsx\nimport {fromBacon} from \"baret\"\nimport {ifte} from \"baret.util\"\n\nconst Chosen = ({choice}) =\u003e\n  fromBacon(ifte(choice, \u003cTrue/\u003e, \u003cFalse/\u003e))\n```\n\nHere `ifte` from `baret-util` returns an observable that is `\u003cTrue/\u003e` when\n`choice` is true and otherwise `\u003cFalse/\u003e`.\n\nNote that the point of using `fromBacon` in the above example is that we don't\nwant to wrap the `ifte(...)` inside an additional element like this:\n\n```jsx\nconst Chosen = ({choice}) =\u003e\n  \u003cdiv\u003e\n    {ifte(choice, \u003cTrue/\u003e, \u003cFalse/\u003e)}\n  \u003c/div\u003e\n```\n\n### \u003ca name=\"fromClass\"\u003e\u003c/a\u003e [≡](#contents) [`fromClass(Component)`](#fromClass \"fromClass: Component props -\u003e Component (Observable props)\")\n\n`fromClass` allows one to lift a React component.\n\nFor example:\n\n```jsx\nimport * as RR from \"react-router\"\nimport {fromClass} from \"baret\"\n\nconst Link2 = fromClass(RR.Link)\n```\n\n**WARNING:** A difficulty with lifting components is that you will then need to\nuse the [`$$ref`](#ref) attribute, which is not necessary when\nusing [`baret-lift`](#baret-lift) to lift an element.\n\n#### \u003ca name=\"ref\"\u003e\u003c/a\u003e [≡](#contents) [`$$ref` attribute](#ref)\n\nThe `$$ref` attribute on an element whose component is lifted using `fromClass`\n\n```jsx\n\u003cLink2 href=\"https://www.youtube.com/watch?v=Rbm6GXllBiw\"\n       $$ref={elem =\u003e elem \u0026\u0026 elem.focus()}\u003e\n  {Bacon.sequentially(1000, [3, 2, 1, \"Boom!\"])}\n\u003c/Link2\u003e\n```\n\ndoes the same thing as the ordinary\nJSX\n[`ref` attribute](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute):\nJSX/React treats `ref` as a special case and it is not passed to components, so\na special name had to be introduced for it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalmm-js%2Fbaret","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalmm-js%2Fbaret","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalmm-js%2Fbaret/lists"}