frint-react - npm Package Compare versions

Comparing version 1.0.0-alpha.96e58a3f to 1.0.0

lib/components/getMountableComponent.js

@@ -18,2 +18,3 @@ 'use strict';
 
+/* eslint-disable import/no-extraneous-dependencies */
 function getMountableComponent(app) {
@@ -20,0 +21,0 @@ var Component = app.get('component');

lib/components/observe.js

@@ -7,4 +7,5 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint-disable import/no-extraneous-dependencies */
 
+
 exports.default = observe;
@@ -11,0 +12,0 @@

lib/components/observe.spec.js

@@ -15,2 +15,4 @@ 'use strict';
 
+var _enzyme = require('enzyme');
+
 var _observe = require('./observe');
@@ -24,6 +26,2 @@
 
-var _createComponent = require('../createComponent');
-
-var _createComponent2 = _interopRequireDefault(_createComponent);
-
 var _render = require('../render');
@@ -35,3 +33,3 @@
 
-/* eslint-disable import/no-extraneous-dependencies, func-names */
+/* eslint-disable import/no-extraneous-dependencies, func-names, react/prop-types */
 /* global describe, it, document, before, after, resetDOM */
@@ -48,3 +46,4 @@ describe('frint-react › components › observe', function () {
   it('generates Component bound to observable for props, without app in context', function () {
-    var Component = (0, _createComponent2.default)({
+    var Component = _react2.default.createClass({
+      displayName: 'Component',
       render: function render() {
@@ -71,3 +70,4 @@ return _react2.default.createElement(
   it('generates Component with no additional impact, if no function is given', function () {
-    var Component = (0, _createComponent2.default)({
+    var Component = _react2.default.createClass({
+      displayName: 'Component',
       render: function render() {
@@ -90,3 +90,4 @@ return _react2.default.createElement(
   it('generates Component bound to observable for props, with app in context', function () {
-    var Component = (0, _createComponent2.default)({
+    var Component = _react2.default.createClass({
+      displayName: 'Component',
       render: function render() {
@@ -138,2 +139,61 @@ return _react2.default.createElement(
   });
+
+  it('can be tested with enzyme', function () {
+    var ChildComponent = _react2.default.createClass({
+      displayName: 'ChildComponent',
+      render: function render() {
+        return _react2.default.createElement(
+          'p',
+          null,
+          'I am a child.'
+        );
+      }
+    });
+
+    var Component = _react2.default.createClass({
+      displayName: 'Component',
+      render: function render() {
+        return _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'p',
+            { id: 'name' },
+            this.props.name
+          ),
+          _react2.default.createElement(ChildComponent, null)
+        );
+      }
+    });
+
+    var ObservedComponent = (0, _observe2.default)(function (app) {
+      return _rxjs.Observable.of(app.getOption('name')).map(function (name) {
+        return { name: name };
+      });
+    })(Component);
+
+    var fakeApp = {
+      getOption: function getOption() {
+        return 'ShallowApp';
+      }
+    };
+
+    var ComponentToRender = _react2.default.createClass({
+      displayName: 'ComponentToRender',
+      render: function render() {
+        return _react2.default.createElement(
+          _Provider2.default,
+          { app: fakeApp },
+          _react2.default.createElement(ObservedComponent, this.props)
+        );
+      }
+    });
+
+    var wrapper = (0, _enzyme.mount)(_react2.default.createElement(ComponentToRender, null));
+    (0, _chai.expect)(wrapper.find(ObservedComponent)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(ObservedComponent)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(ChildComponent)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('#name')).to.have.length(1);
+    (0, _chai.expect)(wrapper.text()).to.contain('I am a child');
+  });
 });

lib/components/Provider.js

@@ -15,4 +15,5 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable import/no-extraneous-dependencies */
 
+
 var Provider = function (_Component) {
@@ -19,0 +20,0 @@ _inherits(Provider, _Component);

lib/components/Region.js

@@ -71,2 +71,3 @@ 'use strict';
 
+    this.rootApp = rootApp;
     var widgets$ = rootApp.getWidgets$(this.props.name, this.props.uniqueKey);
@@ -82,2 +83,3 @@
             var widgetWeight = item.weight;
+            var widgetMulti = item.multi;
             var existsInState = _this.state.listForRendering.some(function (w) {
@@ -109,2 +111,3 @@ return w.name === widgetName;
                 instance: widgetInstance,
+                multi: widgetMulti,
                 Component: (0, _getMountableComponent2.default)(widgetInstance)
@@ -142,2 +145,4 @@ }).sort(function (a, b) {
   componentWillUnmount: function componentWillUnmount() {
+    var _this3 = this;
+
     if (this.subscription) {
@@ -147,3 +152,9 @@ this.subscription.unsubscribe();
 
-    // @TODO: clear instances
+    if (this.rootApp) {
+      this.state.listForRendering.filter(function (item) {
+        return item.multi;
+      }).forEach(function (item) {
+        _this3.rootApp.destroyWidget(item.name, _this3.props.name, _this3.props.uniqueKey);
+      });
+    }
   },
@@ -170,5 +181,5 @@ render: function render() {
   }
-}); /* eslint-disable no-console, no-underscore-dangle */
+}); /* eslint-disable no-console, no-underscore-dangle, import/no-extraneous-dependencies */
 /* globals window */
 
 module.exports = exports['default'];

lib/components/Region.spec.js

@@ -29,6 +29,2 @@ 'use strict';
 
-var _createComponent = require('../createComponent');
-
-var _createComponent2 = _interopRequireDefault(_createComponent);
-
 var _observe = require('./observe');
@@ -52,2 +48,4 @@
 
+/* eslint-disable import/no-extraneous-dependencies, func-names, react/prop-types */
+/* global describe, it, before, beforeEach, afterEach, window, document, resetDOM */
 describe('frint-react › components › Region', function () {
@@ -59,3 +57,4 @@ it('is a function', function () {
   it('renders empty region when no root app available', function () {
-    var MyComponent = (0, _createComponent2.default)({
+    var MyComponent = _react2.default.createClass({
+      displayName: 'MyComponent',
       render: function render() {
@@ -80,4 +79,5 @@ return _react2.default.createElement(
 
-    // core
-    var CoreComponent = (0, _createComponent2.default)({
+    // root
+    var RootComponent = _react2.default.createClass({
+      displayName: 'RootComponent',
       render: function render() {
@@ -91,9 +91,10 @@ return _react2.default.createElement(
     });
-    var Core = (0, _frint.createCore)({
-      name: 'CoreApp',
-      providers: [{ name: 'component', useValue: CoreComponent }]
+    var RootApp = (0, _frint.createApp)({
+      name: 'RootApp',
+      providers: [{ name: 'component', useValue: RootComponent }]
     });
 
     // widgets
-    var Widget1Component = (0, _createComponent2.default)({
+    var Widget1Component = _react2.default.createClass({
+      displayName: 'Widget1Component',
       render: function render() {
@@ -107,3 +108,3 @@ return _react2.default.createElement(
     });
-    var Widget1 = (0, _frint.createWidget)({
+    var Widget1 = (0, _frint.createApp)({
       name: 'Widget1',
@@ -113,3 +114,4 @@ providers: [{ name: 'component', useValue: Widget1Component }]
 
-    var Widget2Component = (0, _createComponent2.default)({
+    var Widget2Component = _react2.default.createClass({
+      displayName: 'Widget2Component',
       render: function render() {
@@ -123,3 +125,3 @@ return _react2.default.createElement(
     });
-    var Widget2 = (0, _frint.createWidget)({
+    var Widget2 = (0, _frint.createApp)({
       name: 'Widget2',
@@ -130,3 +132,3 @@ providers: [{ name: 'component', useValue: Widget2Component }]
     // render
-    window.app = new Core();
+    window.app = new RootApp();
     (0, _render2.default)(window.app, document.getElementById('root'));
@@ -151,4 +153,5 @@
   it('warns when widgets subscription emits an error', function () {
-    // core
-    var CoreComponent = (0, _createComponent2.default)({
+    // root
+    var RootComponent = _react2.default.createClass({
+      displayName: 'RootComponent',
       render: function render() {
@@ -163,9 +166,9 @@ return _react2.default.createElement(
     });
-    var Core = (0, _frint.createCore)({
-      name: 'CoreApp',
-      providers: [{ name: 'component', useValue: CoreComponent }]
+    var RootApp = (0, _frint.createApp)({
+      name: 'RootApp',
+      providers: [{ name: 'component', useValue: RootComponent }]
     });
 
     // fake an error
-    window.app = new Core();
+    window.app = new RootApp();
     var subject$ = new _rxjs.Subject();
@@ -187,8 +190,9 @@ window.app.getWidgets$ = function getWidgets$() {
   it('renders single and multi-instance widgets', function () {
-    // core
+    // root
     var todos = [{ id: '1', title: 'First todo' }, { id: '2', title: 'Second todo' }, { id: '3', title: 'Third todo' }];
-    var coreComponentInstance = void 0; // @TODO: hack
-    var CoreComponent = (0, _createComponent2.default)({
+    var rootComponentInstance = void 0; // @TODO: hack
+    var RootComponent = _react2.default.createClass({
+      displayName: 'RootComponent',
       render: function render() {
-        coreComponentInstance = this;
+        rootComponentInstance = this;
 
@@ -200,4 +204,4 @@ return _react2.default.createElement(
             'p',
-            { id: 'core-text' },
-            'Hello World from Core'
+            { id: 'root-text' },
+            'Hello World from Root'
           ),
@@ -224,9 +228,10 @@ _react2.default.createElement(_Region2.default, { name: 'sidebar' }),
     });
-    var Core = (0, _frint.createCore)({
-      name: 'CoreApp',
-      providers: [{ name: 'component', useValue: CoreComponent }]
+    var RootApp = (0, _frint.createApp)({
+      name: 'RootApp',
+      providers: [{ name: 'component', useValue: RootComponent }]
     });
 
     // widgets
-    var Widget1Component = (0, _createComponent2.default)({
+    var Widget1Component = _react2.default.createClass({
+      displayName: 'Widget1Component',
       render: function render() {
@@ -240,3 +245,3 @@ return _react2.default.createElement(
     });
-    var Widget1 = (0, _frint.createWidget)({
+    var Widget1 = (0, _frint.createApp)({
       name: 'Widget1',
@@ -249,3 +254,4 @@ providers: [{ name: 'component', useValue: Widget1Component }]
       }).get$();
-    })((0, _createComponent2.default)({
+    })(_react2.default.createClass({
+      displayName: 'Widget2Component',
       render: function render() {
@@ -260,3 +266,3 @@ return _react2.default.createElement(
     }));
-    var Widget2 = (0, _frint.createWidget)({
+    var Widget2 = (0, _frint.createApp)({
       name: 'Widget2',
@@ -267,5 +273,5 @@ providers: [{ name: 'component', useValue: Widget2Component }, { name: 'region', useClass: _Region4.default }]
     // render
-    window.app = new Core();
+    window.app = new RootApp();
     (0, _render2.default)(window.app, document.getElementById('root'));
-    (0, _chai.expect)(document.getElementById('core-text').innerHTML).to.equal('Hello World from Core');
+    (0, _chai.expect)(document.getElementById('root-text').innerHTML).to.equal('Hello World from Root');
 
@@ -295,3 +301,3 @@ // register widget
     todos[1].title = 'Second todo [updated]';
-    coreComponentInstance.forceUpdate();
+    rootComponentInstance.forceUpdate();
     elements.forEach(function (el, index) {
@@ -305,3 +311,103 @@ (0, _chai.expect)(el.innerHTML).to.contain(todos[index].title);
   });
-}); /* eslint-disable import/no-extraneous-dependencies, func-names */
-/* global describe, it, before, beforeEach, afterEach, window, document, resetDOM */
+
+  it('calls beforeDestroy when unmounting multi-instance widgets', function () {
+    // root
+    var todos = [{ id: '1', title: 'First todo' }];
+    var rootComponentInstance = void 0; // @TODO: hack
+    var RootComponent = _react2.default.createClass({
+      displayName: 'RootComponent',
+      render: function render() {
+        rootComponentInstance = this;
+
+        return _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'p',
+            { id: 'root-text' },
+            'Hello World from Root'
+          ),
+          _react2.default.createElement(_Region2.default, { name: 'sidebar' }),
+          _react2.default.createElement(
+            'ul',
+            { classNames: 'todos' },
+            todos.map(function (todo) {
+              return _react2.default.createElement(
+                'li',
+                { key: 'todo-item-' + todo.id },
+                todo.title,
+                _react2.default.createElement(_Region2.default, {
+                  data: { todo: todo },
+                  name: 'todo-item',
+                  uniqueKey: 'todo-item-' + todo.id
+                })
+              );
+            })
+          )
+        );
+      }
+    });
+    var RootApp = (0, _frint.createApp)({
+      name: 'RootApp',
+      providers: [{ name: 'component', useValue: RootComponent }]
+    });
+
+    // widget
+    var WidgetComponent = (0, _observe2.default)(function (app) {
+      return (0, _streamProps2.default)().set(app.get('region').getData$(), function (data) {
+        return { todo: data.todo };
+      }).get$();
+    })(_react2.default.createClass({
+      displayName: 'WidgetComponent',
+      render: function render() {
+        return _react2.default.createElement(
+          'p',
+          { className: 'widget-text' },
+          'Hello World from Widget - ',
+          this.props.todo.title
+        );
+      }
+    }));
+    var beforeDestroyCalled = false;
+    var Widget = (0, _frint.createApp)({
+      name: 'Widget',
+      beforeDestroy: function beforeDestroy() {
+        beforeDestroyCalled = true;
+      },
+      providers: [{ name: 'component', useValue: WidgetComponent }, { name: 'region', useClass: _Region4.default }]
+    });
+
+    // render
+    window.app = new RootApp();
+    (0, _render2.default)(window.app, document.getElementById('root'));
+    (0, _chai.expect)(document.getElementById('root-text').innerHTML).to.equal('Hello World from Root');
+
+    // register widget
+    window.app.registerWidget(Widget, {
+      regions: ['todo-item'],
+      multi: true
+    });
+
+    // verify multi instance widget
+    var elements = _lodash2.default.toArray(document.getElementsByClassName('widget-text'));
+    elements.forEach(function (el, index) {
+      (0, _chai.expect)(el.innerHTML).to.contain('Hello World from Widget - ');
+      (0, _chai.expect)(el.innerHTML).to.contain(todos[index].title);
+    });
+
+    // rootApp should have the instance
+    (0, _chai.expect)(window.app.getWidgetInstance('Widget', 'todo-item', 'todo-item-1')).to.not.equal(null);
+
+    // change in props
+    todos.pop(); // empty the list
+    rootComponentInstance.forceUpdate();
+    var updatedElements = _lodash2.default.toArray(document.getElementsByClassName('widget-text'));
+    (0, _chai.expect)(updatedElements.length).to.equal(0);
+
+    // check if beforeDestroy was called
+    (0, _chai.expect)(beforeDestroyCalled).to.equal(true);
+
+    // rootApp should not have the instance any more
+    (0, _chai.expect)(window.app.getWidgetInstance('Widget', 'todo-item', 'todo-item-1')).to.equal(null);
+  });
+});

lib/index.js

@@ -7,14 +7,2 @@ 'use strict';
 
-var _createComponent = require('./createComponent');
-
-var _createComponent2 = _interopRequireDefault(_createComponent);
-
-var _h = require('./h');
-
-var _h2 = _interopRequireDefault(_h);
-
-var _PropTypes = require('./PropTypes');
-
-var _PropTypes2 = _interopRequireDefault(_PropTypes);
-
 var _render = require('./render');
@@ -55,5 +43,2 @@
 exports.default = {
-  createComponent: _createComponent2.default,
-  h: _h2.default,
-  PropTypes: _PropTypes2.default,
   render: _render2.default,
@@ -60,0 +45,0 @@ streamProps: _streamProps2.default,

lib/render.js

@@ -26,3 +26,3 @@ 'use strict';
   return _reactDom2.default.render(_react2.default.createElement(MountableComponent, null), node);
-}
+} /* eslint-disable import/no-extraneous-dependencies */
 module.exports = exports['default'];

package.json

 {
   "name": "frint-react",
-  "version": "1.0.0-alpha.96e58a3f",
-  "description": "React plugin for Frint",
+  "version": "1.0.0",
+  "description": "React package for Frint",
   "main": "lib/index.js",
@@ -11,7 +11,7 @@ "homepage": "https://github.com/Travix-International/frint/tree/master/packages/frint-react",
     "test": "../../node_modules/.bin/mocha --colors --compilers js:babel-register --require frint-test-utils/register --recursive './src/**/*.spec.js'",
-    "cover:run": "../../node_modules/.bin/nyc --reporter=lcov --require babel-register ../../node_modules/.bin/mocha --colors --compilers js:babel-register --require frint-test-utils/register --recursive './src/**/*.spec.js'",
+    "cover:run": "../../node_modules/.bin/nyc --reporter=json --require babel-register ../../node_modules/.bin/mocha --colors --compilers js:babel-register --require frint-test-utils/register --recursive './src/**/*.spec.js'",
     "cover:report": "../../node_modules/.bin/nyc report",
     "cover": "npm run cover:run && npm run cover:report",
-    "dist:lib": "echo \"Nothing to build\"",
-    "dist:min": "echo \"Nothing to minify\"",
+    "dist:lib": "../../node_modules/.bin/webpack --config ./webpack.config.js",
+    "dist:min": "DIST_MIN=1 ../../node_modules/.bin/webpack --config ./webpack.config.js",
     "dist": "npm run dist:lib && npm run dist:min",
@@ -29,14 +29,13 @@ "prepublish": "npm run transpile"
   "keywords": [
-    "frint",
-    "frint-plugin"
+    "frint"
   ],
   "dependencies": {
     "lodash": "^4.13.1",
-    "react": "^0.14.8",
-    "react-dom": "^0.14.8",
     "rxjs": "^5.2.0"
   },
   "devDependencies": {
-    "frint": "^1.0.0-alpha.96e58a3f",
-    "frint-test-utils": "^1.0.0-alpha.96e58a3f"
+    "frint": "^1.0.0",
+    "frint-test-utils": "^1.0.0",
+    "react": "^0.14.8",
+    "react-dom": "^0.14.8"
   },
@@ -43,0 +42,0 @@ "bugs": {

README.md

@@ -1,8 +0,11 @@
-# react
+# frint-react
 
-> React plugin of Frint
+[![npm](https://img.shields.io/npm/v/frint-react.svg)](https://www.npmjs.com/package/frint-react)
 
+> React package for Frint
+
 <!-- MarkdownTOC autolink=true bracket=round -->
 
 - [Guide](#guide)
+  - [Installation](#installation)
   - [Terminologies](#terminologies)
@@ -15,5 +18,2 @@ - [Usage](#usage)
 - [API](#api)
-  - [createComponent](#createcomponent)
-  - [h](#h)
-  - [PropTypes](#proptypes)
   - [render](#render)
@@ -29,2 +29,26 @@ - [observe](#observe)
 
+## Installation
+
+With [npm](https://www.npmjs.com/):
+
+```
+$ npm install --save frint-react
+```
+
+Via [unpkg](https://unpkg.com) CDN:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
+
+<script src="https://unpkg.com/frint@latest/dist/frint.min.js"></script>
+<script src="https://unpkg.com/frint-react@latest/dist/frint-react.min.js"></script>
+
+<script>
+  // available as `window.FrintReact`
+</script>
+```
+
 ## Terminologies
@@ -52,4 +76,5 @@
 ```js
-const Frint = require('frint');
-const { h, createCore, createComponent, render } = Frint;
+import React from 'react';
+import { createApp } from 'frint';
+import { render } from 'frint-react';
 ```
@@ -60,4 +85,3 @@
 ```js
-/** @jsx h */
-const Root = createComponent({
+const Root = React.createClass({
   render() {
@@ -73,7 +97,7 @@ return (
 
-Now we need to create our Core App, and assign the previously defined Component as our root component for the App:
+Now we need to create our Root App, and assign the previously defined Component as our root component for the App:
 
 ```js
-const CoreApp = createCore({
-  name: 'MyCoreApp',
+const RootApp = createApp({
+  name: 'MyRootApp',
   providers: [
@@ -91,3 +115,3 @@ {
 ```js
-window.app = new CoreApp();
+window.app = new RootApp();
 render(window.app, document.getElementById('root'));
@@ -111,15 +135,15 @@ ```
 
-We use the concept of regions for defining areas in our Components (either in a Core App or a Widget), where other Widgets can load themselves in.
+We use the concept of regions for defining areas in our Components (either in a Root App or a Widget), where other Widgets can load themselves in.
 
-For example, imagine the Root component of our Core App above, we can define a Region named `sidebar` as follows:
+For example, imagine the Root component of our Root App above, we can define a Region named `sidebar` as follows:
 
 ```js
-/** @jsx h */
-const { Region } = Frint;
+import React from 'react';
+import { Region } from 'frint-react';
 
-const Root = createComponent({
+const Root = React.createClass({
   render() {
     return (
       <div>
-        <p>Hello World from Core App!</p>
+        <p>Hello World from Root App!</p>
 
@@ -137,6 +161,5 @@ <Region name="sidebar" />
 ```js
-/** @jsx h */
-const { createWidget } = Frint;
+import { createApp } from 'frint';
 
-const WidgetComponent = createComponent({
+const WidgetComponent = React.createClass({
   render() {
@@ -147,3 +170,3 @@ return <p>I am Widget</p>;
 
-const Widget = createWidget({
+const Widget = createApp({
   name: 'MyWidget',
@@ -159,3 +182,3 @@ providers: [
 
-Now that we have our Widget defined, we can register it to our Core App:
+Now that we have our Widget defined, we can register it to our Root App:
 
@@ -178,4 +201,3 @@ ```js
 ```js
-/** @jsx h */
-const Root = createComponent({
+const Root = React.createClass({
   render() {
@@ -188,3 +210,3 @@ const data = {
       <div>
-        <p>Hello World from Core App!</p>
+        <p>Hello World from Root App!</p>
 
@@ -205,3 +227,3 @@ <Region name="sidebar" data={data} />
 
-const Widget = createWidget({
+const Widget = createApp({
   name: 'MyWidget',
@@ -248,6 +270,3 @@ providers: [
 ```js
-/** @jsx h */
-const { createComponent, h } = Frint;
-
-const MyComponent = createComponent({
+const MyComponent = React.createClass({
   render() {
@@ -262,8 +281,7 @@ return <p>Interval: {this.props.interval}</p>;
 ```js
-/** @jsx h */
-const Rx = require('rxjs');
-const { observe } = Frint;
+import { Observable } from 'rxjs';
+import { observe } from 'frint-react';
 
 const MyObservedComponent = observe(function () {
-  return Rx.Observable
+  return Observable
     .interval(1000) // emits an integer every 1 second
@@ -285,3 +303,3 @@ .map(x => ({ interval: x })); // map the integer to a props-compatible object
   // let's keep our first interval Observable too
-  const interval$ = Rx.Observable
+  const interval$ = Observable
     .interval(1000)
@@ -326,3 +344,3 @@ .map(x => ({ interval: x }));
 ```js
-const { streamProps } = Frint;
+import { streamProps } from 'frint-react';
 
@@ -333,3 +351,3 @@ const MyObservedComponent = observe(function (app) {
     .set(
-      Rx.Observable.interval(1000),
+      Observable.interval(1000),
       x => ({ interval: x }),
@@ -375,4 +393,3 @@ )
 ```js
-/** @jsx h */
-const MyComponent = createComponent({
+const MyComponent = React.createClass({
   render() {
@@ -411,12 +428,7 @@ const todos = [
 ```js
-/** @jsx h */
-const {
-  createComponent,
-  createWidget,
-  h,
-  observe,
-  RegionService
-} = Frint;
+import React from 'react';
+import { createApp } from 'frint';
+import { observe, RegionService } from 'frint-react';
 
-const WidgetComponent = createComponent({
+const WidgetComponent = React.createClass({
   render () {
@@ -438,3 +450,3 @@ const { todo } = this.props;
 
-const Widget = createWidget({
+const Widget = createApp({
   name: 'MyWidget',
@@ -460,3 +472,3 @@ providers: [
 
-  // this tells Core App to treat this widget as a multi-instance one
+  // this tells Root App to treat this widget as a multi-instance one
   multi: true
@@ -470,32 +482,2 @@ });
 
-## createComponent
-
-> createComponent(options)
-
-Creates a new Component, using React internally.
-
-### Arguments
-
-1. `options` (`Object`):
-    * `render` (`Function` [required]): Function returning JSX.
-    * `beforeMount` (`Function`): Called before mounting the Component.
-    * `afterMount` (`Function`): Called after mounting the Component.
-    * `beforeUnmount` (`Function`): Called right before unmounting the Component.
-
-### Returns
-
-`Component`: React Component.
-
-## h
-
-> h(type, props, children)
-
-The hyperscript wrapping React's [`React.createElement`](https://facebook.github.io/react/docs/react-api.html#createelement). This function is expected to be in the scope wherever JSX is used.
-
-## PropTypes
-
-> PropTypes
-
-For [typechecking](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) Component's props.
-
 ## render
@@ -505,7 +487,7 @@
 
-Renders a Core App in target DOM node.
+Renders a Root App in target DOM node.
 
 ### Arguments
 
-1. `app` (`App`): The Core App instance.
+1. `app` (`App`): The Root App instance.
 1. `node` (`Element`): The DOM Element where you want your App to render.
@@ -520,3 +502,3 @@
 1. `fn` (`Function`): The function returning an Observable.
-    * The `fn` accepts `app` as an argument, which is the instance of your Core App or Widget in the scope
+    * The `fn` accepts `app` as an argument, which is the instance of your Root App or Widget in the scope
     * It should return an `Observable`
@@ -523,0 +505,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107079

increased by60.35%

Dependency count

2

decreased by-50%

Number of package files

30

increased by15.38%

Lines of code

2052

increased by61.07%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

4

increased by100%

Number of lines in readme file

595

decreased by-2.94%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedreact@^0.14.8

• - Removedreact-dom@^0.14.8

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedreact-dom@0.14.10(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)