better tooltips in playground (#11705)

* better tooltips in playground * update some tests that a drive-by fix broke
sveltejs · May 21, 2024 · 02520ae · 02520ae
1 parent 506f9d2
commit 02520ae
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 54 deletions.
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -217,7 +217,7 @@ export default function tag(parser) {
 	while ((attribute = read(parser))) {
 		if (attribute.type === 'Attribute' || attribute.type === 'BindDirective') {
 			if (unique_names.includes(attribute.name)) {
-				e.attribute_duplicate(attribute.start);
+				e.attribute_duplicate(attribute);
 				// <svelte:element bind:this this=..> is allowed
 			} else if (attribute.name !== 'this') {
 				unique_names.push(attribute.name);

diff --git a/packages/svelte/tests/compiler-errors/samples/attribute-unique-binding/_config.js b/packages/svelte/tests/compiler-errors/samples/attribute-unique-binding/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'attribute_duplicate',
 		message: 'Attributes need to be unique',
-		position: [17, 17]
+		position: [17, 25]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/attribute-unique-shorthand/_config.js b/packages/svelte/tests/compiler-errors/samples/attribute-unique-shorthand/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'attribute_duplicate',
 		message: 'Attributes need to be unique',
-		position: [17, 17]
+		position: [17, 24]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/attribute-unique/_config.js b/packages/svelte/tests/compiler-errors/samples/attribute-unique/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'attribute_duplicate',
 		message: 'Attributes need to be unique',
-		position: [17, 17]
+		position: [17, 28]
 	}
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/svelte-5-preview/package.json b/sites/svelte-5-preview/package.json
@@ -46,7 +46,7 @@
     "@lezer/highlight": "^1.1.6",
     "@neocodemirror/svelte": "0.0.15",
     "@replit/codemirror-lang-svelte": "^6.0.0",
-    "@rich_harris/svelte-split-pane": "^1.1.2",
+    "@rich_harris/svelte-split-pane": "^1.1.3",
     "@rollup/browser": "^3.28.0",
     "acorn": "^8.10.0",
     "codemirror": "^6.0.1",

diff --git a/sites/svelte-5-preview/src/lib/CodeMirror.svelte b/sites/svelte-5-preview/src/lib/CodeMirror.svelte
@@ -246,6 +246,8 @@
 
 <style>
 	.codemirror-container {
+		--warning: hsl(40 100% 70%);
+		--error: hsl(0 100% 90%);
 		position: relative;
 		width: 100%;
 		height: 100%;
@@ -254,26 +256,129 @@
 		overflow: hidden;
 	}
 
-	.codemirror-container :global(.mark-text) {
-		background-color: var(--sk-selection-color);
-		backdrop-filter: opacity(40%);
+	:global(.dark) .codemirror-container {
+		--warning: hsl(40 100% 50%);
+		--error: hsl(0 100% 70%);
 	}
 
-	.codemirror-container :global(.cm-editor) {
-		height: 100%;
-	}
+	.codemirror-container :global {
+		* {
+			font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono);
+		}
 
-	.codemirror-container :global(*) {
-		font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono) !important;
-	}
+		.mark-text {
+			background-color: var(--sk-selection-color);
+			backdrop-filter: opacity(40%);
+		}
 
-	.codemirror-container :global(.error-loc) {
-		position: relative;
-		border-bottom: 2px solid #da106e;
-	}
+		.cm-editor {
+			height: 100%;
+		}
+
+		.error-loc {
+			position: relative;
+			border-bottom: 2px solid #da106e;
+		}
+
+		.error-line {
+			background-color: rgba(200, 0, 0, 0.05);
+		}
+
+		.cm-tooltip {
+			border: none;
+			background-color: transparent;
+			font-family: var(--sk-font);
+			max-width: calc(100vw - 10em);
+			position: relative;
+		}
+
+		.cm-tooltip-section {
+			position: relative;
+			padding: 0.5em;
+			/* width: calc(100vw - 10em); */
+			filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
+			background: var(--bg);
+			border-radius: 2px;
+		}
+
+		.cm-tooltip-section::before {
+			content: '';
+			position: absolute;
+			left: 20px;
+			width: 8px;
+			height: 8px;
+			transform: rotate(45deg);
+			background-color: var(--bg);
+			border-radius: 2px;
+		}
+
+		.cm-tooltip-below .cm-tooltip-section {
+			top: 10px;
+		}
+
+		.cm-tooltip-above .cm-tooltip-section {
+			bottom: 10px;
+		}
 
-	.codemirror-container :global(.error-line) {
-		background-color: rgba(200, 0, 0, 0.05);
+		.cm-tooltip-below .cm-tooltip-section::before {
+			top: -4px;
+		}
+
+		.cm-tooltip-above .cm-tooltip-section::before {
+			bottom: -4px;
+		}
+
+		.cm-tooltip:has(.cm-diagnostic-warning) {
+			--bg: var(--warning);
+			--fg: #222;
+		}
+
+		.cm-tooltip:has(.cm-diagnostic-error) {
+			--bg: var(--error);
+			--fg: #222;
+		}
+
+		.cm-diagnostic {
+			padding: 0.2em 0.4em;
+			position: relative;
+			border: none;
+			border-radius: 2px;
+		}
+
+		.cm-diagnostic:not(:last-child) {
+			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		}
+
+		.cm-diagnostic-error {
+			border: none;
+			filter: drop-shadow(0px 0px 6px var(--error-bg));
+		}
+
+		.cm-diagnostic :not(code) {
+			font-family: var(--sk-font);
+		}
+
+		.cm-diagnosticText {
+			color: var(--fg);
+			position: relative;
+			z-index: 2;
+		}
+
+		.cm-diagnosticText code {
+			color: inherit;
+			background-color: rgba(0, 0, 0, 0.05);
+			border-radius: 2px;
+			top: 0;
+			padding: 0.2em;
+			font-size: 0.9em;
+		}
+
+		.cm-diagnosticText strong {
+			font-size: 0.9em;
+			/* font-weight: 700; */
+			font-family: var(--sk-font-mono);
+			opacity: 0.7;
+		}
 	}
 
 	pre {

diff --git a/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte b/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
@@ -22,15 +22,23 @@
 	<div class="editor notranslate" translate="no">
 		<CodeMirror
 			bind:this={$module_editor}
-			{autocomplete}
 			diagnostics={() => {
 				if (error) {
 					return [
 						{
 							severity: 'error',
 							from: error.position[0],
 							to: error.position[1],
-							message: error.message
+							message: error.message,
+							renderMessage: () => {
+								// TODO expose error codes, so we can link to docs in future
+								const span = document.createElement('span');
+								span.innerHTML = `${error.message
+									.replace(/&/g, '&amp;')
+									.replace(/</g, '&lt;')
+									.replace(/`(.+?)`/g, `<code>$1</code>`)}`;
+								return span;
+							}
 						}
 					];
 				}
@@ -40,7 +48,15 @@
 						severity: 'warning',
 						from: warning.start.character,
 						to: warning.end.character,
-						message: warning.message
+						message: warning.message,
+						renderMessage: () => {
+							const span = document.createElement('span');
+							span.innerHTML = `${warning.message
+								.replace(/&/g, '&amp;')
+								.replace(/</g, '&lt;')
+								.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${warning.code})</strong>`;
+							return span;
+						}
 					}));
 				}
 

diff --git a/sites/svelte-5-preview/src/lib/theme.js b/sites/svelte-5-preview/src/lib/theme.js
@@ -5,7 +5,7 @@ import { tags as t } from '@lezer/highlight';
 const ERROR_HUE = 0;
 const WARNING_HUE = 40;
 
-const WARNING_FG = `hsl(${WARNING_HUE} 100% 40%)`;
+const WARNING_FG = `hsl(${WARNING_HUE} 100% 60%)`;
 const WARNING_BG = `hsl(${WARNING_HUE} 100% 40% / 0.5)`;
 
 const ERROR_FG = `hsl(${ERROR_HUE} 100% 40%)`;
@@ -80,28 +80,6 @@ const svelteThemeStyles = EditorView.theme(
 			color: '#ddd'
 		},
 
-		'.cm-tooltip': {
-			border: 'none',
-			backgroundColor: 'var(--sk-back-3)'
-		},
-		'.cm-diagnostic': {
-			padding: '0.2em 0.4em',
-			backgroundColor: 'var(--sk-back-3)',
-			color: 'var(--sk-text-1)',
-			border: 'none',
-			borderRadius: '2px',
-			position: 'relative',
-			top: '2px',
-			zIndex: 2
-		},
-		'.cm-diagnostic-error': {
-			border: `1px solid ${ERROR_FG}`,
-			filter: `drop-shadow(0px 0px 6px ${ERROR_BG})`
-		},
-		'.cm-diagnostic-warning': {
-			border: `1px solid ${WARNING_FG}`,
-			filter: `drop-shadow(0px 0px 6px ${WARNING_BG})`
-		},
 		// https://github.com/codemirror/lint/blob/271b35f5d31a7e3645eaccbfec608474022098e1/src/lint.ts#L620
 		'.cm-lintRange': {
 			backgroundPosition: 'left bottom',