{"id":18930049,"url":"https://github.com/labd/react-abode","last_synced_at":"2025-04-15T07:07:08.996Z","repository":{"id":42977005,"uuid":"285579148","full_name":"labd/react-abode","owner":"labd","description":"React micro-frontend framework allowing you to host multiple React components from HTML.","archived":false,"fork":false,"pushed_at":"2024-08-07T14:18:40.000Z","size":363,"stargazers_count":16,"open_issues_count":5,"forks_count":4,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-15T07:07:00.748Z","etag":null,"topics":["micro-frontends","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/labd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-08-06T13:29:52.000Z","updated_at":"2024-12-09T16:03:44.000Z","dependencies_parsed_at":"2024-08-07T14:11:13.109Z","dependency_job_id":"e2fae625-dcfc-42ce-9920-3f833d6734fe","html_url":"https://github.com/labd/react-abode","commit_stats":{"total_commits":56,"total_committers":6,"mean_commits":9.333333333333334,"dds":0.5357142857142857,"last_synced_commit":"159184f5027659ccb0ec7157eac6b48e87a6fc76"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labd%2Freact-abode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labd%2Freact-abode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labd%2Freact-abode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/labd%2Freact-abode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/labd","download_url":"https://codeload.github.com/labd/react-abode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023700,"owners_count":21199958,"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":["micro-frontends","react"],"created_at":"2024-11-08T11:36:21.899Z","updated_at":"2025-04-15T07:07:08.965Z","avatar_url":"https://github.com/labd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Abode\n\nReact Abode is a simple React micro-frontend framework allowing you to host multiple react components by defining HTML.\n\n## Features\n\n### Prop passing\n\nReact Abode allows you to pass props to your React components by using a `data-prop-prop-name` attribute. All props need to be prefixed by `data-prop-`. Props will automatically be converted from kebab-case to camelCase.\n\n```html\n\u003cdiv data-component=\"Price\" data-prop-sku=\"123456\"\u003e\u003c/div\u003e\n```\n\n### Script props\n\nReact Abode allows you to pass `data-prop-` props to the script. These can then be consumed inside your bundle by using `getScriptProps()`. This is useful when you need to have a prop available in every component.\n\n```html\n\u003cscript\n  src=\"your/bundle/location.js\"\n  data-prop-global-prop=\"some prop you want in all your components\"\n\u003e\u003c/script\u003e\n```\n\n```javascript\nconst scriptProps = getScriptProps();\nconsole.log(scriptProps.globalProp);\n```\n\n### Prop parsing\n\nBy default all supplied props will be parsed with `JSON.parse`. In case a prop should be parsed differently, custom parse functions can be provided to `register` or `getScriptProps`.\n\n```js\n// \u003cdiv data-component=\"Product\" data-prop-sku=\"1234\" data-prop-is-available=\"true\" data-prop-price=\"10.99\" \u003e\nregister('Product', () =\u003e import('./modules/Product/Product'), {\n  propParsers: {\n    sku: prop =\u003e String(prop),\n    isAvailable: prop =\u003e Boolean(prop),\n    price: prop =\u003e Float(prop),\n  },\n});\n// \u003cscript data-prop-global=\"1234\"\u003e\u003c/script\u003e\ngetScriptProps({ propParsers: { global: prop =\u003e String(prop) } });\n```\n\n- default JSON.parse\n- custom prop parsing function\n\n### Automatic DOM node detection\n\nWhen DOM nodes are added, for example when loading more products in a catalog on a SPA, React Abode will automatically detect them and populate them with your React components.\nWhen a DOM node containing a hosted React component is removed, the component is unmounted.\n\n### Update on prop change\n\nWhen the props for your components change, React Abode will rerender these components. This can be very useful when nesting multiple layers of front-end frameworks.\n\n## How to use\n\nCreate a bundle with one or more abode registered components. This takes the place of the `App` component in a create-react-app, which links the top level react component to the html page. When all components are registered, call `populate`. Build and host this bundle on your platform of choice.\n\n```javascript\n// src/modules/Cart/Cart.tsx\nconst Cart = (): JSX.Element =\u003e {\n  return \u003ch1\u003ea shopping cart\u003c/div\u003e;\n};\n\n// src/App.tsx\nimport { populate, register } from 'react-abode';\n\n// Import can be used to register component\nregister('Cart', () =\u003e import('./modules/Cart/Cart'));\n\n// Component can also be used directly\nimport Cart from './modules/Cart/Cart';\n\nregister('Cart', () =\u003e React.memo(Cart));\n\npopulate({ attributes: { classname: 'some-class-name' } });\n```\n\nInclude a div with the selector in your HTML. Load the bundle in a script tag **inside the `\u003cbody\u003e \u003c/body\u003e`**. On loading the page, React Abode will check for components with the matching selector, which is `data-component` by default.\n\n```html\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cdiv data-component=\"Cart\"\u003e\n      This text wil be replaced by your react component\n    \u003c/div\u003e\n    \u003cscript src=\"your/bundle/location.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Options\n\n### Utility functions\n\n#### setComponentSelector\n\nIf you do not want to use `data-component` you can change the component selector by using `setComponentSelector('data-my-component-selector')`.\n\n#### getActiveComponents\n\nYou can use `getActiveComponents` to get a list of all Abode elements currently in your DOM.\n\n#### getRegisteredComponents\n\nYou can use `getRegisteredComponents` to get all registered components.\n\n### Populate parameters\n\nThe `populate` function can be passed an object with options.\n\n| name       | type     | purpose                                                                                     | example                                                 |\n| ---------- | -------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------- |\n| attributes | object   | attributes which will be aplied to every react-abode container                              | `{attributes: { classname: \"some-class-name\"}}`         |\n| callback   | function | function which will be executed every time a new batch of react-abode elements is populated | `() =\u003e console.log('new abode elements added to page')` |\n\n## Contributing\n\nAfter having commited your changes, run `pnpm changeset` and specify an appropriate bump type and a message. If you want to use your commit message(s) as the changeset message, run `pnpm get:changes` which copies all commit message(s) to your clipboard which you can then paste when running `pnpm changeset`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flabd%2Freact-abode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flabd%2Freact-abode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flabd%2Freact-abode/lists"}