xiaody · ramirezcgn · Apr 23, 2021 · Apr 23, 2021 · Apr 23, 2021 · Apr 23, 2021
diff --git a/lib/common.js b/lib/common.js
@@ -12,5 +12,4 @@ module.exports = {
     border: 'none'
   },
   mirrorProps: ['box-sizing', 'width', 'font-size', 'font-weight', 'font-family', 'font-style', 'letter-spacing', 'text-indent', 'white-space', 'word-break', 'overflow-wrap', 'padding-left', 'padding-right']
-};
-
+};
diff --git a/lib/helpers.js b/lib/helpers.js
@@ -20,5 +20,4 @@ function omit(obj, omittedKeys) {
 
 module.exports = {
   omit: omit
-};
-
+};
diff --git a/lib/html.js b/lib/html.js
@@ -49,7 +49,7 @@ function hookNode(node, basedOn) {
 
     switch (basedOn) {
       case 'words':
-        units = node.textContent.split(/\b|(?=\W)/);
+        units = node.textContent.match(/[^\s]+|\s/g) || [];
         break;
 
       case 'letters':
@@ -116,6 +116,7 @@ var defaultProps = {
   className: '',
   basedOn: undefined,
   onReflow: function onReflow() {},
+  innerRef: undefined,
   winWidth: undefined // for the HOC
 
 };
@@ -139,13 +140,15 @@ function (_React$Component) {
     _classCallCheck(this, HTMLEllipsis);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(HTMLEllipsis).call(this, props));
+    var innerRef = props.innerRef;
     _this.state = {
       html: props.unsafeHTML,
       clamped: false
     };
     _this.canvas = null;
     _this.maxLine = 0;
     _this.nlUnits = [];
+    _this.innerRef = innerRef || React.createRef();
     return _this;
   }
 
@@ -198,7 +201,7 @@ function (_React$Component) {
     value: function copyStyleToCanvas() {
       var _this2 = this;
 
-      var targetStyle = window.getComputedStyle(this.target);
+      var targetStyle = window.getComputedStyle(this.innerRef.current);
       mirrorProps.forEach(function (key) {
         _this2.canvas.style[key] = targetStyle[key];
       });
@@ -294,8 +297,6 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       var _this$state = this.state,
           html = _this$state.html,
           clamped = _this$state.clamped;
@@ -308,9 +309,7 @@ function (_React$Component) {
 
       return React.createElement(Component, _extends({
         className: "LinesEllipsis ".concat(clamped ? 'LinesEllipsis--clamped' : '', " ").concat(className),
-        ref: function ref(node) {
-          return _this3.target = node;
-        }
+        ref: this.innerRef
       }, omit(rest, usedProps)), React.createElement("div", {
         dangerouslySetInnerHTML: {
           __html: clamped ? html : unsafeHTML
@@ -323,5 +322,4 @@ function (_React$Component) {
 }(React.Component);
 
 HTMLEllipsis.defaultProps = defaultProps;
-module.exports = HTMLEllipsis;
-
+module.exports = HTMLEllipsis;
diff --git a/lib/index.js b/lib/index.js
@@ -37,6 +37,12 @@ var _require = require('./common'),
 var _require2 = require('./helpers'),
     omit = _require2.omit;
 
+var responsiveHOC = require('./responsiveHOC');
+
+var HTMLEllipsis = require('./html');
+
+var LinesEllipsisLoose = require('./loose');
+
 function prevSibling(node, count) {
   while (node && count--) {
     node = node.previousElementSibling;
@@ -55,6 +61,7 @@ var defaultProps = {
   onReflow: function onReflow() {},
   text: '',
   trimRight: true,
+  innerRef: undefined,
   winWidth: undefined // for the HOC
 
 };
@@ -79,13 +86,15 @@ function (_React$Component) {
     _classCallCheck(this, LinesEllipsis);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(LinesEllipsis).call(this, props));
+    var innerRef = props.innerRef;
     _this.state = {
       text: props.text,
       clamped: false
     };
     _this.units = [];
     _this.maxLine = 0;
     _this.canvas = null;
+    _this.innerRef = innerRef || React.createRef();
     return _this;
   }
 
@@ -138,7 +147,7 @@ function (_React$Component) {
     value: function copyStyleToCanvas() {
       var _this2 = this;
 
-      var targetStyle = window.getComputedStyle(this.target);
+      var targetStyle = window.getComputedStyle(this.innerRef.current);
       mirrorProps.forEach(function (key) {
         _this2.canvas.style[key] = targetStyle[key];
       });
@@ -151,7 +160,7 @@ function (_React$Component) {
 
       switch (basedOn) {
         case 'words':
-          this.units = props.text.split(/\b|(?=\W)/);
+          this.units = props.text.match(/[^\s]+|\s/g) || [];
           break;
 
         case 'letters':
@@ -231,8 +240,6 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       var _this$state = this.state,
           text = _this$state.text,
           clamped = _this$state.clamped;
@@ -246,9 +253,7 @@ function (_React$Component) {
 
       return React.createElement(Component, _extends({
         className: "LinesEllipsis ".concat(clamped ? 'LinesEllipsis--clamped' : '', " ").concat(className),
-        ref: function ref(node) {
-          return _this3.target = node;
-        }
+        ref: this.innerRef
       }, omit(rest, usedProps)), clamped && trimRight ? text.replace(/[\s\uFEFF\xA0]+$/, '') : text, React.createElement("wbr", null), clamped && React.createElement("span", {
         className: "LinesEllipsis-ellipsis"
       }, ellipsis));
@@ -260,4 +265,7 @@ function (_React$Component) {
 
 LinesEllipsis.defaultProps = defaultProps;
 module.exports = LinesEllipsis;
-
+module.exports.LinesEllipsis = LinesEllipsis;
+module.exports.HTMLEllipsis = HTMLEllipsis;
+module.exports.responsiveHOC = responsiveHOC;
+module.exports.LinesEllipsisLoose = LinesEllipsisLoose;
diff --git a/lib/loose.js b/lib/loose.js
@@ -50,5 +50,4 @@ LinesEllipsisLoose.defaultProps = {
   style: {},
   overflowFallback: true
 };
-module.exports = LinesEllipsisLoose;
-
+module.exports = LinesEllipsisLoose;
diff --git a/lib/responsiveHOC.js b/lib/responsiveHOC.js
@@ -28,8 +28,6 @@ var React = require('react');
 
 var debounce = require('lodash/debounce');
 
-var isBrowser = typeof window !== 'undefined';
-
 function responsiveHOC() {
   var wait = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 150;
   var debounceOptions = arguments.length > 1 ? arguments[1] : undefined;
@@ -45,29 +43,59 @@ function responsiveHOC() {
         _classCallCheck(this, Responsive);
 
         _this = _possibleConstructorReturn(this, _getPrototypeOf(Responsive).call(this, props));
+        var innerRef = props.innerRef;
         _this.state = {
-          winWidth: isBrowser ? window.innerWidth : 0
+          winWidth: window.innerWidth
         };
-        _this.onResize = debounce(_this.onResize.bind(_assertThisInitialized(_this)), wait, debounceOptions);
+        _this.innerRef = innerRef || React.createRef();
+        _this.forceUpdate = _this.forceUpdate.bind(_assertThisInitialized(_this));
+        _this.onResize = debounce(_this.forceUpdate, wait, debounceOptions);
+        _this.resizeObserver = null;
         return _this;
       }
 
       _createClass(Responsive, [{
         key: "componentDidMount",
         value: function componentDidMount() {
-          window.addEventListener('resize', this.onResize);
+          var current = this.innerRef.current;
+          var _document = document,
+              fonts = _document.fonts;
+
+          if (fonts) {
+            fonts.ready.then(this.forceUpdate);
+          } else {
+            setTimeout(this.forceUpdate);
+          }
+
+          if (window.ResizeObserver && current) {
+            this.resizeObserver = new ResizeObserver(this.forceUpdate);
+
+            if (this.resizeObserver) {
+              this.resizeObserver.observe(current, {
+                box: 'border-box'
+              });
+            }
+          } else {
+            window.addEventListener('resize', this.onResize);
+          }
         }
       }, {
         key: "componentWillUnmount",
         value: function componentWillUnmount() {
-          window.removeEventListener('resize', this.onResize);
-          this.onResize.cancel();
+          if (window.ResizeObserver) {
+            if (this.resizeObserver) {
+              this.resizeObserver.disconnect();
+            }
+          } else {
+            window.removeEventListener('resize', this.onResize);
+            this.onResize.cancel();
+          }
         }
       }, {
-        key: "onResize",
-        value: function onResize() {
+        key: "forceUpdate",
+        value: function forceUpdate() {
           this.setState({
-            winWidth: window.innerWidth
+            winWidth: window.innerWidth + Math.random() / 1000
           });
         }
       }, {
@@ -78,7 +106,7 @@ function responsiveHOC() {
               rest = _objectWithoutProperties(_this$props, ["innerRef"]);
 
           return React.createElement(Component, _extends({
-            ref: innerRef
+            innerRef: this.innerRef
           }, rest, this.state));
         }
       }]);
@@ -90,9 +118,12 @@ function responsiveHOC() {
     Responsive.defaultProps = {
       innerRef: function innerRef() {}
     };
-    return Responsive;
+    return React.forwardRef(function (props, ref) {
+      return React.createElement(Responsive, _extends({
+        innerRef: ref
+      }, props));
+    });
   };
 }
 
-module.exports = responsiveHOC;
-
+module.exports = responsiveHOC;
diff --git a/package.json b/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "test": "standard && jest",
     "lint:fix": "standard --fix",
-    "prebuild": "mkdir -p lib",
-    "build": "for js in src/*.js; do babel $js > \"lib/$(basename $js)\"; done",
+    "prebuild": "mkdirp lib",
+    "build": "babel src --out-dir lib",
     "docs": "browserify -e docs/app.js --transform-key=docs | uglifyjs -m -b max_line_len=800,beautify=false > docs/app.bundle.js",
     "docs:watch": "watchify -e docs/app.js --transform-key=docs -o docs/app.bundle.js",
     "prepare": "npm run build"
@@ -47,6 +47,7 @@
     "jest": "^24.1.0",
     "jest-enzyme": "^7.0.1",
     "lodash": "^4.17.11",
+    "mkdirp": "^0.5.5",
     "preact": "^8.4.2",
     "raf": "^3.4.1",
     "react": "^16.8.3",
@@ -56,6 +57,9 @@
     "watchify": "^3.11.1"
   },
   "standard": {
+    "globals": [
+      "ResizeObserver"
+    ],
     "ignore": [
       "lib",
       "docs/*.bundle.js"

diff --git a/src/html.js b/src/html.js
@@ -12,7 +12,7 @@ function hookNode (node, basedOn) {
     let units
     switch (basedOn) {
       case 'words':
-        units = node.textContent.split(/\b|(?=\W)/)
+        units = node.textContent.match(/[^\s]+|\s/g) || []
         break
       case 'letters':
         units = Array.from(node.textContent)
@@ -75,6 +75,7 @@ const defaultProps = {
   className: '',
   basedOn: undefined,
   onReflow () {},
+  innerRef: undefined,
   winWidth: undefined // for the HOC
 }
 const usedProps = Object.keys(defaultProps)
@@ -89,13 +90,15 @@ const usedProps = Object.keys(defaultProps)
 class HTMLEllipsis extends React.Component {
   constructor (props) {
     super(props)
+    const {innerRef} = props
     this.state = {
       html: props.unsafeHTML,
       clamped: false
     }
     this.canvas = null
     this.maxLine = 0
     this.nlUnits = []
+    this.innerRef = innerRef || React.createRef()
   }
 
   componentDidMount () {
@@ -136,7 +139,7 @@ class HTMLEllipsis extends React.Component {
   }
 
   copyStyleToCanvas () {
-    const targetStyle = window.getComputedStyle(this.target)
+    const targetStyle = window.getComputedStyle(this.innerRef.current)
     mirrorProps.forEach((key) => {
       this.canvas.style[key] = targetStyle[key]
     })
@@ -230,7 +233,7 @@ class HTMLEllipsis extends React.Component {
     return (
       <Component
         className={`LinesEllipsis ${clamped ? 'LinesEllipsis--clamped' : ''} ${className}`}
-        ref={node => (this.target = node)}
+        ref={this.innerRef}
         {...omit(rest, usedProps)}
       >
         <div dangerouslySetInnerHTML={{__html: clamped ? html : unsafeHTML}} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,5 +12,4 @@ module.exports = { @@
         border: 'none'
       },
       mirrorProps: ['box-sizing', 'width', 'font-size', 'font-weight', 'font-family', 'font-style', 'letter-spacing', 'text-indent', 'white-space', 'word-break', 'overflow-wrap', 'padding-left', 'padding-right']
-    };
+    };