better tooltips in playground (#11705)

* better tooltips in playground

* update some tests that a drive-by fix broke

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);

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]
 	}
 });

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]
 	}
 });

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]
 	}
 });

pnpm-lock.yaml

@@ -223,8 +223,8 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0(@codemirror/autocomplete@6.12.0)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.24.0)(@lezer/common@1.2.1)(@lezer/highlight@1.2.0)(@lezer/javascript@1.4.15)(@lezer/lr@1.4.0)
       '@rich_harris/svelte-split-pane':
-        specifier: ^1.1.2
-        version: 1.1.2(svelte@packages+svelte)
+        specifier: ^1.1.3
+        version: 1.1.3(svelte@packages+svelte)
       '@rollup/browser':
         specifier: ^3.28.0
         version: 3.29.4
@@ -2320,16 +2320,16 @@ packages:
       '@resvg/resvg-js-win32-x64-msvc': 2.6.0
     dev: true
 
-  /@rich_harris/svelte-split-pane@1.1.1(svelte@4.2.9):
-    resolution: {integrity: sha512-y2RRLyrN6DCeIgwA423aAIv/T5JqQeOl2XogBQ/21DvA2IF7oyrLUtXMxmQL2va2NFdeJO6MDx6nDX5X7kau7A==}
+  /@rich_harris/svelte-split-pane@1.1.2(svelte@4.2.9):
+    resolution: {integrity: sha512-O601UlgGzrn6Nva7uLAF25h63wvrI2rxDh5KTEXd0pdTP7LetHR/rqgi8jyPIgRDCL86eoopEdC3ejOOQoWGWQ==}
     peerDependencies:
-      svelte: ^3.54.0
+      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
     dependencies:
       svelte: 4.2.9
     dev: false
 
-  /@rich_harris/svelte-split-pane@1.1.2(svelte@packages+svelte):
-    resolution: {integrity: sha512-O601UlgGzrn6Nva7uLAF25h63wvrI2rxDh5KTEXd0pdTP7LetHR/rqgi8jyPIgRDCL86eoopEdC3ejOOQoWGWQ==}
+  /@rich_harris/svelte-split-pane@1.1.3(svelte@packages+svelte):
+    resolution: {integrity: sha512-eziKez1ncDfLqJQsViwLG2rYNfMEa3pYBKFUBfNTChgT5lUnofm5IDHxupAKklKvRpTXCVhQXb1MxLUfj5UgFQ==}
     peerDependencies:
       svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
     dependencies:
@@ -2739,7 +2739,7 @@ packages:
       '@neocodemirror/svelte': 0.0.15(@codemirror/autocomplete@6.12.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.1)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.0)(@codemirror/view@6.24.0)
       '@replit/codemirror-lang-svelte': 6.0.0(@codemirror/autocomplete@6.12.0)(@codemirror/lang-css@6.2.1)(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.24.0)(@lezer/common@1.2.1)(@lezer/highlight@1.2.0)(@lezer/javascript@1.4.15)(@lezer/lr@1.4.0)
       '@replit/codemirror-vim': 6.1.0(@codemirror/commands@6.3.3)(@codemirror/language@6.10.1)(@codemirror/search@6.5.6)(@codemirror/state@6.4.0)(@codemirror/view@6.24.0)
-      '@rich_harris/svelte-split-pane': 1.1.1(svelte@4.2.9)
+      '@rich_harris/svelte-split-pane': 1.1.2(svelte@4.2.9)
       '@rollup/browser': 3.29.4
       '@sveltejs/site-kit': 5.2.2(@sveltejs/kit@2.4.3)(svelte@4.2.9)
       acorn: 8.11.3

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",

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 {

sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte

@@ -22,7 +22,6 @@
 	<div class="editor notranslate" translate="no">
 		<CodeMirror
 			bind:this={$module_editor}
-			{autocomplete}
 			diagnostics={() => {
 				if (error) {
 					return [
@@ -30,7 +29,16 @@
 							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;
+						}
 					}));
 				}
 

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',