@ms-cloudpack/overlay 0.19.3 → 0.19.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -64,7 +64,9 @@ function processStatus(cpStatus, pltReport) {
64
64
  // "Number of tasks" is likely not a meaningful metric for users (and doesn't strictly correspond to
65
65
  // number of packages), so just show either estimated percentage or "completed" plus any issue counts.
66
66
  const taskStats = [
67
- remainingTasks === 0 ? 'completed' : `${(remainingTasks / totalTasks).toFixed(1)}% completed`,
67
+ remainingTasks === 0
68
+ ? 'completed'
69
+ : `${(((totalTasks - remainingTasks) / totalTasks) * 100).toFixed(1)}% completed`,
68
70
  totalErrors && `${totalErrors} error${totalErrors > 1 ? 's' : ''}`,
69
71
  totalWarnings && `${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`,
70
72
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport styles from './StatusBadge.module.css';\nimport cx from 'classnames';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { elementIds } from '../../constants.js';\nimport type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';\nimport { Button } from '../Button/Button.js';\n\nexport interface StatusBadgeProps {\n onExpand: () => void;\n pageLoadTimeReport: PageLoadTimeReport;\n}\n\nconst badgeStatusKey = 'cloudpack.badgeStatus';\nconst leftChevron = '\\u00AB';\nconst rightChevron = '\\u00BB';\nconst buttonHint = '(see details)';\nconst buttonHelp = 'Show bundle result details';\n\nexport const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ onExpand, pageLoadTimeReport }) => {\n const rootElementRef = useRef<HTMLDivElement>(null);\n const dragElementRef = useRef<HTMLDivElement>(null);\n const status = useStatus();\n const [isCollapsed, setIsCollapsed] = useState<boolean>(!!localStorage.getItem(badgeStatusKey));\n\n const shouldRender = status.status !== 'unknown';\n\n const toggleBadgeVisibility = useCallback(() => {\n const newCollapsedState = !isCollapsed;\n setIsCollapsed(newCollapsedState);\n localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');\n }, [isCollapsed]);\n\n useDraggable({\n // If we're not yet able to render, don't enable dragging yet.\n // Otherwise the event handlers won't be attached when the component renders.\n enabled: shouldRender,\n containerElementRef: rootElementRef,\n dragElementRef,\n });\n\n if (!shouldRender) {\n return null;\n }\n\n const { buttonStatusText, statusClass, statsText } = processStatus(status, pageLoadTimeReport);\n // WARNING: If you change this text, also update the `name` used to find the button in\n // apps/test-start-e2e/src/utilities/verifyOverlay.ts\n const buttonText = 'Cloudpack: ' + buttonStatusText;\n const buttonAriaLabel = `${buttonText.replace(buttonHint, '')}. ${buttonHelp}`;\n const collapseButtonText = isCollapsed ? 'Expand Cloudpack badge' : 'Collapse';\n\n const badge = (\n <div\n id={elementIds.statusBadgeRoot}\n ref={rootElementRef}\n class={cx(styles.badge, isCollapsed && styles.collapsed, statusClass)}\n >\n <div ref={dragElementRef} class={styles.gripArea} aria-hidden>\n <div class={styles.grip} />\n <div class={styles.grip} />\n </div>\n <Button variant=\"custom\" class={styles.button} onClick={onExpand} title={buttonHelp} aria-label={buttonAriaLabel}>\n <div class={styles.buttonText}>{buttonText}</div>\n </Button>\n <div>{statsText}</div>\n <Button\n variant=\"custom\"\n class={cx(styles.button, styles.chevron)}\n onClick={toggleBadgeVisibility}\n title={collapseButtonText}\n aria-label={collapseButtonText}\n >\n {isCollapsed ? leftChevron : rightChevron}\n </Button>\n </div>\n );\n\n return (\n <div class={styles.fixedOverlay}>\n <div class={styles.contentSurface}>{badge}</div>\n </div>\n );\n};\n\n/**\n * Based on the status, get the badge color, button text, and stats text.\n */\nfunction processStatus(\n cpStatus: CloudpackStatus,\n pltReport: PageLoadTimeReport,\n): {\n /** class (color) for the badge root */\n statusClass: string | undefined;\n /** short status text for the button to open the overlay */\n buttonStatusText: string;\n /** stats to display after the button, like \"50% completed, 2 errors, 3 warnings in 500ms\" */\n statsText: string;\n} {\n const { status, totalTasks, remainingTasks, totalErrors, totalWarnings } = cpStatus;\n\n let statusClass: string | undefined;\n let buttonStatusText: string;\n let statsText = '';\n\n if (status === 'idle' && totalTasks) {\n [statusClass, buttonStatusText] = totalErrors\n ? [styles.error, `errors ${buttonHint}`]\n : totalWarnings\n ? [styles.warning, `warnings ${buttonHint}`]\n : [styles.success, 'success'];\n } else {\n // no styling for this case\n buttonStatusText = status === 'pending' ? 'bundling...' : 'idle';\n }\n\n if (totalTasks) {\n // \"Number of tasks\" is likely not a meaningful metric for users (and doesn't strictly correspond to\n // number of packages), so just show either estimated percentage or \"completed\" plus any issue counts.\n const taskStats = [\n remainingTasks === 0 ? 'completed' : `${(remainingTasks / totalTasks).toFixed(1)}% completed`,\n totalErrors && `${totalErrors} error${totalErrors > 1 ? 's' : ''}`,\n totalWarnings && `${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`,\n ]\n .filter(Boolean)\n .join(', ');\n\n const pltStat = pltReport.status === 'success' ? ` in ${Math.round(pltReport.pageLoadTime) ?? '??'}ms` : '';\n\n statsText = taskStats + pltStat;\n }\n\n return { statusClass, buttonStatusText, statsText };\n}\n"]}
1
+ {"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAO7C,MAAM,cAAc,GAAG,uBAAuB,CAAC;AAC/C,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC7B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAC9B,MAAM,UAAU,GAAG,eAAe,CAAC;AACnC,MAAM,UAAU,GAAG,4BAA4B,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAwC,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,EAAE;IACnG,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;IAEhG,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC;IAEjD,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,iBAAiB,GAAG,CAAC,WAAW,CAAC;QACvC,cAAc,CAAC,iBAAiB,CAAC,CAAC;QAClC,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,YAAY,CAAC;QACX,8DAA8D;QAC9D,6EAA6E;QAC7E,OAAO,EAAE,YAAY;QACrB,mBAAmB,EAAE,cAAc;QACnC,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,EAAE,gBAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC/F,sFAAsF;IACtF,qDAAqD;IACrD,MAAM,UAAU,GAAG,aAAa,GAAG,gBAAgB,CAAC;IACpD,MAAM,eAAe,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,KAAK,UAAU,EAAE,CAAC;IAC/E,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,UAAU,CAAC;IAE/E,MAAM,KAAK,GAAG,CACZ,eACE,EAAE,EAAE,UAAU,CAAC,eAAe,EAC9B,GAAG,EAAE,cAAc,EACnB,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,aAErE,eAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,kCAC9C,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,GAAI,EAC3B,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,GAAI,IACvB,EACN,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,gBAAc,eAAe,YAC9G,cAAK,KAAK,EAAE,MAAM,CAAC,UAAU,YAAG,UAAU,GAAO,GAC1C,EACT,wBAAM,SAAS,GAAO,EACtB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EACxC,OAAO,EAAE,qBAAqB,EAC9B,KAAK,EAAE,kBAAkB,gBACb,kBAAkB,YAE7B,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAClC,IACL,CACP,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,MAAM,CAAC,YAAY,YAC7B,cAAK,KAAK,EAAE,MAAM,CAAC,cAAc,YAAG,KAAK,GAAO,GAC5C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,SAAS,aAAa,CACpB,QAAyB,EACzB,SAA6B;IAS7B,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;IAEpF,IAAI,WAA+B,CAAC;IACpC,IAAI,gBAAwB,CAAC;IAC7B,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,MAAM,KAAK,MAAM,IAAI,UAAU,EAAE,CAAC;QACpC,CAAC,WAAW,EAAE,gBAAgB,CAAC,GAAG,WAAW;YAC3C,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,UAAU,EAAE,CAAC;YACxC,CAAC,CAAC,aAAa;gBACb,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,UAAU,EAAE,CAAC;gBAC5C,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACpC,CAAC;SAAM,CAAC;QACN,2BAA2B;QAC3B,gBAAgB,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;IACnE,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,oGAAoG;QACpG,sGAAsG;QACtG,MAAM,SAAS,GAAG;YAChB,cAAc,KAAK,CAAC;gBAClB,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,GAAG,cAAc,CAAC,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;YACnF,WAAW,IAAI,GAAG,WAAW,SAAS,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAClE,aAAa,IAAI,GAAG,aAAa,WAAW,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;SAC3E;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QAE5G,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClC,CAAC;IAED,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC;AACtD,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport styles from './StatusBadge.module.css';\nimport cx from 'classnames';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { elementIds } from '../../constants.js';\nimport type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';\nimport { Button } from '../Button/Button.js';\n\nexport interface StatusBadgeProps {\n onExpand: () => void;\n pageLoadTimeReport: PageLoadTimeReport;\n}\n\nconst badgeStatusKey = 'cloudpack.badgeStatus';\nconst leftChevron = '\\u00AB';\nconst rightChevron = '\\u00BB';\nconst buttonHint = '(see details)';\nconst buttonHelp = 'Show bundle result details';\n\nexport const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ onExpand, pageLoadTimeReport }) => {\n const rootElementRef = useRef<HTMLDivElement>(null);\n const dragElementRef = useRef<HTMLDivElement>(null);\n const status = useStatus();\n const [isCollapsed, setIsCollapsed] = useState<boolean>(!!localStorage.getItem(badgeStatusKey));\n\n const shouldRender = status.status !== 'unknown';\n\n const toggleBadgeVisibility = useCallback(() => {\n const newCollapsedState = !isCollapsed;\n setIsCollapsed(newCollapsedState);\n localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');\n }, [isCollapsed]);\n\n useDraggable({\n // If we're not yet able to render, don't enable dragging yet.\n // Otherwise the event handlers won't be attached when the component renders.\n enabled: shouldRender,\n containerElementRef: rootElementRef,\n dragElementRef,\n });\n\n if (!shouldRender) {\n return null;\n }\n\n const { buttonStatusText, statusClass, statsText } = processStatus(status, pageLoadTimeReport);\n // WARNING: If you change this text, also update the `name` used to find the button in\n // apps/test-start-e2e/src/utilities/verifyOverlay.ts\n const buttonText = 'Cloudpack: ' + buttonStatusText;\n const buttonAriaLabel = `${buttonText.replace(buttonHint, '')}. ${buttonHelp}`;\n const collapseButtonText = isCollapsed ? 'Expand Cloudpack badge' : 'Collapse';\n\n const badge = (\n <div\n id={elementIds.statusBadgeRoot}\n ref={rootElementRef}\n class={cx(styles.badge, isCollapsed && styles.collapsed, statusClass)}\n >\n <div ref={dragElementRef} class={styles.gripArea} aria-hidden>\n <div class={styles.grip} />\n <div class={styles.grip} />\n </div>\n <Button variant=\"custom\" class={styles.button} onClick={onExpand} title={buttonHelp} aria-label={buttonAriaLabel}>\n <div class={styles.buttonText}>{buttonText}</div>\n </Button>\n <div>{statsText}</div>\n <Button\n variant=\"custom\"\n class={cx(styles.button, styles.chevron)}\n onClick={toggleBadgeVisibility}\n title={collapseButtonText}\n aria-label={collapseButtonText}\n >\n {isCollapsed ? leftChevron : rightChevron}\n </Button>\n </div>\n );\n\n return (\n <div class={styles.fixedOverlay}>\n <div class={styles.contentSurface}>{badge}</div>\n </div>\n );\n};\n\n/**\n * Based on the status, get the badge color, button text, and stats text.\n */\nfunction processStatus(\n cpStatus: CloudpackStatus,\n pltReport: PageLoadTimeReport,\n): {\n /** class (color) for the badge root */\n statusClass: string | undefined;\n /** short status text for the button to open the overlay */\n buttonStatusText: string;\n /** stats to display after the button, like \"50% completed, 2 errors, 3 warnings in 500ms\" */\n statsText: string;\n} {\n const { status, totalTasks, remainingTasks, totalErrors, totalWarnings } = cpStatus;\n\n let statusClass: string | undefined;\n let buttonStatusText: string;\n let statsText = '';\n\n if (status === 'idle' && totalTasks) {\n [statusClass, buttonStatusText] = totalErrors\n ? [styles.error, `errors ${buttonHint}`]\n : totalWarnings\n ? [styles.warning, `warnings ${buttonHint}`]\n : [styles.success, 'success'];\n } else {\n // no styling for this case\n buttonStatusText = status === 'pending' ? 'bundling...' : 'idle';\n }\n\n if (totalTasks) {\n // \"Number of tasks\" is likely not a meaningful metric for users (and doesn't strictly correspond to\n // number of packages), so just show either estimated percentage or \"completed\" plus any issue counts.\n const taskStats = [\n remainingTasks === 0\n ? 'completed'\n : `${(((totalTasks - remainingTasks) / totalTasks) * 100).toFixed(1)}% completed`,\n totalErrors && `${totalErrors} error${totalErrors > 1 ? 's' : ''}`,\n totalWarnings && `${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`,\n ]\n .filter(Boolean)\n .join(', ');\n\n const pltStat = pltReport.status === 'success' ? ` in ${Math.round(pltReport.pageLoadTime) ?? '??'}ms` : '';\n\n statsText = taskStats + pltStat;\n }\n\n return { statusClass, buttonStatusText, statsText };\n}\n"]}
@@ -20,7 +20,7 @@ export const TaskResultItem = (props) => {
20
20
  const friendlySource = bundlerNames.includes(item.source) ? `${item.source} bundler` : `cloudpack ${item.source}`;
21
21
  return (_jsxs("div", { class: styles.root, children: [_jsx("div", { class: cx(styles.statusBar, type === 'warning' && styles.warning) }), _jsxs("div", { class: styles.content, children: [_jsxs("div", { class: styles.titleArea, children: [index + 1, ". ", _jsx(ItemLocation, { loc: loc, inputPath: inputPath }), " (via: ", friendlySource, ")"] }), _jsx("pre", { class: styles.text, children: stripAnsi(item.text) }), notes.length > 0 && (
22
22
  // Formatting here might not be ideal, but messages very rarely have notes
23
- _jsxs("details", { children: [_jsx("summary", { children: "Expand for more details" }), _jsx("ul", { children: notes.map((note, i) => (_jsx("li", { children: note.location && (_jsxs(_Fragment, { children: [_jsx(ItemLocation, { loc: note.location, inputPath: inputPath }), _jsx("br", {}), _jsx("pre", { class: styles.text, children: stripAnsi(note.text) })] })) }, i))) })] }))] })] }));
23
+ _jsxs("details", { children: [_jsx("summary", { children: "Expand for more details" }), _jsx("ul", { children: notes.map((note, i) => (_jsxs("li", { children: [note.location && (_jsxs(_Fragment, { children: [_jsx(ItemLocation, { loc: note.location, inputPath: inputPath }), _jsx("br", {})] })), note.text && _jsx("pre", { class: styles.text, children: stripAnsi(note.text) })] }, i))) })] }))] })] }));
24
24
  };
25
25
  /**
26
26
  * Remove ANSI codes from a string. (This is duplicated from `task-reporter` to avoid needing
@@ -40,7 +40,10 @@ const ItemLocation = (props) => {
40
40
  return '(path unavailable)';
41
41
  }
42
42
  const locationString = [loc.file, loc.line, loc.column].filter((val) => val !== undefined).join(':');
43
- if (!inputPath) {
43
+ // Don't make it clickable if we don't know the root path, or if the file path contains
44
+ // webpack loader stuff. A real example:
45
+ // ../../node_modules/.store/css-loader-virtual-bfb2cc7933/package/dist/cjs.js??ruleSet[1].rules[5].oneOf[0].use[1]!../../node_modules/.store/sass-loader-virtual-65ccb5bf2d/package/dist/cjs.js!./src/cssTest/example4.global.scss
46
+ if (!inputPath || /[?!]/.test(locationString)) {
44
47
  return locationString;
45
48
  }
46
49
  const openSource = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"TaskResultItem.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskResultItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { BundleMessage, BundleMessageLocation } from '@ms-cloudpack/common-types';\nimport type { FunctionComponent } from 'preact';\nimport cx from 'classnames';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport styles from './TaskResultItem.module.css';\nimport { Button } from '../Button/Button.js';\n\nexport interface TaskResultItemProps {\n item: BundleMessage;\n inputPath: string | undefined;\n /** 0-based index (will be adjusted for display) */\n index: number;\n type: 'error' | 'warning';\n}\n\n/**\n * Current and possible future bundler names, just to help with a friendlier error message\n * (we can't access the authoritative list from the bundler package here)\n */\nconst bundlerNames = ['ori', 'rollup', 'webpack', 'rspack', 'esbuild'];\n\n/**\n * Error or warning item in the details of a task/bundle result.\n */\nexport const TaskResultItem: FunctionComponent<TaskResultItemProps> = (props) => {\n const { item, inputPath, index, type } = props;\n const { location: loc, notes = [] } = item;\n\n // Update the message source to be more user-friendly. Usually it's either a bundler name,\n // or some internal of cloudpack, and since the user might not know about the different bundlers\n // and certainly doesn't know about cloudpack internals, a bit of context is helpful.\n const friendlySource = bundlerNames.includes(item.source) ? `${item.source} bundler` : `cloudpack ${item.source}`;\n\n return (\n <div class={styles.root}>\n <div class={cx(styles.statusBar, type === 'warning' && styles.warning)}></div>\n <div class={styles.content}>\n <div class={styles.titleArea}>\n {index + 1}. <ItemLocation loc={loc} inputPath={inputPath} /> (via: {friendlySource})\n </div>\n <pre class={styles.text}>{stripAnsi(item.text)}</pre>\n {notes.length > 0 && (\n // Formatting here might not be ideal, but messages very rarely have notes\n <details>\n <summary>Expand for more details</summary>\n <ul>\n {notes.map((note, i) => (\n <li key={i}>\n {note.location && (\n <>\n <ItemLocation loc={note.location} inputPath={inputPath} />\n <br />\n <pre class={styles.text}>{stripAnsi(note.text)}</pre>\n </>\n )}\n </li>\n ))}\n </ul>\n </details>\n )}\n </div>\n </div>\n );\n};\n\n/**\n * Remove ANSI codes from a string. (This is duplicated from `task-reporter` to avoid needing\n * browser support in that package, since the implementation is trivial.)\n */\nfunction stripAnsi(text: string): string {\n // eslint-disable-next-line no-control-regex -- supposed to match a control character\n return text.replace(/\\x1b\\[[\\d;]+(m|[AKB]\\b)/g, '');\n}\n\n/**\n * Return a link-button to open the source file, or a placeholder if the location is undefined.\n */\nconst ItemLocation: FunctionComponent<{ loc: BundleMessageLocation | undefined; inputPath: string | undefined }> = (\n props,\n) => {\n const { loc, inputPath } = props;\n const cloudpack = useCloudpack();\n\n if (!loc) {\n return '(path unavailable)';\n }\n\n const locationString = [loc.file, loc.line, loc.column].filter((val) => val !== undefined).join(':');\n if (!inputPath) {\n return locationString;\n }\n\n const openSource = (): void => {\n if (!inputPath) return;\n void cloudpack.openCodeEditor.mutate({\n rootPath: inputPath,\n relativePath: loc.file,\n line: loc.line,\n column: loc.column,\n });\n };\n\n return (\n <Button variant=\"link\" onClick={openSource}>\n {locationString}\n </Button>\n );\n};\n"]}
1
+ {"version":3,"file":"TaskResultItem.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskResultItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { BundleMessage, BundleMessageLocation } from '@ms-cloudpack/common-types';\nimport type { FunctionComponent } from 'preact';\nimport cx from 'classnames';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport styles from './TaskResultItem.module.css';\nimport { Button } from '../Button/Button.js';\n\nexport interface TaskResultItemProps {\n item: BundleMessage;\n inputPath: string | undefined;\n /** 0-based index (will be adjusted for display) */\n index: number;\n type: 'error' | 'warning';\n}\n\n/**\n * Current and possible future bundler names, just to help with a friendlier error message\n * (we can't access the authoritative list from the bundler package here)\n */\nconst bundlerNames = ['ori', 'rollup', 'webpack', 'rspack', 'esbuild'];\n\n/**\n * Error or warning item in the details of a task/bundle result.\n */\nexport const TaskResultItem: FunctionComponent<TaskResultItemProps> = (props) => {\n const { item, inputPath, index, type } = props;\n const { location: loc, notes = [] } = item;\n\n // Update the message source to be more user-friendly. Usually it's either a bundler name,\n // or some internal of cloudpack, and since the user might not know about the different bundlers\n // and certainly doesn't know about cloudpack internals, a bit of context is helpful.\n const friendlySource = bundlerNames.includes(item.source) ? `${item.source} bundler` : `cloudpack ${item.source}`;\n\n return (\n <div class={styles.root}>\n <div class={cx(styles.statusBar, type === 'warning' && styles.warning)}></div>\n <div class={styles.content}>\n <div class={styles.titleArea}>\n {index + 1}. <ItemLocation loc={loc} inputPath={inputPath} /> (via: {friendlySource})\n </div>\n <pre class={styles.text}>{stripAnsi(item.text)}</pre>\n {notes.length > 0 && (\n // Formatting here might not be ideal, but messages very rarely have notes\n <details>\n <summary>Expand for more details</summary>\n <ul>\n {notes.map((note, i) => (\n <li key={i}>\n {note.location && (\n <>\n <ItemLocation loc={note.location} inputPath={inputPath} />\n <br />\n </>\n )}\n {note.text && <pre class={styles.text}>{stripAnsi(note.text)}</pre>}\n </li>\n ))}\n </ul>\n </details>\n )}\n </div>\n </div>\n );\n};\n\n/**\n * Remove ANSI codes from a string. (This is duplicated from `task-reporter` to avoid needing\n * browser support in that package, since the implementation is trivial.)\n */\nfunction stripAnsi(text: string): string {\n // eslint-disable-next-line no-control-regex -- supposed to match a control character\n return text.replace(/\\x1b\\[[\\d;]+(m|[AKB]\\b)/g, '');\n}\n\n/**\n * Return a link-button to open the source file, or a placeholder if the location is undefined.\n */\nconst ItemLocation: FunctionComponent<{ loc: BundleMessageLocation | undefined; inputPath: string | undefined }> = (\n props,\n) => {\n const { loc, inputPath } = props;\n const cloudpack = useCloudpack();\n\n if (!loc) {\n return '(path unavailable)';\n }\n\n const locationString = [loc.file, loc.line, loc.column].filter((val) => val !== undefined).join(':');\n // Don't make it clickable if we don't know the root path, or if the file path contains\n // webpack loader stuff. A real example:\n // ../../node_modules/.store/css-loader-virtual-bfb2cc7933/package/dist/cjs.js??ruleSet[1].rules[5].oneOf[0].use[1]!../../node_modules/.store/sass-loader-virtual-65ccb5bf2d/package/dist/cjs.js!./src/cssTest/example4.global.scss\n if (!inputPath || /[?!]/.test(locationString)) {\n return locationString;\n }\n\n const openSource = (): void => {\n if (!inputPath) return;\n void cloudpack.openCodeEditor.mutate({\n rootPath: inputPath,\n relativePath: loc.file,\n line: loc.line,\n column: loc.column,\n });\n };\n\n return (\n <Button variant=\"link\" onClick={openSource}>\n {locationString}\n </Button>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ms-cloudpack/overlay",
3
- "version": "0.19.3",
3
+ "version": "0.19.5",
4
4
  "description": "The Cloudpack overlay ux.",
5
5
  "license": "MIT",
6
6
  "types": "./lib/index.d.ts",
@@ -29,9 +29,9 @@
29
29
  "prepack": "cp .npmignore dist/.npmignore"
30
30
  },
31
31
  "devDependencies": {
32
- "@ms-cloudpack/api-server": "^0.63.5",
33
- "@ms-cloudpack/common-types": "^0.24.19",
34
- "@ms-cloudpack/common-types-browser": "^0.6.0",
32
+ "@ms-cloudpack/api-server": "^0.63.7",
33
+ "@ms-cloudpack/common-types": "^0.24.20",
34
+ "@ms-cloudpack/common-types-browser": "^0.6.1",
35
35
  "@ms-cloudpack/eslint-plugin-internal": "^0.0.1",
36
36
  "@ms-cloudpack/path-string-parsing": "^1.2.7",
37
37
  "@ms-cloudpack/scripts": "^0.0.1",
@@ -39,7 +39,7 @@
39
39
  "preact": "^10.26.8"
40
40
  },
41
41
  "files": [
42
- "lib",
42
+ "lib/**/!(*.test.*)",
43
43
  "dist"
44
44
  ]
45
45
  }