Hello World
\nHello World from Root App!
\n\nI am App
\n );\n}\n\nconst App = createApp({\n name: 'MyApp',\n providers: [\n {\n name: 'component',\n useValue: AppComponent,\n }\n ],\n});\n```\n\nNow that we have our App defined, we can register it to our Root App:\n\n```js\nwindow.app.registerApp(App, {\n regions: ['sidebar'], // name of regions to target\n weight: 10, // the lower the number, the higher they would appear\n});\n```\n\nNow when you refresh your browser, you would notice your App being rendered inside the Region `sidebar`.\n\n## Region and data\n\nIt is possible that when defining the Region with a name, you would also want to pass some data to it, so that whenever an App gets rendered inside it, the App would be able to access that data.\n\nFrom the above example of `sidebar` Region, imagine us passing some data too via props:\n\n```js\nfunction Root() {\n const data = {\n foo: 'bar'\n };\n\n return (\nHello World from Root App!
\n\nHello World from Root App!
\n\nInterval: {props.interval}
\n );\n}\n```\n\nWe just created a component, that prints out a prop called `interval`. Nothing fancy there. But we wish the interval to update itself every second. Instead of handling it from within the Component, we can do it with `observe` as follows:\n\n```js\nimport { interval } from 'rxjs/observable/interval';\nimport { map } from 'rxjs/operators/map';\nimport { observe } from 'frint-react';\n\nconst MyObservedComponent = observe(function () {\n const interval$ = interval(1000); // emits an integer every 1 second\n\n return interval$\n .pipe(\n map(x => ({ interval: x })) // map the integer to a props-compatible object\n );\n})(MyComponent);\n```\n\nWe have just made our simple Component reactive, by wrapping it with `observe`. Now it will continue to update the `interval` prop every second until the Component has unmounted itself.\n\n### Observing Region's data\n\nIn previous example, we showed you how to access Region's data via `RegionService`. Now let's see how we can pass it to your App's component too.\n\nAll Region props but `children` and `className` are forwarded to the App's component by default. However, if you prefer a reactive approach:\n\n```js\nimport { map } from 'rxjs/operators/map';\nimport { merge } from 'rxjs/operators/merge';\nimport { scan } from 'rxjs/operators/scan';\n\nconst ObservedAppComponent = observe(function (app, props$) {\n // `app` is your App instance\n // `props$` is an Observable of props being passed by parent Component (if any)\n\n // let's keep our first interval Observable too\n const interval$ = interval(1000)\n .pipe(\n map(x => ({ interval: x }))\n );\n\n const region = app.get('region'); // the RegionService instance\n const regionData$ = region.getData$()\n .pipe(\n map(regionData => ({ regionData: regionData }))\n );\n\n // now we have two observables, `interval$` and `regionData$`.\n // we need to merge them both into a single props-compatible object:\n return interval$\n .pipe(\n merge(regionData$),\n scan((props, emitted) => {\n return {\n ...props,\n ...emitted,\n };\n }, {})\n );\n})(AppComponent);\n```\n\nWhen your App's component renders, latest props will be passed to it in this structure:\n\n```js\n{\n // will keep updating every second,\n interval: 1,\n\n // will update whenever sidebar Region's props change\n regionData: {\n foo: 'bar'\n }\n}\n```\n\n### Helper function for streaming props\n\nAs the number of observables grow, it might be difficult to maintain your `observe` implementation. That's why we are also shipping a `streamProps` function in the library to make it easier for you:\n\n```js\nimport { interval } from 'rxjs/observable/interval';\nimport { streamProps } from 'frint-react';\n\nconst MyObservedComponent = observe(function (app) {\n return streamProps({}) // start streaming with a default plain object\n // interval\n .set(\n interval(1000),\n x => ({ interval: x }),\n )\n\n // region data\n .set(\n app.get('region').getData$(),\n regionData => ({ regionData })\n )\n\n // plain object\n .set({\n key: 'value'\n })\n\n // key/value pairs\n .set('myKey', 'myValue')\n\n // return everything as a single merged Observable\n .get$();\n})(AppComponent);\n```\n\nThe props available inside your Component would then be in this format:\n\n```js\n{\n interval: 1,\n regionData: { foo: 'bar' },\n key: 'value',\n myKey: 'myValue'\n}\n```\n\n## Multi-instance Apps\n\nThis is a use case where you have multiple instances of Region with the same name mounted in the DOM. And the apps rendered in them should have their own independent scoped instances too.\n\nThink of a scenario where you have a TodoList, and you want a Region defined for each Todo item:\n\n```js\nfunction MyComponent() {\n const todos = [\n { id: '1', title: 'First todo' },\n { id: '2', title: 'Second todo' },\n { id: '3', title: 'Third todo' },\n ];\n\n return (\nTodo in upper case: {todo.title.toUpperCase()}
\n );\n}\n\nconst ObservedAppComponent = observe(function (app) {\n return streamProps()\n .set(\n app.get('region').getData$(),\n data => ({ todo: data.todo })\n )\n .get$();\n})(AppComponent);\n\nconst App = createApp({\n name: 'MyApp',\n providers: [\n {\n name: 'component',\n useValue: ObservedAppComponent\n },\n {\n name: 'region',\n useClass: RegionService\n }\n ]\n});\n```\n\nNow comes the part of registering our App as a multi-instance app:\n\n```js\nwindow.app.registerApp(App, {\n regions: ['todo-item'],\n\n // this tells Root App to treat this app as a multi-instance one\n multi: true,\n});\n```\n\n---\n\n# API\n\n## render\n\n> render(app, node)\n\nRenders a Root App in target DOM node.\n\n### Arguments\n\n1. `app` (`App`): The Root App instance.\n1. `node` (`Element`): The DOM Element where you want your App to render.\n\n## hydrate\n\n> hydrate(app, node)\n\nHydrates a Root App in target DOM node.\n\n## observe\n\n> observe(fn)(MyComponent)\n\n### Arguments\n\n1. `fn` (`Function`): The function returning an Observable.\n * The `fn` accepts two arguments:\n * `app`: the instance of your Root App or the App in scope\n * `props$`: an Observable of props being passed by parent component (if any)\n * It should return an `Observable` or `Object`\n\n### Returns\n\n`Function`: that can be called with a Component to return an observed Component ready for embedding and rendering anywhere.\n\n## Region\n\n> Region\n\nThe Region component.\n\n### Props\n\n1. `name` (`String`): The name of the Region\n1. `data` (`Object`): Data to be made available to rendered App\n1. `children` (`Function` [optional]): Render prop function to render region component with passed props.\n1. `uniqueKey` (`String` [optional]): Used when there are multiple Regions of the same `name`. It prop must be unique and fixed throughout the whole app.\n1. `className` (`String` [optional]): The className used by Region wrapper element\n\n## RegionService\n\nExported from [`frint-component-handlers`](../frint-component-handlers#streamprops).\n\n## streamProps\n\nExported from [`frint-component-utils`](../frint-component-utils#streamprops).\n\n## ReactHandler\n\n> ReactHandler\n\nHandler for React, according to the spec defined in [`frint-component-utils`](../frint-component-utils).\n","maintainers":[{"email":"baudin.jean@gmail.com","name":"jbaudin"},{"email":"rmachado@travix.com","name":"rmachado-travix"},{"email":"alexmirandamoraes@gmail.com","name":"mmirandaalex"},{"email":"fahad19@gmail.com","name":"fahad19"},{"email":"mrk.vincze@gmail.com","name":"markvincze"},{"email":"viacheslaff@gmail.com","name":"viacheslaff"},{"email":"etienne.tremel@orange.fr","name":"etiennetremel"}],"time":{"modified":"2022-06-18T03:41:09.572Z","created":"2017-03-06T17:10:05.110Z","1.0.0-alpha.96e58a3f":"2017-03-06T17:10:05.110Z","1.0.0":"2017-03-16T13:35:43.863Z","1.0.1":"2017-03-21T17:27:58.418Z","1.1.0":"2017-03-28T08:02:59.921Z","1.2.0":"2017-04-05T09:29:57.561Z","1.2.1":"2017-04-13T12:19:14.562Z","1.3.0":"2017-05-01T13:47:56.407Z","1.3.1":"2017-05-10T15:40:03.920Z","1.4.0":"2017-05-29T08:50:36.764Z","1.4.2":"2017-06-19T12:11:40.059Z","2.0.0":"2017-06-19T12:47:51.274Z","2.0.1":"2017-06-19T12:54:55.375Z","2.1.0":"2017-07-26T14:57:18.539Z","2.1.0-alpha.851cd0a6":"2017-07-28T14:16:52.084Z","2.2.0":"2017-08-01T08:38:31.321Z","2.2.1":"2017-08-21T08:43:22.005Z","2.3.0":"2017-08-23T14:22:29.495Z","2.3.0-alpha.f9a1b324":"2017-08-28T15:26:56.839Z","2.3.1":"2017-08-30T08:11:20.776Z","2.4.0":"2017-08-30T15:07:32.418Z","2.4.1":"2017-09-06T13:32:51.186Z","2.5.0":"2017-09-12T11:58:37.646Z","2.6.0":"2017-09-19T10:53:08.232Z","2.7.0":"2017-09-22T14:44:15.952Z","2.8.0":"2017-09-25T12:21:57.518Z","2.8.1":"2017-09-26T08:27:25.083Z","2.9.0-alpha.2d26e4d7":"2017-09-26T16:04:13.075Z","3.0.0":"2017-09-28T12:38:07.658Z","3.0.1":"2017-09-28T15:28:32.274Z","3.1.0":"2017-10-04T15:30:10.257Z","3.1.1":"2017-10-06T11:37:31.989Z","3.2.0":"2017-10-16T07:58:41.791Z","3.2.1":"2017-10-17T08:25:48.505Z","3.3.0":"2017-10-19T12:07:20.750Z","3.3.1":"2017-10-19T20:36:32.561Z","4.0.0":"2017-10-24T13:39:31.028Z","4.1.0":"2017-11-03T16:53:34.253Z","4.2.0":"2017-11-06T15:39:14.444Z","5.0.0":"2017-11-17T17:14:02.816Z","5.0.1":"2017-11-23T13:08:52.563Z","5.1.0":"2017-11-27T13:49:08.811Z","5.1.1":"2017-12-08T15:32:31.287Z","5.2.0":"2017-12-29T22:39:17.282Z","5.2.1":"2018-01-03T10:29:57.419Z","5.3.0":"2018-01-16T14:50:16.839Z","5.4.0":"2018-02-14T14:35:43.761Z","5.4.1":"2018-02-21T09:59:49.800Z","5.4.2":"2018-03-26T09:24:46.838Z","5.4.3":"2018-04-06T12:52:58.118Z","5.4.4":"2018-05-30T14:30:09.576Z","5.4.5":"2018-06-25T17:54:19.753Z","5.5.0":"2018-07-10T15:42:38.762Z","5.6.0":"2018-07-13T09:41:36.374Z","5.6.1":"2018-07-16T12:36:52.595Z","5.7.0":"2018-08-06T13:32:20.015Z","5.7.1":"2018-09-05T14:11:52.439Z","5.7.2":"2018-09-11T14:02:35.074Z"},"homepage":"https://github.com/frintjs/frint/tree/master/packages/frint-react","keywords":["frint"],"repository":{"type":"git","url":"git+https://github.com/frintjs/frint.git"},"author":{"name":"FrintJS Authors","url":"https://github.com/frintjs/frint/graphs/contributors"},"bugs":{"url":"https://github.com/frintjs/frint/issues"},"license":"MIT","readmeFilename":"README.md"}