@washingtonpost/storybook-addon-web-vitals - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0--canary.626f4cc.0

dist/constants.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.EVENTS = exports.PANEL_ID = exports.ADDON_ID = exports.PARAM_KEY = void 0;
+exports.PARAM_KEY = exports.PANEL_ID = exports.EVENTS = exports.ADDON_ID = void 0;
 var PARAM_KEY = "web-vitals";
@@ -19,2 +19,3 @@ exports.PARAM_KEY = PARAM_KEY;
 var ERROR = "".concat(ADDON_ID, "/error");
+var CLEAR = "".concat(ADDON_ID, "/clear");
 var EVENTS = {
@@ -25,4 +26,5 @@ RESULT: RESULT,
   MANUAL: MANUAL,
-  ERROR: ERROR
+  ERROR: ERROR,
+  CLEAR: CLEAR
 };
 exports.EVENTS = EVENTS;

dist/preset/index.js

@@ -15,3 +15,3 @@ "use strict";
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
@@ -18,0 +18,0 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

dist/WebVitalsMonitor.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -18,5 +18,5 @@ Object.defineProperty(exports, "__esModule", {
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
@@ -33,3 +33,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
@@ -41,39 +41,16 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var WebVitalsMonitor = /*#__PURE__*/(0, _react.memo)(function () {
-  var _useAddonState = (0, _api.useAddonState)("".concat(_constants.ADDON_ID), []),
+  var _useAddonState = (0, _api.useAddonState)(_constants.ADDON_ID, []),
       _useAddonState2 = _slicedToArray(_useAddonState, 2),
-      vitals = _useAddonState2[0],
-      setVitals = _useAddonState2[1];
+      results = _useAddonState2[0],
+      setState = _useAddonState2[1];
 
-  var _useAddonState3 = (0, _api.useAddonState)("".concat(_constants.ADDON_ID, "/cls"), {}),
-      _useAddonState4 = _slicedToArray(_useAddonState3, 2),
-      clsVital = _useAddonState4[0],
-      setCLSVital = _useAddonState4[1];
-
-  var _useAddonState5 = (0, _api.useAddonState)("".concat(_constants.ADDON_ID, "/fid"), {}),
-      _useAddonState6 = _slicedToArray(_useAddonState5, 2),
-      fidVital = _useAddonState6[0],
-      setFIDVital = _useAddonState6[1];
-
-  var _useAddonState7 = (0, _api.useAddonState)("".concat(_constants.ADDON_ID, "/lcp"), {}),
-      _useAddonState8 = _slicedToArray(_useAddonState7, 2),
-      lcpVital = _useAddonState8[0],
-      setLCPVital = _useAddonState8[1];
-
-  var emit = (0, _api.useChannel)(_defineProperty({}, _constants.EVENTS.RESULT, function (vital) {
-    if (vital.name == "CLS") {
-      setCLSVital(vital);
-    }
-
-    if (vital.name == "FID") {
-      setFIDVital(vital);
-    }
-
-    if (vital.name == "LCP") {
-      setLCPVital(vital);
-    }
+  var emit = (0, _api.useChannel)(_defineProperty({}, _constants.EVENTS.RESULT, function (newResults) {
+    return setState(newResults);
   }));
 
   _react["default"].useEffect(function () {
-    setVitals([clsVital, fidVital, lcpVital]);
-  }, [clsVital, fidVital, lcpVital]);
+    emit(_constants.EVENTS.CLEAR);
+    setState([]);
+    emit(_constants.EVENTS.REQUEST);
+  }, []);
 
@@ -102,8 +79,9 @@ var getBadgeStatus = function getBadgeStatus(vital) {
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, vitals && vitals.map(function (vital, index) {
-    return vital && vital.value && /*#__PURE__*/_react["default"].createElement(_components.Badge, {
-      status: getBadgeStatus(vital)
-    }, vital.name, ": ", getNormalizedValue(vital.value), " ");
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, results && results.map(function (result) {
+    return /*#__PURE__*/_react["default"].createElement(_components.Badge, {
+      status: getBadgeStatus(result),
+      key: result.name
+    }, "Web Vitals ", result.name, ": ", getNormalizedValue(result.value), " ");
   }));
 });
 exports.WebVitalsMonitor = WebVitalsMonitor;

dist/withWebVitals.js

@@ -10,52 +10,38 @@ "use strict";
 
+var _coreEvents = require("@storybook/core-events");
+
 var _constants = require("./constants");
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+var _webVitals = require("web-vitals");
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+var withWebVitals = function withWebVitals(StoryFn) {
+  var _useChannel;
 
-var withWebVitals = function withWebVitals(StoryFn, context) {
-  var emit = (0, _addons.useChannel)({}, []);
-  (0, _addons.useEffect)(function () {
-    var cumulativeLayoutShiftScore = 0;
-    var observer = new PerformanceObserver(function (list) {
-      var _iterator = _createForOfIteratorHelper(list.getEntries()),
-          _step;
+  var emit = (0, _addons.useChannel)((_useChannel = {}, _defineProperty(_useChannel, _constants.EVENTS.REQUEST, function () {
+    emit(_constants.EVENTS.RESULT, []);
+  }), _defineProperty(_useChannel, _coreEvents.STORY_CHANGED, function () {
+    emit(_constants.EVENTS.RESULT, []);
+  }), _defineProperty(_useChannel, _constants.EVENTS.CLEAR, function () {
+    emit(_constants.EVENTS.RESULT, []);
+  }), _useChannel));
 
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var entry = _step.value;
+  var handleReport = function handleReport(_ref) {
+    var name = _ref.name,
+        id = _ref.id,
+        delta = _ref.delta,
+        value = _ref.value;
+    emit(_constants.EVENTS.RESULT, [{
+      name: name,
+      id: id,
+      delta: delta,
+      value: value
+    }]);
+  };
 
-          // Only count layout shifts without recent user input.
-          if (!entry.hadRecentInput) {
-            cumulativeLayoutShiftScore += entry.value;
-            emit(_constants.EVENTS.RESULT, {
-              name: "CLS",
-              value: cumulativeLayoutShiftScore || 2
-            });
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    });
-
-    try {
-      observer.observe({
-        type: "layout-shift",
-        buffered: true
-      }); // Force any pending records to be dispatched.
-
-      observer.takeRecords();
-    } catch (e) {// Do nothing if the browser doesn't support this API.
-    }
-
-    return function () {
-      observer.disconnect();
-      console.log("shutting down");
-    };
+  (0, _addons.useEffect)(function () {
+    (0, _webVitals.getLCP)(handleReport);
+    (0, _webVitals.getFID)(handleReport);
+    (0, _webVitals.getCLS)(handleReport, true);
   }, []);
@@ -62,0 +48,0 @@ return StoryFn();

package.json

 {
   "name": "@washingtonpost/storybook-addon-web-vitals",
-  "version": "0.1.1",
+  "version": "0.2.0--canary.626f4cc.0",
   "description": "See how your component fairs according to web vitals",
@@ -18,3 +18,3 @@ "repository": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 --no-manager-cache",
     "start": "concurrently \"npm run storybook\" \"npm run build -- --watch\"",
@@ -65,3 +65,4 @@ "build-storybook": "build-storybook",
   "dependencies": {
-    "@storybook/addons": "^6.0.0"
+    "@storybook/addons": "^6.0.0",
+    "web-vitals": "^2.1.2"
   },
@@ -68,0 +69,0 @@ "peerDependencies": {

README.md

@@ -5,3 +5,3 @@ <img src="https://user-images.githubusercontent.com/347490/104764662-b5358980-5735-11eb-8ef8-7058b6be43da.png" width="89" height="32">
 
-Storybook Addon Web Vitals can be used for instant feedback on loading, interactivity, and layout shift metric for each story.
+Storybook Addon Web Vitals can be used for instant feedback on loading, interactivity, and layout shift metric for each story. We use the [web-vitals](https://github.com/GoogleChrome/web-vitals) library.
 
@@ -14,3 +14,3 @@ This is an alpha release. We currently only report CLS statuses.
 
-Requires Storybook 6.1 or later. Install the latest with `npx sb upgrade --prerelease`
+Requires Storybook 6.1 or later
 
@@ -17,0 +17,0 @@ First, install the addon

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

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

Worsened metrics

Total package byte prevSize

15996

decreased by-11.44%

Dependency count

4

increased by33.33%

Lines of code

175

decreased by-14.63%

Dependency changes

• + Addedweb-vitals@^2.1.2

• + Addedweb-vitals@2.1.4(transitive)