react2angularjs - npm Package Compare versions

Comparing version 1.0.0-beta to 1.0.0-beta.1

src/react-directive.js

+import React from 'react';
+import { render } from 'react-dom';
+import createReactElements from './create-react-elements';
+
+export default class ReactDirective {
+  constructor(ReactComponent, propNames, $compile) {
+    this.restrict = 'EA';
+    this.transclude = true;
+
+    this.ReactComponent = ReactComponent;
+    this.propNames = propNames;
+    this.$compile = $compile;
+
+    this.scope = this.getScopeBindings();
+  }
+
+  getScopeBindings() {
+    return this.propNames.reduce((scope, propName) => {
+      scope[propName] = `<${propName}`;
+      return scope;
+    }, {});
+  }
+
+  getProps() {
+    return this.propNames.reduce((props, propName) => {
+      props[propName] = this.elementScope[propName];
+      return props;
+    }, {});
+  }
+
+  link(scope, element, attrs, ctrl, transclude) {
+    this.$container = element[0];
+    this.$children = transclude();
+    this.elementScope = scope;
+
+    this.render();
+    this.$compile(element.contents())(scope.$parent);
+
+    //re render on scope changes
+    this.elementScope.$watch(this.render.bind(this));
+  }
+
+  render() {
+    let props = this.getProps();
+    let children = createReactElements(this.$children);
+
+    render(
+      <this.ReactComponent {...props}>
+        {children}
+      </this.ReactComponent>,
+      this.$container
+    );
+  }
+}

.babelrc

@@ -5,3 +5,14 @@ {
     "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-modules-umd",
+      {
+        "globals": {
+          "react": "React",
+          "react-dom": "ReactDOM"
+        }
+      }
+    ]
   ]
 }

dist/index.js

@@ -1,13 +0,196 @@
-"use strict";
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.React);
+    global.createReactElements = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+  "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports["default"] = createReactElements;
+  _react = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+  function createReactElements(elements) {
+    var reactElements = Array.from(elements).reduce(createElement, []); //If there is only one Child, react expect children object instead of Array
+
+    if (reactElements.length === 1) {
+      return reactElements[0];
+    }
+
+    return reactElements;
+  }
+
+  function createElement(elements, element, index) {
+    if (element instanceof HTMLElement) {
+      var reactElement = createHTMLElement(element, index);
+      elements.push(reactElement);
+    } else if (element.nodeName === '#text') {
+      var _reactElement = createTextElement(element); //replace new line characters with empty space
+
+
+      var textContent = _reactElement.replace(/↵/, ''); //Add only if element contains text content
+
+
+      if (textContent) {
+        elements.push(_reactElement);
+      }
+    }
+
+    return elements;
+  }
+
+  function createHTMLElement(element, index) {
+    var tagName = element.tagName,
+        childNodes = element.childNodes;
+    var tagname = tagName.toLowerCase();
+    var attributes = getAttributesMap(element);
+    attributes.key = index;
+    attributes.className = attributes["class"];
+    delete attributes["class"];
+
+    if (childNodes.length > 0) {
+      attributes.children = createReactElements(childNodes);
+    }
+
+    return _react["default"].createElement(tagname, attributes);
+  }
+
+  function createTextElement(element) {
+    return element.data.trim();
+  }
+
+  function getAttributesMap(element) {
+    var attributes = element.attributes;
+    var attrArray = Array.from(attributes || []);
+    return attrArray.reduce(function (map, attr) {
+      map[attr.name] = attr.value;
+      return map;
+    }, {});
+  }
 });
-exports["default"] = void 0;
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./react-directive"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./react-directive"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.reactDirective);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _reactDirective) {
+  "use strict";
 
-var _reactToAngularjs = _interopRequireDefault(require("./react-to-angularjs"));
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports["default"] = reactToAngularjs;
+  _reactDirective = _interopRequireDefault(_reactDirective);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _reactToAngularjs["default"];
-exports["default"] = _default;
+  function reactToAngularjs(ReactComponent) {
+    var propNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    return ['$compile', function ($compile) {
+      return new _reactDirective["default"](ReactComponent, propNames, $compile);
+    }];
+  }
+});
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "react-dom", "./create-react-elements"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("react-dom"), require("./create-react-elements"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.React, global.ReactDOM, global.createReactElements);
+    global.reactDirective = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactDom, _createReactElements) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports["default"] = void 0;
+  _react = _interopRequireDefault(_react);
+  _createReactElements = _interopRequireDefault(_createReactElements);
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+  var ReactDirective = /*#__PURE__*/function () {
+    function ReactDirective(ReactComponent, propNames, $compile) {
+      _classCallCheck(this, ReactDirective);
+
+      this.restrict = 'EA';
+      this.transclude = true;
+      this.ReactComponent = ReactComponent;
+      this.propNames = propNames;
+      this.$compile = $compile;
+      this.scope = this.getScopeBindings();
+    }
+
+    _createClass(ReactDirective, [{
+      key: "getScopeBindings",
+      value: function getScopeBindings() {
+        return this.propNames.reduce(function (scope, propName) {
+          scope[propName] = "<".concat(propName);
+          return scope;
+        }, {});
+      }
+    }, {
+      key: "getProps",
+      value: function getProps() {
+        var _this = this;
+
+        return this.propNames.reduce(function (props, propName) {
+          props[propName] = _this.elementScope[propName];
+          return props;
+        }, {});
+      }
+    }, {
+      key: "link",
+      value: function link(scope, element, attrs, ctrl, transclude) {
+        this.$container = element[0];
+        this.$children = transclude();
+        this.elementScope = scope;
+        this.render();
+        this.$compile(element.contents())(scope.$parent); //re render on scope changes
+
+        this.elementScope.$watch(this.render.bind(this));
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var props = this.getProps();
+        var children = (0, _createReactElements["default"])(this.$children);
+        (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(this.ReactComponent, props, children), this.$container);
+      }
+    }]);
+
+    return ReactDirective;
+  }();
+
+  _exports["default"] = ReactDirective;
+});

package.json

 {
   "name": "react2angularjs",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.1",
   "description": "A fully functional way to integrate React components in Angular 1 apps!",
@@ -8,4 +8,4 @@ "main": "dist/index.js",
     "test": "echo test",
-    "build": "npx babel src -d dist",
-    "eslint": "npx eslint src/*",
+    "build": "npx babel src --out-file dist/index.js",
+    "eslint": "npx eslint src/index.js",
     "prepublish": "npm run build"
@@ -16,2 +16,3 @@ },
     "@babel/core": "7.8.7",
+    "@babel/plugin-transform-modules-umd": "7.9.0",
     "@babel/polyfill": "7.8.7",
@@ -18,0 +19,0 @@ "@babel/preset-env": "7.8.7",

README.md

@@ -12,4 +12,4 @@ # Use React in Angular along with Transclusion/Children
 angular.module('app', [])
-  .directive('ReactComponent1', react2angularjs(ReactComponent, ['prop1', 'prop2]))
-  .directive('ReactInput', react2angularjs(ReactInput, ['value', 'onChange]))
+  .directive('ReactComponent1', react2angularjs(ReactComponent, ['prop1', 'prop2']))
+  .directive('ReactInput', react2angularjs(ReactInput, ['value', 'onChange']))
 
@@ -22,3 +22,5 @@ ```
 ```
-<react-input defaultValue="'123'" value="$ctrl.value" onChange="$ctrl.onChange">
+<react-input default-value="'123'" value="$ctrl.value" on-change="$ctrl.onChange" >
+  ...
+</react-input>
 
@@ -40,3 +42,2 @@ ```
 ```
-
 <react-tooltip placement="'right'" overlay="'tooltip message'">
@@ -47,4 +48,11 @@ <button ng-click="$ctrl.onSignInClicked()">Sign in</button>
 
+Event callback
+```
+<react-tooltip placement="'right'" overlay="'tooltip message'" on-close="$ctrl.onClose">
+  <button ng-click="$ctrl.onSignInClicked()">Sign in</button>
+</react-tooltip>
+```
+
 ## Live Demo
 
-[Codesandbox](https://codesandbox.io/s/react-2-angularjs-uttki) - https://codesandbox.io/s/react-2-angularjs-uttki
+[CodeSandbox](https://codesandbox.io/s/react-2-angularjs-uttki) - https://codesandbox.io/s/react-2-angularjs-uttki

src/create-react-elements.js

 import React from 'react';
 
 export default function createReactElements(elements) {
-  let rElements = Array.from(elements).reduce((elements, element, index) => {
+  let reactElements = Array.from(elements).reduce(createElement, []);
 
-    if (element instanceof HTMLElement) {
-      let attributes = Array.from(element.attributes || []).reduce((attrs, attr) => {
-        attrs[attr.name] = attr.value;
-        return attrs;
-      }, {});
+  //If there is only one Child, react expect children object instead of Array
+  if (reactElements.length === 1) {
+    return reactElements[0];
+  }
 
-      attributes.key = index;
-      attributes.className = attributes.class;
+  return reactElements;
+}
 
-      let tagname = element.tagName.toLowerCase();
-      if (tagname !== 'input') {
-        attributes.children = createReactElements(element.childNodes);
-      }
-      delete attributes.class;
+function createElement(elements, element, index) {
 
-      let rElement = React.createElement(tagname, attributes);//, attributes.children);
-      elements.push(rElement);
-    } else if (element.nodeName === '#text') {
-      let rElement = element.data.trim();
-      let replaceNewLine = rElement.replace(/↵/, '');
+  if (element instanceof HTMLElement) {
+    let reactElement = createHTMLElement(element, index);
+    elements.push(reactElement);
 
-      if (replaceNewLine) {
-        elements.push(rElement);
-      }
+  } else if (element.nodeName === '#text') {
+    let reactElement = createTextElement(element);
+
+    //replace new line characters with empty space
+    let textContent = reactElement.replace(/↵/, '');
+
+    //Add only if element contains text content
+    if (textContent) {
+      elements.push(reactElement);
     }
+  }
 
-    return elements;
-  }, []);
+  return elements;
+}
 
-  if (rElements.length === 1) {
-    return rElements[0];
+function createHTMLElement(element, index) {
+  let { tagName, childNodes } = element;
+  let tagname = tagName.toLowerCase();
+  let attributes = getAttributesMap(element);
+
+  attributes.key = index;
+  attributes.className = attributes.class;
+  delete attributes.class;
+
+  if (childNodes.length > 0) {
+    attributes.children = createReactElements(childNodes);
   }
 
-  return rElements;
-}
+  return React.createElement(tagname, attributes);
+}
+
+function createTextElement(element) {
+  return element.data.trim();
+}
+
+function getAttributesMap(element) {
+  let { attributes } = element;
+  let attrArray = Array.from(attributes || []);
+
+  return attrArray.reduce((map, attr) => {
+    map[attr.name] = attr.value;
+    return map;
+  }, {});
+}

src/index.js

@@ -1,3 +0,7 @@
-import reactToAngularjs from "./react-to-angularjs";
+import ReactDirective from './react-directive';
 
-export default reactToAngularjs;
+export default function reactToAngularjs(ReactComponent, propNames = []) {
+  return ['$compile', $compile => {
+    return new ReactDirective(ReactComponent, propNames, $compile);
+  }];
+}

dist/create-react-elements.js

-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = createReactElements;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function createReactElements(elements) {
-  var rElements = Array.from(elements).reduce(function (elements, element, index) {
-    if (element instanceof HTMLElement) {
-      var attributes = Array.from(element.attributes || []).reduce(function (attrs, attr) {
-        attrs[attr.name] = attr.value;
-        return attrs;
-      }, {});
-      attributes.key = index;
-      attributes.className = attributes["class"];
-      var tagname = element.tagName.toLowerCase();
-
-      if (tagname !== 'input') {
-        attributes.children = createReactElements(element.childNodes);
-      }
-
-      delete attributes["class"];
-
-      var rElement = _react["default"].createElement(tagname, attributes); //, attributes.children);
-
-
-      elements.push(rElement);
-    } else if (element.nodeName === '#text') {
-      var _rElement = element.data.trim();
-
-      var replaceNewLine = _rElement.replace(/↵/, '');
-
-      if (replaceNewLine) {
-        elements.push(_rElement);
-      }
-    }
-
-    return elements;
-  }, []);
-
-  if (rElements.length === 1) {
-    return rElements[0];
-  }
-
-  return rElements;
-}

dist/react-to-angularjs.js

-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = reactToAngularjs;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = require("react-dom");
-
-var _createReactElements = _interopRequireDefault(require("./create-react-elements"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function reactToAngularjs(ReactComponent) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return ['$compile', function ($compile) {
-    var scope = props.reduce(function (scope, prop) {
-      scope[prop] = "<".concat(prop);
-      return scope;
-    }, {});
-    return {
-      restrict: 'E',
-      transclude: true,
-      scope: scope,
-      link: function link(scope, element, attrs, ctrl, transclude) {
-        var _this = this;
-
-        var $element = element[0];
-        var $transcluded = transclude();
-        this.render({
-          $transcluded: $transcluded,
-          $element: $element,
-          $compile: $compile,
-          scope: scope
-        });
-        $compile(element.contents())(scope.$parent);
-        scope.$watch(function () {
-          _this.render({
-            $transcluded: $transcluded,
-            $element: $element,
-            $compile: $compile,
-            scope: scope
-          });
-        });
-      },
-      render: function render(_ref) {
-        var $transcluded = _ref.$transcluded,
-            scope = _ref.scope,
-            $compile = _ref.$compile,
-            $element = _ref.$element;
-        var componentProps = props.reduce(function (props, prop) {
-          props[prop] = scope[prop];
-          return props;
-        }, {});
-        (0, _reactDom.render)(_react["default"].createElement(ReactComponent, componentProps, (0, _createReactElements["default"])($transcluded, $compile, scope)), $element);
-      }
-    };
-  }];
-}

src/react-to-angularjs.js

-import React from 'react';
-import { render } from 'react-dom';
-
-import createReactElements from "./create-react-elements";
-
-export default function reactToAngularjs(ReactComponent, props = []) {
-
-  return ['$compile', function ($compile) {
-    let scope = props.reduce((scope, prop) => {
-      scope[prop] = `<${prop}`;
-      return scope;
-    }, {});
-
-    return {
-      restrict: 'E',
-      transclude: true,
-      scope,
-      link: function (scope, element, attrs, ctrl, transclude) {
-        let $element = element[0];
-        let $transcluded = transclude();
-
-        this.render({ $transcluded, $element, $compile, scope });
-        $compile(element.contents())(scope.$parent);
-
-        scope.$watch(() => {
-          this.render({ $transcluded, $element, $compile, scope });
-        });
-      },
-      render: function ({ $transcluded, scope, $compile, $element }) {
-        let componentProps = props.reduce((props, prop) => {
-          props[prop] = scope[prop];
-          return props;
-        }, {});
-
-        render(
-          <ReactComponent {...componentProps}>
-            {createReactElements($transcluded, $compile, scope)}
-          </ReactComponent>,
-          $element
-        );
-      }
-    };
-  }];
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12619

54.19%

Lines of code

262

59.76%

Number of lines in readme file

54

17.39%

Worsened metrics

Dev dependency count

7

16.67%

Number of package files

7

-22.22%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes