@ms-cloudpack/overlay 0.18.3 → 0.19.1

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.
Files changed (97) hide show
  1. package/README.md +2 -0
  2. package/dist/browser-esm/173.chunk.js +2 -0
  3. package/dist/browser-esm/{318.chunk.js.map → 173.chunk.js.map} +1 -1
  4. package/dist/browser-esm/240.chunk.js +1 -1
  5. package/dist/browser-esm/240.chunk.js.map +1 -1
  6. package/dist/browser-esm/31.chunk.js +2 -0
  7. package/dist/browser-esm/31.chunk.js.map +1 -0
  8. package/dist/browser-esm/570.chunk.js +2 -0
  9. package/dist/browser-esm/570.chunk.js.map +1 -0
  10. package/dist/browser-esm/lib/index.js +1 -1
  11. package/dist/browser-esm/lib/index.js.LICENSE.txt +0 -30
  12. package/dist/browser-esm/lib/index.js.map +1 -1
  13. package/lib/components/Button/Button.d.ts +26 -4
  14. package/lib/components/Button/Button.d.ts.map +1 -1
  15. package/lib/components/Button/Button.js +27 -4
  16. package/lib/components/Button/Button.js.map +1 -1
  17. package/lib/components/CloudpackProvider/CloudpackProvider.d.ts +4 -3
  18. package/lib/components/CloudpackProvider/CloudpackProvider.d.ts.map +1 -1
  19. package/lib/components/CloudpackProvider/CloudpackProvider.js +4 -2
  20. package/lib/components/CloudpackProvider/CloudpackProvider.js.map +1 -1
  21. package/lib/components/CloudpackProvider/useStatus.js +1 -1
  22. package/lib/components/CloudpackProvider/useStatus.js.map +1 -1
  23. package/lib/components/CloudpackProvider/useStatusDetails.js +1 -1
  24. package/lib/components/CloudpackProvider/useStatusDetails.js.map +1 -1
  25. package/lib/components/Dialog/Dialog.d.ts +4 -4
  26. package/lib/components/Dialog/Dialog.d.ts.map +1 -1
  27. package/lib/components/Dialog/Dialog.js +9 -13
  28. package/lib/components/Dialog/Dialog.js.map +1 -1
  29. package/lib/components/ErrorDialog/ErrorDialog.d.ts +2 -2
  30. package/lib/components/ErrorDialog/ErrorDialog.d.ts.map +1 -1
  31. package/lib/components/ErrorDialog/ErrorDialog.js +4 -5
  32. package/lib/components/ErrorDialog/ErrorDialog.js.map +1 -1
  33. package/lib/components/ErrorDialog/PathError.d.ts +6 -2
  34. package/lib/components/ErrorDialog/PathError.d.ts.map +1 -1
  35. package/lib/components/ErrorDialog/PathError.js +14 -36
  36. package/lib/components/ErrorDialog/PathError.js.map +1 -1
  37. package/lib/components/ErrorDialog/useErrorEvents.d.ts +9 -0
  38. package/lib/components/ErrorDialog/useErrorEvents.d.ts.map +1 -1
  39. package/lib/components/ErrorDialog/useErrorEvents.js +30 -5
  40. package/lib/components/ErrorDialog/useErrorEvents.js.map +1 -1
  41. package/lib/components/Overlay/Overlay.d.ts +3 -0
  42. package/lib/components/Overlay/Overlay.d.ts.map +1 -0
  43. package/lib/components/{StatusOverlay/StatusOverlay.js → Overlay/Overlay.js} +10 -8
  44. package/lib/components/Overlay/Overlay.js.map +1 -0
  45. package/lib/components/ResultsAccordion/ResultsAccordion.d.ts +40 -0
  46. package/lib/components/ResultsAccordion/ResultsAccordion.d.ts.map +1 -0
  47. package/lib/components/ResultsAccordion/ResultsAccordion.js +43 -0
  48. package/lib/components/ResultsAccordion/ResultsAccordion.js.map +1 -0
  49. package/lib/components/StatusBadge/StatusBadge.d.ts +3 -5
  50. package/lib/components/StatusBadge/StatusBadge.d.ts.map +1 -1
  51. package/lib/components/StatusBadge/StatusBadge.js +49 -60
  52. package/lib/components/StatusBadge/StatusBadge.js.map +1 -1
  53. package/lib/components/StatusDialog/Searchbox.d.ts +4 -4
  54. package/lib/components/StatusDialog/Searchbox.d.ts.map +1 -1
  55. package/lib/components/StatusDialog/Searchbox.js +4 -3
  56. package/lib/components/StatusDialog/Searchbox.js.map +1 -1
  57. package/lib/components/StatusDialog/StatusDialog.d.ts +2 -2
  58. package/lib/components/StatusDialog/StatusDialog.d.ts.map +1 -1
  59. package/lib/components/StatusDialog/StatusDialog.js +5 -9
  60. package/lib/components/StatusDialog/StatusDialog.js.map +1 -1
  61. package/lib/components/StatusDialog/TaskList.d.ts +2 -2
  62. package/lib/components/StatusDialog/TaskList.d.ts.map +1 -1
  63. package/lib/components/StatusDialog/TaskList.js +2 -2
  64. package/lib/components/StatusDialog/TaskList.js.map +1 -1
  65. package/lib/components/StatusDialog/TaskResultItem.d.ts +8 -3
  66. package/lib/components/StatusDialog/TaskResultItem.d.ts.map +1 -1
  67. package/lib/components/StatusDialog/TaskResultItem.js +52 -29
  68. package/lib/components/StatusDialog/TaskResultItem.js.map +1 -1
  69. package/lib/components/StatusDialog/TaskStatus.d.ts +7 -3
  70. package/lib/components/StatusDialog/TaskStatus.d.ts.map +1 -1
  71. package/lib/components/StatusDialog/TaskStatus.js +17 -56
  72. package/lib/components/StatusDialog/TaskStatus.js.map +1 -1
  73. package/lib/components/ThemeProvider/ThemeProvider.d.ts +4 -2
  74. package/lib/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
  75. package/lib/components/ThemeProvider/ThemeProvider.js +2 -2
  76. package/lib/components/ThemeProvider/ThemeProvider.js.map +1 -1
  77. package/lib/hooks/useDraggable.d.ts +1 -1
  78. package/lib/hooks/useDraggable.d.ts.map +1 -1
  79. package/lib/hooks/useDraggable.js +1 -1
  80. package/lib/hooks/useDraggable.js.map +1 -1
  81. package/lib/hooks/usePageLoadTimeReporter.js +3 -3
  82. package/lib/hooks/usePageLoadTimeReporter.js.map +1 -1
  83. package/lib/index.js +4 -7
  84. package/lib/index.js.map +1 -1
  85. package/package.json +5 -8
  86. package/dist/browser-esm/119.chunk.js +0 -2
  87. package/dist/browser-esm/119.chunk.js.map +0 -1
  88. package/dist/browser-esm/318.chunk.js +0 -2
  89. package/dist/browser-esm/464.chunk.js +0 -2
  90. package/dist/browser-esm/464.chunk.js.map +0 -1
  91. package/lib/components/StatusOverlay/StatusOverlay.d.ts +0 -3
  92. package/lib/components/StatusOverlay/StatusOverlay.d.ts.map +0 -1
  93. package/lib/components/StatusOverlay/StatusOverlay.js.map +0 -1
  94. package/lib/hooks/preferDarkTheme.d.ts +0 -5
  95. package/lib/hooks/preferDarkTheme.d.ts.map +0 -1
  96. package/lib/hooks/preferDarkTheme.js +0 -7
  97. package/lib/hooks/preferDarkTheme.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { TaskStatus } from './TaskStatus.js';\nimport { useStatusDetails } from '../CloudpackProvider/useStatusDetails.js';\nimport styles from './TaskList.module.css';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\n\nexport interface TaskListProps {\n searchFilter?: string;\n issuesOnly?: boolean;\n}\n\nexport const TaskList: React.FC<TaskListProps> = ({ searchFilter, issuesOnly }) => {\n const details = useStatusDetails();\n const tasks = (details.tasks || []).sort(sortTasks);\n\n let filteredTasks = tasks;\n if (searchFilter) {\n searchFilter = searchFilter.toLowerCase();\n filteredTasks = filteredTasks.filter(({ name }) => searchFilter && name?.toLowerCase().includes(searchFilter));\n }\n if (issuesOnly) {\n filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);\n }\n\n return (\n <div className={styles.root}>\n {filteredTasks.map((task) => (\n <TaskStatus key={task.name} task={task} />\n ))}\n </div>\n );\n};\n\n/**\n * Really the server should be sorting. Get stuff out of the browser.\n */\nfunction sortTasks(a: TaskDescription, b: TaskDescription): number {\n const aStatus = a.status === 'pending' ? 1 : 0;\n const bStatus = b.status === 'pending' ? 1 : 0;\n\n if (aStatus !== bStatus) {\n return aStatus > bStatus ? -1 : 1;\n }\n\n const aErrors = a.errors?.length || 0;\n const bErrors = b.errors?.length || 0;\n\n if (aErrors !== bErrors) {\n return aErrors > bErrors ? -1 : 1;\n }\n\n if (a.name === undefined && b.name === undefined) {\n return a.id < b.id ? -1 : 1;\n } else if (a.name === undefined) {\n return 1;\n } else if (b.name === undefined) {\n return -1;\n }\n\n return a.name < b.name ? -1 : 1;\n}\n"]}
1
+ {"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAQ3C,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE;IACzF,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,aAAa,GAAG,KAAK,CAAC;IAC1B,IAAI,YAAY,EAAE,CAAC;QACjB,YAAY,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;QAC1C,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,IAAI,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;IACjH,CAAC;IACD,IAAI,UAAU,EAAE,CAAC;QACf,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,CAAC,CAAC;IACrG,CAAC;IAED,OAAO,CACL,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,YACpB,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,KAAC,UAAU,IAAiB,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,IAAnC,IAAI,CAAC,IAAI,CAA8B,CACzD,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,SAAS,SAAS,CAAC,CAAkB,EAAE,CAAkB;IACvD,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/C,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAEtC,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;SAAM,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC;IACX,CAAC;SAAM,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IAED,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { TaskStatus } from './TaskStatus.js';\nimport { useStatusDetails } from '../CloudpackProvider/useStatusDetails.js';\nimport styles from './TaskList.module.css';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\n\nexport interface TaskListProps {\n searchFilter?: string;\n issuesOnly?: boolean;\n}\n\nexport const TaskList: FunctionComponent<TaskListProps> = ({ searchFilter, issuesOnly }) => {\n const details = useStatusDetails();\n const tasks = (details.tasks || []).sort(sortTasks);\n\n let filteredTasks = tasks;\n if (searchFilter) {\n searchFilter = searchFilter.toLowerCase();\n filteredTasks = filteredTasks.filter(({ name }) => searchFilter && name?.toLowerCase().includes(searchFilter));\n }\n if (issuesOnly) {\n filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);\n }\n\n return (\n <div class={styles.root}>\n {filteredTasks.map((task, index) => (\n <TaskStatus key={task.name} index={index} task={task} />\n ))}\n </div>\n );\n};\n\n/**\n * Really the server should be sorting. Get stuff out of the browser.\n */\nfunction sortTasks(a: TaskDescription, b: TaskDescription): number {\n const aStatus = a.status === 'pending' ? 1 : 0;\n const bStatus = b.status === 'pending' ? 1 : 0;\n\n if (aStatus !== bStatus) {\n return aStatus > bStatus ? -1 : 1;\n }\n\n const aErrors = a.errors?.length || 0;\n const bErrors = b.errors?.length || 0;\n\n if (aErrors !== bErrors) {\n return aErrors > bErrors ? -1 : 1;\n }\n\n if (a.name === undefined && b.name === undefined) {\n return a.id < b.id ? -1 : 1;\n } else if (a.name === undefined) {\n return 1;\n } else if (b.name === undefined) {\n return -1;\n }\n\n return a.name < b.name ? -1 : 1;\n}\n"]}
@@ -1,9 +1,14 @@
1
1
  import type { BundleMessage } from '@ms-cloudpack/common-types';
2
- import React from 'react';
2
+ import type { FunctionComponent } from 'preact';
3
3
  export interface TaskResultItemProps {
4
4
  item: BundleMessage;
5
- projectPath: string;
5
+ inputPath: string | undefined;
6
+ /** 0-based index (will be adjusted for display) */
6
7
  index: number;
8
+ type: 'error' | 'warning';
7
9
  }
8
- export declare const TaskResultItem: React.FC<TaskResultItemProps>;
10
+ /**
11
+ * Error or warning item in the details of a task/bundle result.
12
+ */
13
+ export declare const TaskResultItem: FunctionComponent<TaskResultItemProps>;
9
14
  //# sourceMappingURL=TaskResultItem.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TaskResultItem.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskResultItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmCxD,CAAC"}
1
+ {"version":3,"file":"TaskResultItem.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskResultItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAyB,MAAM,4BAA4B,CAAC;AACvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMhD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;CAC3B;AAQD;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAuCjE,CAAC"}
@@ -1,35 +1,58 @@
1
- import React from 'react';
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
2
+ import cx from 'classnames';
2
3
  import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
3
4
  import styles from './TaskResultItem.module.css';
4
- export const TaskResultItem = ({ item, projectPath, index }) => {
5
+ import { Button } from '../Button/Button.js';
6
+ /**
7
+ * Current and possible future bundler names, just to help with a friendlier error message
8
+ * (we can't access the authoritative list from the bundler package here)
9
+ */
10
+ const bundlerNames = ['ori', 'rollup', 'webpack', 'rspack', 'esbuild'];
11
+ /**
12
+ * Error or warning item in the details of a task/bundle result.
13
+ */
14
+ export const TaskResultItem = (props) => {
15
+ const { item, inputPath, index, type } = props;
16
+ const { location: loc, notes = [] } = item;
17
+ // Update the message source to be more user-friendly. Usually it's either a bundler name,
18
+ // or some internal of cloudpack, and since the user might not know about the different bundlers
19
+ // and certainly doesn't know about cloudpack internals, a bit of context is helpful.
20
+ const friendlySource = bundlerNames.includes(item.source) ? `${item.source} bundler` : `cloudpack ${item.source}`;
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
+ // 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))) })] }))] })] }));
24
+ };
25
+ /**
26
+ * Remove ANSI codes from a string. (This is duplicated from `task-reporter` to avoid needing
27
+ * browser support in that package, since the implementation is trivial.)
28
+ */
29
+ function stripAnsi(text) {
30
+ // eslint-disable-next-line no-control-regex -- supposed to match a control character
31
+ return text.replace(/\x1b\[[\d;]+(m|[AKB]\b)/g, '');
32
+ }
33
+ /**
34
+ * Return a link-button to open the source file, or a placeholder if the location is undefined.
35
+ */
36
+ const ItemLocation = (props) => {
37
+ const { loc, inputPath } = props;
5
38
  const cloudpack = useCloudpack();
6
- const openSource = (ev) => {
7
- if (item.location) {
8
- void cloudpack.openCodeEditor.mutate({
9
- rootPath: projectPath,
10
- relativePath: item.location?.file,
11
- line: item.location?.line,
12
- column: item.location?.column,
13
- });
14
- ev.preventDefault();
15
- }
39
+ if (!loc) {
40
+ return '(path unavailable)';
41
+ }
42
+ const locationString = [loc.file, loc.line, loc.column].filter((val) => val !== undefined).join(':');
43
+ if (!inputPath) {
44
+ return locationString;
45
+ }
46
+ const openSource = () => {
47
+ if (!inputPath)
48
+ return;
49
+ void cloudpack.openCodeEditor.mutate({
50
+ rootPath: inputPath,
51
+ relativePath: loc.file,
52
+ line: loc.line,
53
+ column: loc.column,
54
+ });
16
55
  };
17
- const location = [item.location?.file || '(path unavailable)', item.location?.line, item.location?.column]
18
- .filter(Boolean)
19
- .join(':');
20
- return (React.createElement("div", { className: styles.root },
21
- React.createElement("div", { className: styles.statusBar }),
22
- React.createElement("div", { className: styles.content },
23
- React.createElement("div", { className: styles.titleArea },
24
- React.createElement("button", { onClick: openSource, className: styles.file },
25
- index,
26
- ". ",
27
- location)),
28
- React.createElement("div", { className: styles.text },
29
- "[",
30
- item.source,
31
- "] ",
32
- item.text),
33
- React.createElement("pre", { className: styles.text }, JSON.stringify(item, null, 2)))));
56
+ return (_jsx(Button, { variant: "link", onClick: openSource, children: locationString }));
34
57
  };
35
58
  //# sourceMappingURL=TaskResultItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TaskResultItem.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskResultItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAQjD,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5F,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,UAAU,GAAG,CAAC,EAAoB,EAAQ,EAAE;QAChD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC;gBACnC,QAAQ,EAAE,WAAW;gBACrB,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI;gBACjC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI;gBACzB,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM;aAC9B,CAAC,CAAC;YACH,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,oBAAoB,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;SACvG,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,GAAQ;QACxC,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC9B,gCAAQ,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;oBAChD,KAAK;;oBAAI,QAAQ,CACX,CACL;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;;gBACvB,IAAI,CAAC,MAAM;;gBAAI,IAAI,CAAC,IAAI,CACtB;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAO,CAC9D,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { BundleMessage } from '@ms-cloudpack/common-types';\nimport React from 'react';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport styles from './TaskResultItem.module.css';\n\nexport interface TaskResultItemProps {\n item: BundleMessage;\n projectPath: string;\n index: number;\n}\n\nexport const TaskResultItem: React.FC<TaskResultItemProps> = ({ item, projectPath, index }) => {\n const cloudpack = useCloudpack();\n\n const openSource = (ev: React.MouseEvent): void => {\n if (item.location) {\n void cloudpack.openCodeEditor.mutate({\n rootPath: projectPath,\n relativePath: item.location?.file,\n line: item.location?.line,\n column: item.location?.column,\n });\n ev.preventDefault();\n }\n };\n\n const location = [item.location?.file || '(path unavailable)', item.location?.line, item.location?.column]\n .filter(Boolean)\n .join(':');\n\n return (\n <div className={styles.root}>\n <div className={styles.statusBar}></div>\n <div className={styles.content}>\n <div className={styles.titleArea}>\n <button onClick={openSource} className={styles.file}>\n {index}. {location}\n </button>\n </div>\n <div className={styles.text}>\n [{item.source}] {item.text}\n </div>\n <pre className={styles.text}>{JSON.stringify(item, null, 2)}</pre>\n </div>\n </div>\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 <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,7 +1,11 @@
1
- import React from 'react';
1
+ import type { FunctionComponent } from 'preact';
2
2
  import type { TaskDescription } from '@ms-cloudpack/api-server/browser';
3
- export interface TaskStatusProps {
3
+ import { type ResultsAccordionProps } from '../ResultsAccordion/ResultsAccordion.js';
4
+ export interface TaskStatusProps extends Pick<ResultsAccordionProps, 'index'> {
4
5
  task: TaskDescription;
5
6
  }
6
- export declare const TaskStatus: React.FC<TaskStatusProps>;
7
+ /**
8
+ * Item (collapsible section) in the list of bundle task results in the StatusDialog.
9
+ */
10
+ export declare const TaskStatus: FunctionComponent<TaskStatusProps>;
7
11
  //# sourceMappingURL=TaskStatus.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TaskStatus.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAUxE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,eAAe,CAAC;CACvB;AAeD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyGhD,CAAC"}
1
+ {"version":3,"file":"TaskStatus.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAIxE,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,yCAAyC,CAAC;AAEjD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAC3E,IAAI,EAAE,eAAe,CAAC;CACvB;AAeD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA0FzD,CAAC"}
@@ -1,12 +1,8 @@
1
- import React from 'react';
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
2
2
  import { TaskResultItem } from './TaskResultItem.js';
3
- import styles from './TaskStatus.module.css';
4
- import { default as cx } from 'classnames';
5
- import ErrorIcon from '../../images/error-24.inline.svg';
6
- import SuccessIcon from '../../images/success-24.inline.svg';
7
- import ChevronDownIcon from '../../images/chevrondown-20.inline.svg';
8
3
  import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
9
4
  import { Button } from '../Button/Button.js';
5
+ import { ResultsAccordion, ResultsAccordionContent, } from '../ResultsAccordion/ResultsAccordion.js';
10
6
  function getCompletion(task) {
11
7
  if (task.status === 'pending') {
12
8
  return 'Running';
@@ -19,65 +15,30 @@ function getCompletion(task) {
19
15
  .filter(Boolean)
20
16
  .join(', ');
21
17
  }
22
- export const TaskStatus = ({ task }) => {
23
- const [isOpen, setIsOpen] = React.useState(undefined);
24
- const { name, warnings = [], errors = [] } = task;
18
+ /**
19
+ * Item (collapsible section) in the list of bundle task results in the StatusDialog.
20
+ */
21
+ export const TaskStatus = (props) => {
22
+ const { task } = props;
23
+ const { name, warnings = [], errors = [], inputPath, outputPath } = task;
25
24
  const cloudpack = useCloudpack();
26
- const showContent = isOpen === true || (isOpen === undefined && errors?.length > 0);
27
- const { inputPath, outputPath } = task;
28
- const open = (rootPath) => void cloudpack.openFilePath.mutate({ rootPath });
29
- const openPackage = () => {
30
- if (!inputPath) {
31
- console.error('No input path for task', task);
32
- return;
33
- }
25
+ const openPath = (rootPath) => void cloudpack.openFilePath.mutate({ rootPath });
26
+ const openPackageJson = () => {
27
+ if (!inputPath)
28
+ return; // the button won't be shown in this case
34
29
  void cloudpack.openCodeEditor.mutate({
35
30
  rootPath: inputPath,
36
31
  relativePath: 'package.json',
37
32
  });
38
33
  };
39
34
  const restartTask = () => {
40
- if (!inputPath) {
41
- console.error('No input path for task', task);
35
+ if (!inputPath)
42
36
  return;
43
- }
44
37
  void cloudpack.restartTask.mutate({ id: task.id, inputPath });
45
38
  };
46
- return (React.createElement("div", { className: styles.root },
47
- React.createElement("div", { className: getHeaderClassName(task) },
48
- React.createElement("button", { className: styles.expandButton, onClick: () => setIsOpen(!showContent), "aria-label": showContent ? `Minimize ${name}` : `Expand ${name}` },
49
- React.createElement("img", { className: cx(styles.expandIcon, !showContent && styles.collapsed), src: ChevronDownIcon, alt: "Chevron down icon" })),
50
- errors?.length === 0 && warnings?.length === 0 && (React.createElement("img", { className: styles.errorIcon, src: SuccessIcon, alt: "Success icon" })),
51
- errors?.length > 0 && React.createElement("img", { className: styles.errorIcon, src: ErrorIcon, alt: "Error icon" }),
52
- React.createElement("div", { className: styles.title }, name),
53
- React.createElement("div", { className: styles.farArea }, getCompletion(task))),
54
- showContent &&
55
- (inputPath ? (React.createElement(React.Fragment, null,
56
- React.createElement("div", { className: styles.commands },
57
- React.createElement(Button, { onClick: restartTask }, "Restart task")),
58
- React.createElement("div", { className: styles.content },
59
- React.createElement("div", { className: styles.title }, "Details"),
60
- React.createElement("div", { className: styles.nameValueArea },
61
- React.createElement("div", { className: styles.name }, "Input path"),
62
- React.createElement("div", { className: styles.value },
63
- React.createElement("button", { className: styles.linkButton, onClick: () => open(inputPath) }, task.inputPath),
64
- React.createElement("button", { className: styles.linkButton, onClick: openPackage }, "(Package.json)"))),
65
- outputPath && (React.createElement("div", { className: styles.nameValueArea },
66
- React.createElement("div", { className: styles.name }, "Output path"),
67
- React.createElement("button", { className: styles.linkButton, onClick: () => open(outputPath) }, outputPath))),
68
- errors?.length > 0 && (React.createElement(React.Fragment, null,
69
- React.createElement("div", { className: styles.title }, "Errors"),
70
- React.createElement("div", { className: styles.resultItems }, errors.map((error, index) => (React.createElement(TaskResultItem, { key: index, item: error, projectPath: inputPath, index: index + 1 })))))),
71
- warnings?.length > 0 && (React.createElement(React.Fragment, null,
72
- React.createElement("div", { className: styles.title }, "Warnings"),
73
- React.createElement("div", { className: styles.resultItems }, warnings.map((warning, index) => (React.createElement(TaskResultItem, { key: index, item: warning, projectPath: inputPath, index: index + 1 }))))))))) : (React.createElement("div", { className: styles.content }, "No input path found for task. This is a Cloudpack bug. Please report it.")))));
39
+ // This callback prevents rendering thousands of bundle result details unnecessarily.
40
+ // It could be further optimized with useMemo etc if it's an actual performance issue.
41
+ const getContent = () => (_jsxs(_Fragment, { children: [inputPath ? (_jsx(ResultsAccordionContent, { itemName: "Input path", itemValue: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => openPath(inputPath), children: inputPath }), ' ', "(", _jsx(Button, { variant: "link", onClick: openPackageJson, children: "package.json" }), ")"] }) })) : ('No input path found for bundle task. This is a Cloudpack bug. Please report it.'), outputPath && (_jsx(ResultsAccordionContent, { itemName: "Output path", itemValue: _jsx(Button, { variant: "link", onClick: () => openPath(outputPath), children: outputPath }) })), errors.length > 0 && (_jsx(ResultsAccordionContent, { title: "Errors", children: errors.map((item, index) => (_jsx(TaskResultItem, { type: "error", item: item, inputPath: inputPath, index: index }, index))) })), warnings.length > 0 && (_jsx(ResultsAccordionContent, { title: "Warnings", children: warnings.map((item, index) => (_jsx(TaskResultItem, { type: "warning", item: item, inputPath: inputPath, index: index }, index))) }))] }));
42
+ return (_jsx(ResultsAccordion, { name: name || '<unknown>', index: props.index, result: errors.length ? 'error' : warnings.length ? 'warning' : 'success', headerEndContent: getCompletion(task), headerCommands: _jsx(Button, { variant: "iconOnly", iconName: "refresh", onClick: restartTask, title: "Re-bundle this package", "aria-label": "Re-bundle this package" }), getContent: getContent }));
74
43
  };
75
- function getHeaderClassName(task) {
76
- const { errors = [], warnings = [] } = task;
77
- return cx(styles.header, {
78
- [styles.success]: errors?.length === 0 && warnings?.length === 0,
79
- [styles.warning]: errors?.length === 0 && warnings?.length > 0,
80
- [styles.error]: errors?.length > 0,
81
- });
82
- }
83
44
  //# sourceMappingURL=TaskStatus.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TaskStatus.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskStatus.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\nimport { TaskResultItem } from './TaskResultItem.js';\nimport styles from './TaskStatus.module.css';\nimport { default as cx } from 'classnames';\nimport ErrorIcon from '../../images/error-24.inline.svg';\nimport SuccessIcon from '../../images/success-24.inline.svg';\nimport ChevronDownIcon from '../../images/chevrondown-20.inline.svg';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { Button } from '../Button/Button.js';\n\nexport interface TaskStatusProps {\n task: TaskDescription;\n}\n\nfunction getCompletion(task: TaskDescription): string {\n if (task.status === 'pending') {\n return 'Running';\n }\n return [\n `Completed in ${task.durationMilliseconds}ms`,\n task.errors?.length && `${task.errors.length} error${task.errors.length > 1 ? 's' : ''}`,\n task.warnings?.length && `${task.warnings.length} warning${task.warnings.length > 1 ? 's' : ''}`,\n ]\n .filter(Boolean)\n .join(', ');\n}\n\nexport const TaskStatus: React.FC<TaskStatusProps> = ({ task }) => {\n const [isOpen, setIsOpen] = React.useState<boolean | undefined>(undefined);\n const { name, warnings = [], errors = [] } = task;\n const cloudpack = useCloudpack();\n const showContent = isOpen === true || (isOpen === undefined && errors?.length > 0);\n\n const { inputPath, outputPath } = task;\n\n const open = (rootPath: string) => void cloudpack.openFilePath.mutate({ rootPath });\n\n const openPackage = (): void => {\n if (!inputPath) {\n console.error('No input path for task', task);\n return;\n }\n void cloudpack.openCodeEditor.mutate({\n rootPath: inputPath,\n relativePath: 'package.json',\n });\n };\n\n const restartTask = (): void => {\n if (!inputPath) {\n console.error('No input path for task', task);\n return;\n }\n void cloudpack.restartTask.mutate({ id: task.id, inputPath });\n };\n\n return (\n <div className={styles.root}>\n <div className={getHeaderClassName(task)}>\n <button\n className={styles.expandButton}\n onClick={() => setIsOpen(!showContent)}\n aria-label={showContent ? `Minimize ${name}` : `Expand ${name}`}\n >\n <img\n className={cx(styles.expandIcon, !showContent && styles.collapsed)}\n src={ChevronDownIcon}\n alt=\"Chevron down icon\"\n />\n </button>\n {errors?.length === 0 && warnings?.length === 0 && (\n <img className={styles.errorIcon} src={SuccessIcon} alt=\"Success icon\" />\n )}\n {errors?.length > 0 && <img className={styles.errorIcon} src={ErrorIcon} alt=\"Error icon\" />}\n <div className={styles.title}>{name}</div>\n <div className={styles.farArea}>{getCompletion(task)}</div>\n </div>\n {showContent &&\n (inputPath ? (\n <>\n <div className={styles.commands}>\n <Button onClick={restartTask}>Restart task</Button>\n </div>\n <div className={styles.content}>\n <div className={styles.title}>Details</div>\n <div className={styles.nameValueArea}>\n <div className={styles.name}>Input path</div>\n <div className={styles.value}>\n <button className={styles.linkButton} onClick={() => open(inputPath)}>\n {task.inputPath}\n </button>\n\n <button className={styles.linkButton} onClick={openPackage}>\n (Package.json)\n </button>\n </div>\n </div>\n {outputPath && (\n <div className={styles.nameValueArea}>\n <div className={styles.name}>Output path</div>\n <button className={styles.linkButton} onClick={() => open(outputPath)}>\n {outputPath}\n </button>\n </div>\n )}\n {errors?.length > 0 && (\n <>\n <div className={styles.title}>Errors</div>\n <div className={styles.resultItems}>\n {errors.map((error, index) => (\n <TaskResultItem key={index} item={error} projectPath={inputPath} index={index + 1} />\n ))}\n </div>\n </>\n )}\n {warnings?.length > 0 && (\n <>\n <div className={styles.title}>Warnings</div>\n <div className={styles.resultItems}>\n {warnings.map((warning, index) => (\n <TaskResultItem key={index} item={warning} projectPath={inputPath} index={index + 1} />\n ))}\n </div>\n </>\n )}\n </div>\n </>\n ) : (\n <div className={styles.content}>No input path found for task. This is a Cloudpack bug. Please report it.</div>\n ))}\n </div>\n );\n};\n\nfunction getHeaderClassName(task: TaskDescription): string {\n const { errors = [], warnings = [] } = task;\n return cx(styles.header, {\n [styles.success]: errors?.length === 0 && warnings?.length === 0,\n [styles.warning]: errors?.length === 0 && warnings?.length > 0,\n [styles.error]: errors?.length > 0,\n });\n}\n"]}
1
+ {"version":3,"file":"TaskStatus.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskStatus.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\nimport { TaskResultItem } from './TaskResultItem.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { Button } from '../Button/Button.js';\nimport {\n ResultsAccordion,\n ResultsAccordionContent,\n type ResultsAccordionProps,\n} from '../ResultsAccordion/ResultsAccordion.js';\n\nexport interface TaskStatusProps extends Pick<ResultsAccordionProps, 'index'> {\n task: TaskDescription;\n}\n\nfunction getCompletion(task: TaskDescription): string {\n if (task.status === 'pending') {\n return 'Running';\n }\n return [\n `Completed in ${task.durationMilliseconds}ms`,\n task.errors?.length && `${task.errors.length} error${task.errors.length > 1 ? 's' : ''}`,\n task.warnings?.length && `${task.warnings.length} warning${task.warnings.length > 1 ? 's' : ''}`,\n ]\n .filter(Boolean)\n .join(', ');\n}\n\n/**\n * Item (collapsible section) in the list of bundle task results in the StatusDialog.\n */\nexport const TaskStatus: FunctionComponent<TaskStatusProps> = (props) => {\n const { task } = props;\n const { name, warnings = [], errors = [], inputPath, outputPath } = task;\n const cloudpack = useCloudpack();\n\n const openPath = (rootPath: string) => void cloudpack.openFilePath.mutate({ rootPath });\n\n const openPackageJson = (): void => {\n if (!inputPath) return; // the button won't be shown in this case\n\n void cloudpack.openCodeEditor.mutate({\n rootPath: inputPath,\n relativePath: 'package.json',\n });\n };\n\n const restartTask = (): void => {\n if (!inputPath) return;\n\n void cloudpack.restartTask.mutate({ id: task.id, inputPath });\n };\n\n // This callback prevents rendering thousands of bundle result details unnecessarily.\n // It could be further optimized with useMemo etc if it's an actual performance issue.\n const getContent = () => (\n <>\n {inputPath ? (\n <ResultsAccordionContent\n itemName=\"Input path\"\n itemValue={\n <>\n <Button variant=\"link\" onClick={() => openPath(inputPath)}>\n {inputPath}\n </Button>{' '}\n (\n <Button variant=\"link\" onClick={openPackageJson}>\n package.json\n </Button>\n )\n </>\n }\n />\n ) : (\n 'No input path found for bundle task. This is a Cloudpack bug. Please report it.'\n )}\n {outputPath && (\n <ResultsAccordionContent\n itemName=\"Output path\"\n itemValue={\n <Button variant=\"link\" onClick={() => openPath(outputPath)}>\n {outputPath}\n </Button>\n }\n />\n )}\n {errors.length > 0 && (\n <ResultsAccordionContent title=\"Errors\">\n {errors.map((item, index) => (\n <TaskResultItem type=\"error\" key={index} item={item} inputPath={inputPath} index={index} />\n ))}\n </ResultsAccordionContent>\n )}\n {warnings.length > 0 && (\n <ResultsAccordionContent title=\"Warnings\">\n {warnings.map((item, index) => (\n <TaskResultItem type=\"warning\" key={index} item={item} inputPath={inputPath} index={index} />\n ))}\n </ResultsAccordionContent>\n )}\n </>\n );\n\n return (\n <ResultsAccordion\n name={name || '<unknown>'}\n index={props.index}\n result={errors.length ? 'error' : warnings.length ? 'warning' : 'success'}\n headerEndContent={getCompletion(task)}\n headerCommands={\n <Button\n variant=\"iconOnly\"\n iconName=\"refresh\"\n onClick={restartTask}\n title=\"Re-bundle this package\"\n aria-label=\"Re-bundle this package\"\n />\n }\n getContent={getContent}\n />\n );\n};\n"]}
@@ -1,3 +1,5 @@
1
- import React from 'react';
2
- export declare const ThemeProvider: React.FC<React.ComponentProps<'div'>>;
1
+ import type { ComponentChildren, FunctionComponent } from 'preact';
2
+ export declare const ThemeProvider: FunctionComponent<{
3
+ children: ComponentChildren;
4
+ }>;
3
5
  //# sourceMappingURL=ThemeProvider.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAE/D,CAAC"}
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAGnE,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAE,QAAQ,EAAE,iBAAiB,CAAA;CAAE,CAE5E,CAAC"}
@@ -1,6 +1,6 @@
1
- import React from 'react';
1
+ import { jsx as _jsx } from "preact/jsx-runtime";
2
2
  import styles from './ThemeProvider.module.css';
3
3
  export const ThemeProvider = ({ children }) => {
4
- return React.createElement("div", { className: styles.root }, children);
4
+ return _jsx("div", { class: styles.root, children: children });
5
5
  };
6
6
  //# sourceMappingURL=ThemeProvider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAA0C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnF,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,QAAQ,CAAO,CAAC;AACvD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport styles from './ThemeProvider.module.css';\n\nexport const ThemeProvider: React.FC<React.ComponentProps<'div'>> = ({ children }) => {\n return <div className={styles.root}>{children}</div>;\n};\n"]}
1
+ {"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAuD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChG,OAAO,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,YAAG,QAAQ,GAAO,CAAC;AACnD,CAAC,CAAC","sourcesContent":["import type { ComponentChildren, FunctionComponent } from 'preact';\nimport styles from './ThemeProvider.module.css';\n\nexport const ThemeProvider: FunctionComponent<{ children: ComponentChildren }> = ({ children }) => {\n return <div class={styles.root}>{children}</div>;\n};\n"]}
@@ -1,4 +1,4 @@
1
- import { type RefObject } from 'react';
1
+ import type { RefObject } from 'preact';
2
2
  /**
3
3
  * Make an element draggable. Note that changing `enabled` or passing different ref objects
4
4
  * will trigger reconfiguring the event handlers, but changing `.current` will not.
@@ -1 +1 @@
1
- {"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE5D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE;IACpC,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,mBAAmB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC5C,8BAA8B;IAC9B,cAAc,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACxC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CA2D1B"}
1
+ {"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE;IACpC,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,mBAAmB,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC5C,8BAA8B;IAC9B,cAAc,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACxC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CA2D1B"}
@@ -1,4 +1,4 @@
1
- import { useEffect, useState } from 'react';
1
+ import { useEffect, useState } from 'preact/hooks';
2
2
  /**
3
3
  * Make an element draggable. Note that changing `enabled` or passing different ref objects
4
4
  * will trigger reconfiguring the event handlers, but changing `.current` will not.
@@ -1 +1 @@
1
- {"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,OAO5B;IACC,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC;IAEjE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,mBAAmB,EAAE,OAAO,CAAC;QAChD,MAAM,UAAU,GAAG,cAAc,EAAE,OAAO,CAAC;QAE3C,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,CAAC;YAC3C,OAAO;QACT,CAAC;QAED,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAE5B,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,UAAU,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS,OAC5E,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAC7B,KAAK,CAAC;QACR,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC1C,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,MAAM,GAAG;gBACP,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS;gBACvC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS;aACxC,CAAC;YAEF,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAClD,UAAU,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACzD,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAE7D,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAC1B,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAC1B,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAC9C,UAAU,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACtD,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAE1D,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC7D,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC7D,UAAU,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnD,OAAO;QACL,UAAU;KACX,CAAC;AACJ,CAAC","sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\n/**\n * Make an element draggable. Note that changing `enabled` or passing different ref objects\n * will trigger reconfiguring the event handlers, but changing `.current` will not.\n * @returns Whether the element is currently being dragged\n */\nexport function useDraggable(options: {\n /** Whether to enable dragging */\n enabled: boolean;\n /** Element that should be draggable */\n containerElementRef: RefObject<HTMLElement>;\n /** The drag handle element */\n dragElementRef: RefObject<HTMLElement>;\n}): { isDragging: boolean } {\n const { enabled, containerElementRef, dragElementRef } = options;\n\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n const moveTarget = containerElementRef?.current;\n const dragTarget = dragElementRef?.current;\n\n if (!enabled || !moveTarget || !dragTarget) {\n return;\n }\n\n let originalX = 0;\n let originalY = 0;\n let offset = { x: 0, y: 0 };\n\n const onPointerMove = (event: PointerEvent) => {\n moveTarget.style.transform = `translate(${offset.x + event.clientX - originalX}px, ${\n offset.y + event.clientY - originalY\n }px)`;\n };\n\n const onPointerUp = (event: PointerEvent) => {\n setIsDragging(false);\n offset = {\n x: offset.x + event.clientX - originalX,\n y: offset.y + event.clientY - originalY,\n };\n\n dragTarget.releasePointerCapture(event.pointerId);\n dragTarget.removeEventListener('pointerup', onPointerUp);\n dragTarget.removeEventListener('pointermove', onPointerMove);\n\n event.preventDefault();\n };\n\n const onPointerDown = (event: PointerEvent) => {\n setIsDragging(true);\n originalX = event.clientX;\n originalY = event.clientY;\n dragTarget.setPointerCapture(event.pointerId);\n dragTarget.addEventListener('pointerup', onPointerUp);\n dragTarget.addEventListener('pointermove', onPointerMove);\n event.preventDefault();\n };\n\n dragTarget.addEventListener('pointerdown', onPointerDown);\n\n return () => {\n dragTarget.removeEventListener('pointerdown', onPointerDown);\n dragTarget.removeEventListener('pointermove', onPointerMove);\n dragTarget.removeEventListener('pointerup', onPointerUp);\n };\n }, [enabled, containerElementRef, dragElementRef]);\n\n return {\n isDragging,\n };\n}\n"]}
1
+ {"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEnD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,OAO5B;IACC,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC;IAEjE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,mBAAmB,EAAE,OAAO,CAAC;QAChD,MAAM,UAAU,GAAG,cAAc,EAAE,OAAO,CAAC;QAE3C,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,CAAC;YAC3C,OAAO;QACT,CAAC;QAED,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAE5B,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,UAAU,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS,OAC5E,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAC7B,KAAK,CAAC;QACR,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC1C,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,MAAM,GAAG;gBACP,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS;gBACvC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS;aACxC,CAAC;YAEF,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAClD,UAAU,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACzD,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAE7D,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAC1B,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAC1B,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAC9C,UAAU,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACtD,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QAEF,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAE1D,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC7D,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC7D,UAAU,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnD,OAAO;QACL,UAAU;KACX,CAAC;AACJ,CAAC","sourcesContent":["import type { RefObject } from 'preact';\nimport { useEffect, useState } from 'preact/hooks';\n\n/**\n * Make an element draggable. Note that changing `enabled` or passing different ref objects\n * will trigger reconfiguring the event handlers, but changing `.current` will not.\n * @returns Whether the element is currently being dragged\n */\nexport function useDraggable(options: {\n /** Whether to enable dragging */\n enabled: boolean;\n /** Element that should be draggable */\n containerElementRef: RefObject<HTMLElement>;\n /** The drag handle element */\n dragElementRef: RefObject<HTMLElement>;\n}): { isDragging: boolean } {\n const { enabled, containerElementRef, dragElementRef } = options;\n\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n const moveTarget = containerElementRef?.current;\n const dragTarget = dragElementRef?.current;\n\n if (!enabled || !moveTarget || !dragTarget) {\n return;\n }\n\n let originalX = 0;\n let originalY = 0;\n let offset = { x: 0, y: 0 };\n\n const onPointerMove = (event: PointerEvent) => {\n moveTarget.style.transform = `translate(${offset.x + event.clientX - originalX}px, ${\n offset.y + event.clientY - originalY\n }px)`;\n };\n\n const onPointerUp = (event: PointerEvent) => {\n setIsDragging(false);\n offset = {\n x: offset.x + event.clientX - originalX,\n y: offset.y + event.clientY - originalY,\n };\n\n dragTarget.releasePointerCapture(event.pointerId);\n dragTarget.removeEventListener('pointerup', onPointerUp);\n dragTarget.removeEventListener('pointermove', onPointerMove);\n\n event.preventDefault();\n };\n\n const onPointerDown = (event: PointerEvent) => {\n setIsDragging(true);\n originalX = event.clientX;\n originalY = event.clientY;\n dragTarget.setPointerCapture(event.pointerId);\n dragTarget.addEventListener('pointerup', onPointerUp);\n dragTarget.addEventListener('pointermove', onPointerMove);\n event.preventDefault();\n };\n\n dragTarget.addEventListener('pointerdown', onPointerDown);\n\n return () => {\n dragTarget.removeEventListener('pointerdown', onPointerDown);\n dragTarget.removeEventListener('pointermove', onPointerMove);\n dragTarget.removeEventListener('pointerup', onPointerUp);\n };\n }, [enabled, containerElementRef, dragElementRef]);\n\n return {\n isDragging,\n };\n}\n"]}
@@ -1,13 +1,13 @@
1
- import React from 'react';
1
+ import { useEffect, useState } from 'preact/hooks';
2
2
  import { useCloudpack } from '../components/CloudpackProvider/CloudpackProvider.js';
3
3
  /**
4
4
  * Hook that reports the page load time to the Cloudpack backend.
5
5
  * @returns The page load time in milliseconds, or `null` if the page load time could not be determined. `undefined` is returned if the page load time is still being calculated.
6
6
  */
7
7
  export function usePageLoadTimeReporter() {
8
- const [report, setReport] = React.useState({ status: 'detecting' });
8
+ const [report, setReport] = useState({ status: 'detecting' });
9
9
  const cloudpack = useCloudpack();
10
- React.useEffect(() => {
10
+ useEffect(() => {
11
11
  async function reportPageLoadTime() {
12
12
  if (!window.__cloudpack) {
13
13
  throw new Error('Cloudpack not found on window');
@@ -1 +1 @@
1
- {"version":3,"file":"usePageLoadTimeReporter.js","sourceRoot":"","sources":["../../src/hooks/usePageLoadTimeReporter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAcpF;;;GAGG;AACH,MAAM,UAAU,uBAAuB;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IACxF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,UAAU,kBAAkB;YAC/B,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;gBACxB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;YACnD,CAAC;YACD,MAAM,EAAE,eAAe,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;YAEzF,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACxB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;YACxE,CAAC;YAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC1B,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;YAC1E,CAAC;YAED,MAAM,eAAe,GAAG,MAAM,eAAe,EAAE;iBAC5C,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACd,SAAS,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;gBACtD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,0CAA0C,EAAE,GAAG,CAAC,CAAC;gBAC/D,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;gBAC/B,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CAAC;YAEL,kEAAkE;YAClE,MAAM,YAAY,GAAG,oBAAoB,EAAE,CAAC;YAC5C,MAAM,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC;gBAChC,IAAI,EAAE,gBAAgB;gBACtB,+GAA+G;gBAC/G,SAAS,EAAE,CAAC;gBACZ,sEAAsE;gBACtE,yEAAyE;gBACzE,OAAO,EAAE,eAAe,IAAI,CAAC;gBAC7B,UAAU,EAAE;oBACV,IAAI,EAAE,kBAAkB,CAAC,WAAW;oBACpC,oBAAoB,EAAE,YAAY,CAAC,GAAG;oBACtC,sBAAsB,EAAE,YAAY,CAAC,KAAK;oBAC1C,iBAAiB,EAAE,YAAY,CAAC,KAAK;iBACtC;aACF,CAAC,CAAC;QACL,CAAC;QAED,KAAK,kBAAkB,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import React from 'react';\nimport { useCloudpack } from '../components/CloudpackProvider/CloudpackProvider.js';\n\nexport type PageLoadTimeReport =\n | {\n pageLoadTime: number;\n status: 'success';\n }\n | {\n status: 'error';\n }\n | {\n status: 'detecting';\n };\n\n/**\n * Hook that reports the page load time to the Cloudpack backend.\n * @returns The page load time in milliseconds, or `null` if the page load time could not be determined. `undefined` is returned if the page load time is still being calculated.\n */\nexport function usePageLoadTimeReporter(): PageLoadTimeReport {\n const [report, setReport] = React.useState<PageLoadTimeReport>({ status: 'detecting' });\n const cloudpack = useCloudpack();\n\n React.useEffect(() => {\n async function reportPageLoadTime() {\n if (!window.__cloudpack) {\n throw new Error('Cloudpack not found on window');\n }\n const { getPageLoadTime, getBrowserCacheRatio, pageSessionContext } = window.__cloudpack;\n\n if (!getPageLoadTime) {\n throw new Error('getPageLoadTime not found on window.__cloudpack');\n }\n\n if (!pageSessionContext) {\n throw new Error('pageSessionContext not found on window.__cloudpack');\n }\n\n if (!getBrowserCacheRatio) {\n throw new Error('getBrowserCacheRatio not found on window.__cloudpack');\n }\n\n const newPageLoadTime = await getPageLoadTime()\n .then((value) => {\n setReport({ pageLoadTime: value, status: 'success' });\n return value;\n })\n .catch((err) => {\n console.error('[Cloudpack] Failed to get page load time', err);\n setReport({ status: 'error' });\n return null;\n });\n\n // Page is loaded, PLT and the browser cache ratio can be reported\n const browserCache = getBrowserCacheRatio();\n await cloudpack.reportSpan.mutate({\n name: 'PAGE_LOAD_TIME',\n // OpenTelemetry doesn't care about the actual start time, start and end time is used to calculate the duration\n startTime: 0,\n // In case the performance entry is not found, the end time will be 0.\n // Unfortunately, it is not possible to report a span without an endTime.\n endTime: newPageLoadTime ?? 0,\n attributes: {\n path: pageSessionContext.requestPath,\n browserCacheHitCount: browserCache.hit,\n browserCacheTotalCount: browserCache.total,\n browserCacheRatio: browserCache.ratio,\n },\n });\n }\n\n void reportPageLoadTime();\n }, [cloudpack]);\n\n return report;\n}\n"]}
1
+ {"version":3,"file":"usePageLoadTimeReporter.js","sourceRoot":"","sources":["../../src/hooks/usePageLoadTimeReporter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAcpF;;;GAGG;AACH,MAAM,UAAU,uBAAuB;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,UAAU,kBAAkB;YAC/B,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;gBACxB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;YACnD,CAAC;YACD,MAAM,EAAE,eAAe,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;YAEzF,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACxB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;YACxE,CAAC;YAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC1B,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;YAC1E,CAAC;YAED,MAAM,eAAe,GAAG,MAAM,eAAe,EAAE;iBAC5C,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACd,SAAS,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;gBACtD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,0CAA0C,EAAE,GAAG,CAAC,CAAC;gBAC/D,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;gBAC/B,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CAAC;YAEL,kEAAkE;YAClE,MAAM,YAAY,GAAG,oBAAoB,EAAE,CAAC;YAC5C,MAAM,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC;gBAChC,IAAI,EAAE,gBAAgB;gBACtB,+GAA+G;gBAC/G,SAAS,EAAE,CAAC;gBACZ,sEAAsE;gBACtE,yEAAyE;gBACzE,OAAO,EAAE,eAAe,IAAI,CAAC;gBAC7B,UAAU,EAAE;oBACV,IAAI,EAAE,kBAAkB,CAAC,WAAW;oBACpC,oBAAoB,EAAE,YAAY,CAAC,GAAG;oBACtC,sBAAsB,EAAE,YAAY,CAAC,KAAK;oBAC1C,iBAAiB,EAAE,YAAY,CAAC,KAAK;iBACtC;aACF,CAAC,CAAC;QACL,CAAC;QAED,KAAK,kBAAkB,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { useEffect, useState } from 'preact/hooks';\nimport { useCloudpack } from '../components/CloudpackProvider/CloudpackProvider.js';\n\nexport type PageLoadTimeReport =\n | {\n pageLoadTime: number;\n status: 'success';\n }\n | {\n status: 'error';\n }\n | {\n status: 'detecting';\n };\n\n/**\n * Hook that reports the page load time to the Cloudpack backend.\n * @returns The page load time in milliseconds, or `null` if the page load time could not be determined. `undefined` is returned if the page load time is still being calculated.\n */\nexport function usePageLoadTimeReporter(): PageLoadTimeReport {\n const [report, setReport] = useState<PageLoadTimeReport>({ status: 'detecting' });\n const cloudpack = useCloudpack();\n\n useEffect(() => {\n async function reportPageLoadTime() {\n if (!window.__cloudpack) {\n throw new Error('Cloudpack not found on window');\n }\n const { getPageLoadTime, getBrowserCacheRatio, pageSessionContext } = window.__cloudpack;\n\n if (!getPageLoadTime) {\n throw new Error('getPageLoadTime not found on window.__cloudpack');\n }\n\n if (!pageSessionContext) {\n throw new Error('pageSessionContext not found on window.__cloudpack');\n }\n\n if (!getBrowserCacheRatio) {\n throw new Error('getBrowserCacheRatio not found on window.__cloudpack');\n }\n\n const newPageLoadTime = await getPageLoadTime()\n .then((value) => {\n setReport({ pageLoadTime: value, status: 'success' });\n return value;\n })\n .catch((err) => {\n console.error('[Cloudpack] Failed to get page load time', err);\n setReport({ status: 'error' });\n return null;\n });\n\n // Page is loaded, PLT and the browser cache ratio can be reported\n const browserCache = getBrowserCacheRatio();\n await cloudpack.reportSpan.mutate({\n name: 'PAGE_LOAD_TIME',\n // OpenTelemetry doesn't care about the actual start time, start and end time is used to calculate the duration\n startTime: 0,\n // In case the performance entry is not found, the end time will be 0.\n // Unfortunately, it is not possible to report a span without an endTime.\n endTime: newPageLoadTime ?? 0,\n attributes: {\n path: pageSessionContext.requestPath,\n browserCacheHitCount: browserCache.hit,\n browserCacheTotalCount: browserCache.total,\n browserCacheRatio: browserCache.ratio,\n },\n });\n }\n\n void reportPageLoadTime();\n }, [cloudpack]);\n\n return report;\n}\n"]}
package/lib/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import React from 'react';
2
- import { createRoot } from 'react-dom/client';
1
+ import { jsx as _jsx } from "preact/jsx-runtime";
2
+ import { render } from 'preact';
3
3
  import { CloudpackProvider } from './components/CloudpackProvider/CloudpackProvider.js';
4
- import { StatusOverlay } from './components/StatusOverlay/StatusOverlay.js';
4
+ import { Overlay } from './components/Overlay/Overlay.js';
5
5
  import { ThemeProvider } from './components/ThemeProvider/ThemeProvider.js';
6
6
  import { elementIds } from './constants.js';
7
7
  import { createCloudpackClient, reloadCountSource } from '@ms-cloudpack/api-server/browser';
@@ -27,10 +27,7 @@ async function start() {
27
27
  });
28
28
  const rootDiv = document.createElement('div');
29
29
  rootDiv.id = elementIds.root;
30
- const root = createRoot(rootDiv);
31
- root.render(React.createElement(ThemeProvider, null,
32
- React.createElement(CloudpackProvider, { client: client },
33
- React.createElement(StatusOverlay, null))));
30
+ render(_jsx(ThemeProvider, { children: _jsx(CloudpackProvider, { client: client, children: _jsx(Overlay, {}) }) }), rootDiv);
34
31
  document.body.appendChild(rootDiv);
35
32
  }
36
33
  void start();
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,KAAK,UAAU,KAAK;IAClB,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IACnD,CAAC;IAED,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;IAElD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC;IAElE,MAAM,MAAM,GAAG,MAAM,qBAAqB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;IAE5D,IAAI,SAAS,KAAK,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC;QACtD,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,iBAAiB,EAAE;QAChD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,EAAE,CAAC;gBACnC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC;IAC7B,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEjC,IAAI,CAAC,MAAM,CACT,oBAAC,aAAa;QACZ,oBAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM;YAC/B,oBAAC,aAAa,OAAG,CACC,CACN,CACjB,CAAC;IAEF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,KAAK,EAAE,CAAC","sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { CloudpackProvider } from './components/CloudpackProvider/CloudpackProvider.js';\nimport { StatusOverlay } from './components/StatusOverlay/StatusOverlay.js';\nimport { ThemeProvider } from './components/ThemeProvider/ThemeProvider.js';\nimport { elementIds } from './constants.js';\nimport { createCloudpackClient, reloadCountSource } from '@ms-cloudpack/api-server/browser';\n\nasync function start(): Promise<void> {\n if (!window.__cloudpack) {\n throw new Error('Cloudpack not found on window');\n }\n\n const { pageSessionContext } = window.__cloudpack;\n\n if (!pageSessionContext) {\n throw new Error('Session context not found on window.__cloudpack');\n }\n\n const { apiUrl, currentSequence, sessionId } = pageSessionContext;\n\n const client = await createCloudpackClient({ url: apiUrl });\n\n if (sessionId === (await client.getSessionId.query())) {\n console.log('[Cloudpack] socket opened');\n }\n\n client.onDataChanged.subscribe(reloadCountSource, {\n onData: (data) => {\n if (Number(data) > currentSequence) {\n window.location.reload();\n }\n },\n });\n\n const rootDiv = document.createElement('div');\n rootDiv.id = elementIds.root;\n const root = createRoot(rootDiv);\n\n root.render(\n <ThemeProvider>\n <CloudpackProvider client={client}>\n <StatusOverlay />\n </CloudpackProvider>\n </ThemeProvider>,\n );\n\n document.body.appendChild(rootDiv);\n}\n\nvoid start();\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,KAAK,UAAU,KAAK;IAClB,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IACnD,CAAC;IAED,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;IAElD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC;IAElE,MAAM,MAAM,GAAG,MAAM,qBAAqB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;IAE5D,IAAI,SAAS,KAAK,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC;QACtD,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,iBAAiB,EAAE;QAChD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,EAAE,CAAC;gBACnC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC;IAE7B,MAAM,CACJ,KAAC,aAAa,cACZ,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,YAC/B,KAAC,OAAO,KAAG,GACO,GACN,EAChB,OAAO,CACR,CAAC;IAEF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,KAAK,EAAE,CAAC","sourcesContent":["import { render } from 'preact';\nimport { CloudpackProvider } from './components/CloudpackProvider/CloudpackProvider.js';\nimport { Overlay } from './components/Overlay/Overlay.js';\nimport { ThemeProvider } from './components/ThemeProvider/ThemeProvider.js';\nimport { elementIds } from './constants.js';\nimport { createCloudpackClient, reloadCountSource } from '@ms-cloudpack/api-server/browser';\n\nasync function start(): Promise<void> {\n if (!window.__cloudpack) {\n throw new Error('Cloudpack not found on window');\n }\n\n const { pageSessionContext } = window.__cloudpack;\n\n if (!pageSessionContext) {\n throw new Error('Session context not found on window.__cloudpack');\n }\n\n const { apiUrl, currentSequence, sessionId } = pageSessionContext;\n\n const client = await createCloudpackClient({ url: apiUrl });\n\n if (sessionId === (await client.getSessionId.query())) {\n console.log('[Cloudpack] socket opened');\n }\n\n client.onDataChanged.subscribe(reloadCountSource, {\n onData: (data) => {\n if (Number(data) > currentSequence) {\n window.location.reload();\n }\n },\n });\n\n const rootDiv = document.createElement('div');\n rootDiv.id = elementIds.root;\n\n render(\n <ThemeProvider>\n <CloudpackProvider client={client}>\n <Overlay />\n </CloudpackProvider>\n </ThemeProvider>,\n rootDiv,\n );\n\n document.body.appendChild(rootDiv);\n}\n\nvoid start();\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ms-cloudpack/overlay",
3
- "version": "0.18.3",
3
+ "version": "0.19.1",
4
4
  "description": "The Cloudpack overlay ux.",
5
5
  "license": "MIT",
6
6
  "types": "./lib/index.d.ts",
@@ -29,17 +29,14 @@
29
29
  "prepack": "cp .npmignore dist/.npmignore"
30
30
  },
31
31
  "devDependencies": {
32
- "@ms-cloudpack/api-server": "^0.63.1",
33
- "@ms-cloudpack/common-types": "^0.24.17",
34
- "@ms-cloudpack/common-types-browser": "^0.5.6",
32
+ "@ms-cloudpack/api-server": "^0.63.3",
33
+ "@ms-cloudpack/common-types": "^0.24.19",
34
+ "@ms-cloudpack/common-types-browser": "^0.6.0",
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",
38
- "@types/react": "^18.3.3",
39
- "@types/react-dom": "^18.3.0",
40
38
  "classnames": "^2.5.1",
41
- "react": "^18.3.1",
42
- "react-dom": "^18.3.1"
39
+ "preact": "^10.26.8"
43
40
  },
44
41
  "files": [
45
42
  "lib",
@@ -1,2 +0,0 @@
1
- export const __webpack_id__=119;export const __webpack_ids__=[119];export const __webpack_modules__={181:(e,n,t)=>{t.d(n,{default:()=>s});var a=t(25),l=t.n(a),r=t(191),o=t.n(r)()(l());o.push([e.id,".Rl6XMfFcB4M4Sp5RJbh8 {\n display: flex;\n background: #f5f5f5;\n}\n\n.RsdQpgzZbI9fI4mSfjJX {\n flex-shrink: 0;\n border-radius: 4px;\n width: 4px;\n background: #aa0000;\n box-shadow: 2px 0 4px 0 rgb(220 0 0 / 20%);\n}\n\n.oaWQstIJN1TotKTOLcwX {\n padding: 8px;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n flex-direction: column;\n}\n\n.NUKs26I_j0KAivvaQbz4 {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n padding: 4px 0;\n}\n\n.THOyqwrKlLrhlMXnDBZq {\n display: inline-flex;\n margin: 0;\n padding: 0;\n border: none;\n background: inherit;\n font-family: inherit;\n flex-grow: 1;\n font-weight: 500;\n font-size: 14px;\n flex-shrink: 0;\n text-decoration: none;\n color: #000;\n cursor: pointer;\n}\n\n.THOyqwrKlLrhlMXnDBZq:hover {\n text-decoration: underline;\n}\n\n.hd6lf7eoPHUFINDCC0u5 {\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.qXRXiNO7j_FMkOf4b1Hi {\n word-wrap: break-word;\n color: #333;\n}\n","",{version:3,sources:["webpack://./src/components/StatusDialog/TaskResultItem.module.css"],names:[],mappings:"AAAA;EACE,aAAa;EACb,mBAAmB;AACrB;;AAEA;EACE,cAAc;EACd,kBAAkB;EAClB,UAAU;EACV,mBAAmB;EACnB,0CAA0C;AAC5C;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,YAAY;EACZ,gBAAgB;EAChB,sBAAsB;AACxB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,QAAQ;EACR,cAAc;AAChB;;AAEA;EACE,oBAAoB;EACpB,SAAS;EACT,UAAU;EACV,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;EACpB,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,cAAc;EACd,qBAAqB;EACrB,WAAW;EACX,eAAe;AACjB;;AAEA;EACE,0BAA0B;AAC5B;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,QAAQ;EACR,cAAc;AAChB;;AAEA;EACE,qBAAqB;EACrB,WAAW;AACb",sourcesContent:[".root {\n display: flex;\n background: #f5f5f5;\n}\n\n.statusBar {\n flex-shrink: 0;\n border-radius: 4px;\n width: 4px;\n background: #aa0000;\n box-shadow: 2px 0 4px 0 rgb(220 0 0 / 20%);\n}\n\n.content {\n padding: 8px;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n flex-direction: column;\n}\n\n.titleArea {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n padding: 4px 0;\n}\n\n.file {\n display: inline-flex;\n margin: 0;\n padding: 0;\n border: none;\n background: inherit;\n font-family: inherit;\n flex-grow: 1;\n font-weight: 500;\n font-size: 14px;\n flex-shrink: 0;\n text-decoration: none;\n color: #000;\n cursor: pointer;\n}\n\n.file:hover {\n text-decoration: underline;\n}\n\n.actionArea {\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.text {\n word-wrap: break-word;\n color: #333;\n}\n"],sourceRoot:""}]),o.locals={root:"Rl6XMfFcB4M4Sp5RJbh8",statusBar:"RsdQpgzZbI9fI4mSfjJX",content:"oaWQstIJN1TotKTOLcwX",titleArea:"NUKs26I_j0KAivvaQbz4",file:"THOyqwrKlLrhlMXnDBZq",actionArea:"hd6lf7eoPHUFINDCC0u5",text:"qXRXiNO7j_FMkOf4b1Hi"};const s=o},500:(e,n,t)=>{t.r(n),t.d(n,{StatusDialog:()=>Q,default:()=>U});var a=t(788),l=t(15),r=t(286),o=t.n(r),s=t(823),i=t.n(s),c=t(509),A=t.n(c),d=t(214),u=t.n(d),m=t(586),g=t.n(m),E=t(703),p=t.n(E),f=t(181),C={};C.styleTagTransform=p(),C.setAttributes=u(),C.insert=A().bind(null,"head"),C.domAPI=i(),C.insertStyleElement=g(),o()(f.default,C);const x=f.default&&f.default.locals?f.default.locals:void 0,h=({item:e,projectPath:n,index:t})=>{const r=(0,l.useCloudpack)(),o=[e.location?.file||"(path unavailable)",e.location?.line,e.location?.column].filter(Boolean).join(":");return a.createElement("div",{className:x.root},a.createElement("div",{className:x.statusBar}),a.createElement("div",{className:x.content},a.createElement("div",{className:x.titleArea},a.createElement("button",{onClick:t=>{e.location&&(r.openCodeEditor.mutate({rootPath:n,relativePath:e.location?.file,line:e.location?.line,column:e.location?.column}),t.preventDefault())},className:x.file},t,". ",o)),a.createElement("div",{className:x.text},"[",e.source,"] ",e.text),a.createElement("pre",{className:x.text},JSON.stringify(e,null,2))))};var B=t(54),b=t(104),M=t.n(b),N=t(844),k=t(791),w=t(545);const I=({task:e})=>{const[n,t]=a.useState(void 0),{name:r,warnings:o=[],errors:s=[]}=e,i=(0,l.useCloudpack)(),c=!0===n||void 0===n&&s?.length>0,{inputPath:A,outputPath:d}=e,u=e=>{i.openFilePath.mutate({rootPath:e})};return a.createElement("div",{className:B.default.root},a.createElement("div",{className:v(e)},a.createElement("button",{className:B.default.expandButton,onClick:()=>t(!c),"aria-label":c?`Minimize ${r}`:`Expand ${r}`},a.createElement("img",{className:M()(B.default.expandIcon,!c&&B.default.collapsed),src:k,alt:"Chevron down icon"})),0===s?.length&&0===o?.length&&a.createElement("img",{className:B.default.errorIcon,src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyWk0xNS4yMTk3IDguOTY5NjdMMTAuNzUgMTMuNDM5M0w4Ljc4MDMzIDExLjQ2OTdDOC40ODc0NCAxMS4xNzY4IDguMDEyNTYgMTEuMTc2OCA3LjcxOTY3IDExLjQ2OTdDNy40MjY3OCAxMS43NjI2IDcuNDI2NzggMTIuMjM3NCA3LjcxOTY3IDEyLjUzMDNMMTAuMjE5NyAxNS4wMzAzQzEwLjUxMjYgMTUuMzIzMiAxMC45ODc0IDE1LjMyMzIgMTEuMjgwMyAxNS4wMzAzTDE2LjI4MDMgMTAuMDMwM0MxNi41NzMyIDkuNzM3NDQgMTYuNTczMiA5LjI2MjU2IDE2LjI4MDMgOC45Njk2N0MxNS45ODc0IDguNjc2NzggMTUuNTEyNiA4LjY3Njc4IDE1LjIxOTcgOC45Njk2N1oiIGZpbGw9IiMwMGFhMDAiLz4KPC9zdmc+Cg==",alt:"Success icon"}),s?.length>0&&a.createElement("img",{className:B.default.errorIcon,src:N,alt:"Error icon"}),a.createElement("div",{className:B.default.title},r),a.createElement("div",{className:B.default.farArea},function(e){return"pending"===e.status?"Running":[`Completed in ${e.durationMilliseconds}ms`,e.errors?.length&&`${e.errors.length} error${e.errors.length>1?"s":""}`,e.warnings?.length&&`${e.warnings.length} warning${e.warnings.length>1?"s":""}`].filter(Boolean).join(", ")}(e))),c&&(A?a.createElement(a.Fragment,null,a.createElement("div",{className:B.default.commands},a.createElement(w.Button,{onClick:()=>{A?i.restartTask.mutate({id:e.id,inputPath:A}):console.error("No input path for task",e)}},"Restart task")),a.createElement("div",{className:B.default.content},a.createElement("div",{className:B.default.title},"Details"),a.createElement("div",{className:B.default.nameValueArea},a.createElement("div",{className:B.default.name},"Input path"),a.createElement("div",{className:B.default.value},a.createElement("button",{className:B.default.linkButton,onClick:()=>u(A)},e.inputPath),a.createElement("button",{className:B.default.linkButton,onClick:()=>{A?i.openCodeEditor.mutate({rootPath:A,relativePath:"package.json"}):console.error("No input path for task",e)}},"(Package.json)"))),d&&a.createElement("div",{className:B.default.nameValueArea},a.createElement("div",{className:B.default.name},"Output path"),a.createElement("button",{className:B.default.linkButton,onClick:()=>u(d)},d)),s?.length>0&&a.createElement(a.Fragment,null,a.createElement("div",{className:B.default.title},"Errors"),a.createElement("div",{className:B.default.resultItems},s.map(((e,n)=>a.createElement(h,{key:n,item:e,projectPath:A,index:n+1}))))),o?.length>0&&a.createElement(a.Fragment,null,a.createElement("div",{className:B.default.title},"Warnings"),a.createElement("div",{className:B.default.resultItems},o.map(((e,n)=>a.createElement(h,{key:n,item:e,projectPath:A,index:n+1}))))))):a.createElement("div",{className:B.default.content},"No input path found for task. This is a Cloudpack bug. Please report it.")))};function v(e){const{errors:n=[],warnings:t=[]}=e;return M()(B.default.header,{[B.default.success]:0===n?.length&&0===t?.length,[B.default.warning]:0===n?.length&&t?.length>0,[B.default.error]:n?.length>0})}var D=t(279),y=t(816);const j=({searchFilter:e,issuesOnly:n})=>{let t=((()=>{const e=(0,l.useCloudpack)(),[n,t]=(0,a.useState)({tasks:[]});return(0,a.useEffect)((()=>{const n=e?.onDataChanged.subscribe(D.taskListSource,{onData:e=>{t(e)}});return()=>{n.unsubscribe()}}),[e]),n})().tasks||[]).sort(T);return e&&(e=e.toLowerCase(),t=t.filter((({name:n})=>e&&n?.toLowerCase().includes(e)))),n&&(t=t.filter((({errors:e,warnings:n})=>e?.length||n?.length))),a.createElement("div",{className:y.default.root},t.map((e=>a.createElement(I,{key:e.name,task:e}))))};function T(e,n){const t="pending"===e.status?1:0,a="pending"===n.status?1:0;if(t!==a)return t>a?-1:1;const l=e.errors?.length||0,r=n.errors?.length||0;return l!==r?l>r?-1:1:void 0===e.name&&void 0===n.name?e.id<n.id?-1:1:void 0===e.name?1:void 0===n.name||e.name<n.name?-1:1}var z=t(863),S=t(533),O={};O.styleTagTransform=p(),O.setAttributes=u(),O.insert=A().bind(null,"head"),O.domAPI=i(),O.insertStyleElement=g(),o()(S.default,O);const L=S.default&&S.default.locals?S.default.locals:void 0,P=({value:e,onChange:n})=>a.createElement(a.Fragment,null,"string"==typeof e&&a.createElement("input",{type:"text",placeholder:"Search",className:L.searchbox,onChange:n,value:e}));var Y=t(116);const Q=({onClose:e})=>{const n=(0,l.useCloudpack)(),[t,r]=a.useState(""),[o,s]=a.useState(!1),i=(0,a.useCallback)((e=>{e.preventDefault(),r(e.target.value)}),[]);return a.createElement(z.Dialog,{title:"Task results",id:Y.elementIds.statusDialogRoot,draggable:!0,onClose:e,commands:[a.createElement(w.Button,{primary:!0,onClick:()=>{n.restartAllTasks.mutate()},key:"restart"},"Restart all tasks"),a.createElement(w.Button,{onClick:()=>{s((e=>!e))},key:"issues"},o?"Show all tasks":"Show tasks with issues")]},a.createElement(P,{value:t,onChange:i}),a.createElement(j,{searchFilter:t,issuesOnly:o}))},U=Q},533:(e,n,t)=>{t.d(n,{default:()=>s});var a=t(25),l=t.n(a),r=t(191),o=t.n(r)()(l());o.push([e.id,".VVonEYuUEQsjEgbwvMfP {\n position: absolute;\n font-size: 14px;\n font-weight: 400;\n box-shadow: none;\n padding: 0px 4px;\n box-sizing: border-box;\n color: rgb(50, 49, 48);\n background-color: rgb(255, 255, 255);\n display: flex;\n flex-flow: row nowrap;\n align-items: stretch;\n border-radius: 2px;\n border: 1px solid rgb(96, 94, 92);\n height: 32px;\n min-width: 160px;\n top: 52px;\n right: 20px;\n}\n","",{version:3,sources:["webpack://./src/components/StatusDialog/Searchbox.module.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,eAAe;EACf,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAChB,sBAAsB;EACtB,sBAAsB;EACtB,oCAAoC;EACpC,aAAa;EACb,qBAAqB;EACrB,oBAAoB;EACpB,kBAAkB;EAClB,iCAAiC;EACjC,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,WAAW;AACb",sourcesContent:[".searchbox {\n position: absolute;\n font-size: 14px;\n font-weight: 400;\n box-shadow: none;\n padding: 0px 4px;\n box-sizing: border-box;\n color: rgb(50, 49, 48);\n background-color: rgb(255, 255, 255);\n display: flex;\n flex-flow: row nowrap;\n align-items: stretch;\n border-radius: 2px;\n border: 1px solid rgb(96, 94, 92);\n height: 32px;\n min-width: 160px;\n top: 52px;\n right: 20px;\n}\n"],sourceRoot:""}]),o.locals={searchbox:"VVonEYuUEQsjEgbwvMfP"};const s=o}};
2
- //# sourceMappingURL=119.chunk.js.map