@devtools-ds/diagnostic - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/cjs/Diagnostic.css.js

@@ -1,1 +0,1 @@
-module.exports = {"diagnostic":"Diagnostic-diagnostic-cc160c9","icon":"Diagnostic-icon-c0a40f6","iconError":"Diagnostic-iconError-a423738","iconWarning":"Diagnostic-iconWarning-689c15f","message":"Diagnostic-message-af8ae7d","wrapper":"Diagnostic-wrapper-ca08f57","wrapperError":"Diagnostic-wrapperError-1d36020","wrapperWarning":"Diagnostic-wrapperWarning-ae0a4f7","line":"Diagnostic-line-64f4c5d","lineError":"Diagnostic-lineError-9347e89","lineWarning":"Diagnostic-lineWarning-e45d2e7","dark":"Diagnostic-dark-c6672db","chrome":"Diagnostic-chrome-01ce558","light":"Diagnostic-light-12c91ea"};
+module.exports = {"diagnostic":"Diagnostic-diagnostic-4348aaa","icon":"Diagnostic-icon-36ff581","iconError":"Diagnostic-iconError-ce52bb0","iconWarning":"Diagnostic-iconWarning-682aff9","message":"Diagnostic-message-a8cb13d","wrapper":"Diagnostic-wrapper-b730b0d","wrapperError":"Diagnostic-wrapperError-82a0e13","wrapperWarning":"Diagnostic-wrapperWarning-4a4313c","line":"Diagnostic-line-e6373ec","lineError":"Diagnostic-lineError-bf08fff","lineWarning":"Diagnostic-lineWarning-dcfc408","dark":"Diagnostic-dark-204325d","chrome":"Diagnostic-chrome-a2cfed1","light":"Diagnostic-light-6481bb3"};

dist/cjs/index.js

@@ -1,2 +0,117 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Diagnostic=exports.generateDescription=exports.Lines=exports.transformLanguageServer=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _themes=require("@devtools-ds/themes");var _clsx=_interopRequireDefault(require("clsx"));var _autoId=require("@reach/auto-id");var _visuallyHidden=require("@reach/visually-hidden");var _icon=require("@devtools-ds/icon");var _vscodeLanguageserverTypes=require("vscode-languageserver-types");var _Diagnostic=_interopRequireDefault(require("./Diagnostic.css"));const transformLanguageServer=severity=>{return severity===_vscodeLanguageserverTypes.DiagnosticSeverity.Error?"error":"warning"};exports.transformLanguageServer=transformLanguageServer;const Lines=props=>{const l=props.lines.map(line=>{const s=(0,_clsx.default)(_Diagnostic.default.line,{[_Diagnostic.default.lineError]:line.highlight&&props.severity==="error",[_Diagnostic.default.lineWarning]:line.highlight&&props.severity==="warning"});const caret=line.highlight?"> ":"  ";return _react.default.createElement("code",{key:line.number,className:s},`${caret}${line.number}| ${line.content}\n`)});return _react.default.createElement(_react.default.Fragment,null,l)};exports.Lines=Lines;const generateDescription=(lines,severity,message)=>{const a=severity==="error"?"An":"A";let description=`${a} ${severity} was found in a block of ${lines.length} lines of code. `;if(message)description+=`The ${severity} message is "${message}". `;if(lines.length>1){description+=`Lines ${lines[0].number} through ${lines[lines.length-1].number} are shown. `;const highlighted=lines.filter(line=>line.highlight===true);if(highlighted.length===1){description+=`Line ${highlighted[0].number} (${highlighted[0].content}) is highlighted.`}if(highlighted.length>1){const numbers=highlighted.map(line=>line.number.toString());description+=`Lines ${numbers.join(", ")} are highlighted.`}}return description};exports.generateDescription=generateDescription;const Diagnostic=props=>{const{severity,lines,theme,colorScheme,className,message}=props,html=(0,_objectWithoutProperties2.default)(props,["severity","lines","theme","colorScheme","className","message"]);const{themeClass}=(0,_themes.useTheme)({theme,colorScheme},_Diagnostic.default);const captionId=`diagnostic-caption-${(0,_autoId.useId)()}`;const isError=severity==="error";const isWarning=severity==="warning";const iconStyles=(0,_clsx.default)(_Diagnostic.default.icon,{[_Diagnostic.default.iconError]:isError,[_Diagnostic.default.iconWarning]:isWarning});const lineStyles=(0,_clsx.default)(_Diagnostic.default.wrapper,{[_Diagnostic.default.wrapperError]:isError,[_Diagnostic.default.wrapperWarning]:isWarning});const Icon=isError?_icon.ConsoleErrorIcon:_icon.WarningIcon;return _react.default.createElement("figure",(0,_extends2.default)({role:"img","aria-labelledby":captionId,className:(0,_clsx.default)(_Diagnostic.default.diagnostic,themeClass,className)},html),message&&_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(Icon,{inline:true,className:iconStyles}),_react.default.createElement("span",{className:_Diagnostic.default.message},message)),_react.default.createElement("pre",{className:lineStyles},_react.default.createElement(Lines,{lines:lines,severity:severity})),_react.default.createElement(_visuallyHidden.VisuallyHidden,null,_react.default.createElement("figcaption",{id:captionId},generateDescription(lines,severity,message))))};exports.Diagnostic=Diagnostic;Diagnostic.defaultProps={severity:"warning"};
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformLanguageServer = exports.generateDescription = exports.Lines = exports.Diagnostic = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _themes = require("@devtools-ds/themes");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _autoId = require("@reach/auto-id");
+var _visuallyHidden = require("@reach/visually-hidden");
+var _icon = require("@devtools-ds/icon");
+var _vscodeLanguageserverTypes = require("vscode-languageserver-types");
+var _Diagnostic = _interopRequireDefault(require("./Diagnostic.css"));
+const _excluded = ["severity", "lines", "theme", "colorScheme", "className", "message"];
+/** A function to automatically convert Language Server severity */
+const transformLanguageServer = severity => {
+  return severity === _vscodeLanguageserverTypes.DiagnosticSeverity.Error ? "error" : "warning";
+};
+exports.transformLanguageServer = transformLanguageServer;
+/** Create the list of lines */
+const Lines = props => {
+  const l = props.lines.map(line => {
+    const s = (0, _clsx.default)(_Diagnostic.default.line, {
+      [_Diagnostic.default.lineError]: line.highlight && props.severity === "error",
+      [_Diagnostic.default.lineWarning]: line.highlight && props.severity === "warning"
+    });
+    const caret = line.highlight ? "> " : "  ";
+    return /*#__PURE__*/_react.default.createElement("code", {
+      key: line.number,
+      className: s
+    }, `${caret}${line.number}| ${line.content}\n`);
+  });
+
+  // https://github.com/yannickcr/eslint-plugin-react/issues/2512
+  // eslint-disable-next-line
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, l);
+};
+
+/**
+ * Generate a screen-reader friendly description of the error.
+ */
+exports.Lines = Lines;
+const generateDescription = (lines, severity, message) => {
+  const a = severity === "error" ? "An" : "A";
+  let description = `${a} ${severity} was found in a block of ${lines.length} lines of code. `;
+  if (message) description += `The ${severity} message is "${message}". `;
+  if (lines.length > 1) {
+    description += `Lines ${lines[0].number} through ${lines[lines.length - 1].number} are shown. `;
+    const highlighted = lines.filter(line => line.highlight === true);
+    if (highlighted.length === 1) {
+      description += `Line ${highlighted[0].number} (${highlighted[0].content}) is highlighted.`;
+    }
+    if (highlighted.length > 1) {
+      const numbers = highlighted.map(line => line.number.toString());
+      description += `Lines ${numbers.join(", ")} are highlighted.`;
+    }
+  }
+  return description;
+};
+
+/** A component for displaying diagnostic stack traces. */
+exports.generateDescription = generateDescription;
+const Diagnostic = props => {
+  const {
+      severity,
+      lines,
+      theme,
+      colorScheme,
+      className,
+      message
+    } = props,
+    html = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    themeClass
+  } = (0, _themes.useTheme)({
+    theme,
+    colorScheme
+  }, _Diagnostic.default);
+  const captionId = `diagnostic-caption-${(0, _autoId.useId)()}`;
+  const isError = severity === "error";
+  const isWarning = severity === "warning";
+  const iconStyles = (0, _clsx.default)(_Diagnostic.default.icon, {
+    [_Diagnostic.default.iconError]: isError,
+    [_Diagnostic.default.iconWarning]: isWarning
+  });
+  const lineStyles = (0, _clsx.default)(_Diagnostic.default.wrapper, {
+    [_Diagnostic.default.wrapperError]: isError,
+    [_Diagnostic.default.wrapperWarning]: isWarning
+  });
+  const Icon = isError ? _icon.ConsoleErrorIcon : _icon.WarningIcon;
+  return /*#__PURE__*/_react.default.createElement("figure", (0, _extends2.default)({
+    role: "img",
+    "aria-labelledby": captionId,
+    className: (0, _clsx.default)(_Diagnostic.default.diagnostic, themeClass, className)
+  }, html), message && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Icon, {
+    inline: true,
+    className: iconStyles
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: _Diagnostic.default.message
+  }, message)), /*#__PURE__*/_react.default.createElement("pre", {
+    className: lineStyles
+  }, /*#__PURE__*/_react.default.createElement(Lines, {
+    lines: lines,
+    severity: severity
+  })), /*#__PURE__*/_react.default.createElement(_visuallyHidden.VisuallyHidden, null, /*#__PURE__*/_react.default.createElement("figcaption", {
+    id: captionId
+  }, generateDescription(lines, severity, message))));
+};
+exports.Diagnostic = Diagnostic;
+Diagnostic.defaultProps = {
+  severity: "warning"
+};
 //# sourceMappingURL=index.js.map

dist/esm/Diagnostic.css.js

@@ -1,1 +0,1 @@
-module.exports = {"diagnostic":"Diagnostic-diagnostic-cc160c9","icon":"Diagnostic-icon-c0a40f6","iconError":"Diagnostic-iconError-a423738","iconWarning":"Diagnostic-iconWarning-689c15f","message":"Diagnostic-message-af8ae7d","wrapper":"Diagnostic-wrapper-ca08f57","wrapperError":"Diagnostic-wrapperError-1d36020","wrapperWarning":"Diagnostic-wrapperWarning-ae0a4f7","line":"Diagnostic-line-64f4c5d","lineError":"Diagnostic-lineError-9347e89","lineWarning":"Diagnostic-lineWarning-e45d2e7","dark":"Diagnostic-dark-c6672db","chrome":"Diagnostic-chrome-01ce558","light":"Diagnostic-light-12c91ea"};
+export default {"diagnostic":"Diagnostic-diagnostic-4348aaa","icon":"Diagnostic-icon-36ff581","iconError":"Diagnostic-iconError-ce52bb0","iconWarning":"Diagnostic-iconWarning-682aff9","message":"Diagnostic-message-a8cb13d","wrapper":"Diagnostic-wrapper-b730b0d","wrapperError":"Diagnostic-wrapperError-82a0e13","wrapperWarning":"Diagnostic-wrapperWarning-4a4313c","line":"Diagnostic-line-e6373ec","lineError":"Diagnostic-lineError-bf08fff","lineWarning":"Diagnostic-lineWarning-dcfc408","dark":"Diagnostic-dark-204325d","chrome":"Diagnostic-chrome-a2cfed1","light":"Diagnostic-light-6481bb3"};

dist/esm/index.js

@@ -1,3 +0,108 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React from"react";import{useTheme}from"@devtools-ds/themes";import makeClass from"clsx";import{useId}from"@reach/auto-id";import{VisuallyHidden}from"@reach/visually-hidden";import{ConsoleErrorIcon,WarningIcon}from"@devtools-ds/icon";import{DiagnosticSeverity}from"vscode-languageserver-types";import styles from"./Diagnostic.css";export const transformLanguageServer=severity=>{return severity===DiagnosticSeverity.Error?"error":"warning"};export const Lines=props=>{const l=props.lines.map(line=>{const s=makeClass(styles.line,{[styles.lineError]:line.highlight&&props.severity==="error",[styles.lineWarning]:line.highlight&&props.severity==="warning"});const caret=line.highlight?"> ":"  ";return React.createElement("code",{key:line.number,className:s},`${caret}${line.number}| ${line.content}\n`)});return React.createElement(React.Fragment,null,l)};export const generateDescription=(lines,severity,message)=>{const a=severity==="error"?"An":"A";let description=`${a} ${severity} was found in a block of ${lines.length} lines of code. `;if(message)description+=`The ${severity} message is "${message}". `;if(lines.length>1){description+=`Lines ${lines[0].number} through ${lines[lines.length-1].number} are shown. `;const highlighted=lines.filter(line=>line.highlight===true);if(highlighted.length===1){description+=`Line ${highlighted[0].number} (${highlighted[0].content}) is highlighted.`}if(highlighted.length>1){const numbers=highlighted.map(line=>line.number.toString());description+=`Lines ${numbers.join(", ")} are highlighted.`}}return description};export const Diagnostic=props=>{const{severity,lines,theme,colorScheme,className,message}=props,html=_objectWithoutProperties(props,["severity","lines","theme","colorScheme","className","message"]);const{themeClass}=useTheme({theme,colorScheme},styles);const captionId=`diagnostic-caption-${useId()}`;const isError=severity==="error";const isWarning=severity==="warning";const iconStyles=makeClass(styles.icon,{[styles.iconError]:isError,[styles.iconWarning]:isWarning});const lineStyles=makeClass(styles.wrapper,{[styles.wrapperError]:isError,[styles.wrapperWarning]:isWarning});const Icon=isError?ConsoleErrorIcon:WarningIcon;return React.createElement("figure",_extends({role:"img","aria-labelledby":captionId,className:makeClass(styles.diagnostic,themeClass,className)},html),message&&React.createElement(React.Fragment,null,React.createElement(Icon,{inline:true,className:iconStyles}),React.createElement("span",{className:styles.message},message)),React.createElement("pre",{className:lineStyles},React.createElement(Lines,{lines:lines,severity:severity})),React.createElement(VisuallyHidden,null,React.createElement("figcaption",{id:captionId},generateDescription(lines,severity,message))))};Diagnostic.defaultProps={severity:"warning"};
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["severity", "lines", "theme", "colorScheme", "className", "message"];
+import React from "react";
+import { useTheme } from "@devtools-ds/themes";
+import makeClass from "clsx";
+import { useId } from "@reach/auto-id";
+import { VisuallyHidden } from "@reach/visually-hidden";
+import { ConsoleErrorIcon, WarningIcon } from "@devtools-ds/icon";
+import { DiagnosticSeverity } from "vscode-languageserver-types";
+import styles from "./Diagnostic.css";
+
+/** A function to automatically convert Language Server severity */
+export const transformLanguageServer = severity => {
+  return severity === DiagnosticSeverity.Error ? "error" : "warning";
+};
+/** Create the list of lines */
+export const Lines = props => {
+  const l = props.lines.map(line => {
+    const s = makeClass(styles.line, {
+      [styles.lineError]: line.highlight && props.severity === "error",
+      [styles.lineWarning]: line.highlight && props.severity === "warning"
+    });
+    const caret = line.highlight ? "> " : "  ";
+    return /*#__PURE__*/React.createElement("code", {
+      key: line.number,
+      className: s
+    }, `${caret}${line.number}| ${line.content}\n`);
+  });
+
+  // https://github.com/yannickcr/eslint-plugin-react/issues/2512
+  // eslint-disable-next-line
+  return /*#__PURE__*/React.createElement(React.Fragment, null, l);
+};
+
+/**
+ * Generate a screen-reader friendly description of the error.
+ */
+export const generateDescription = (lines, severity, message) => {
+  const a = severity === "error" ? "An" : "A";
+  let description = `${a} ${severity} was found in a block of ${lines.length} lines of code. `;
+  if (message) description += `The ${severity} message is "${message}". `;
+  if (lines.length > 1) {
+    description += `Lines ${lines[0].number} through ${lines[lines.length - 1].number} are shown. `;
+    const highlighted = lines.filter(line => line.highlight === true);
+    if (highlighted.length === 1) {
+      description += `Line ${highlighted[0].number} (${highlighted[0].content}) is highlighted.`;
+    }
+    if (highlighted.length > 1) {
+      const numbers = highlighted.map(line => line.number.toString());
+      description += `Lines ${numbers.join(", ")} are highlighted.`;
+    }
+  }
+  return description;
+};
+
+/** A component for displaying diagnostic stack traces. */
+export const Diagnostic = props => {
+  const {
+      severity,
+      lines,
+      theme,
+      colorScheme,
+      className,
+      message
+    } = props,
+    html = _objectWithoutProperties(props, _excluded);
+  const {
+    themeClass
+  } = useTheme({
+    theme,
+    colorScheme
+  }, styles);
+  const captionId = `diagnostic-caption-${useId()}`;
+  const isError = severity === "error";
+  const isWarning = severity === "warning";
+  const iconStyles = makeClass(styles.icon, {
+    [styles.iconError]: isError,
+    [styles.iconWarning]: isWarning
+  });
+  const lineStyles = makeClass(styles.wrapper, {
+    [styles.wrapperError]: isError,
+    [styles.wrapperWarning]: isWarning
+  });
+  const Icon = isError ? ConsoleErrorIcon : WarningIcon;
+  return /*#__PURE__*/React.createElement("figure", _extends({
+    role: "img",
+    "aria-labelledby": captionId,
+    className: makeClass(styles.diagnostic, themeClass, className)
+  }, html), message && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    inline: true,
+    className: iconStyles
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.message
+  }, message)), /*#__PURE__*/React.createElement("pre", {
+    className: lineStyles
+  }, /*#__PURE__*/React.createElement(Lines, {
+    lines: lines,
+    severity: severity
+  })), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("figcaption", {
+    id: captionId
+  }, generateDescription(lines, severity, message))));
+};
+Diagnostic.defaultProps = {
+  severity: "warning"
+};
 //# sourceMappingURL=index.js.map
 import "../main.css";

package.json

 {
   "name": "@devtools-ds/diagnostic",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "./dist/cjs/index.js",
@@ -34,4 +34,4 @@ "module": "./dist/esm/index.js",
     "@babel/runtime": "7.7.2",
-    "@devtools-ds/icon": "^1.2.0",
-    "@devtools-ds/themes": "^1.2.0",
+    "@devtools-ds/icon": "^1.2.1",
+    "@devtools-ds/themes": "^1.2.1",
     "@reach/auto-id": "0.12.1",
@@ -58,3 +58,3 @@ "@reach/visually-hidden": "0.12.0",
   },
-  "gitHead": "66f7d45baeabc9552acb25e3b3ebe28c8bb20d4f"
+  "gitHead": "53e5c67af2fa62f8044be93fb6e2af8573988aa4"
 }

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53100

increased by4.11%

Lines of code

604

increased by44.84%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• Updated@devtools-ds/icon@^1.2.1

• Updated@devtools-ds/themes@^1.2.1