Fix self-closing tags (#84)

Co-authored-by: AdrianGonz97 <[email protected]>
huntabyte · Jul 15, 2024 · 34fcbf7 · 34fcbf7
1 parent 0529aaf
commit 34fcbf7
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 31 deletions.
diff --git a/.changeset/serious-spies-serve.md b/.changeset/serious-spies-serve.md
@@ -0,0 +1,5 @@
+---
+'cmdk-sv': patch
+---
+
+fix: Removes self-closing non-void elements to fix Svelte 5 warnings
diff --git a/.prettierrc b/.prettierrc
@@ -4,6 +4,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/package.json b/package.json
@@ -9,8 +9,8 @@
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
 		"test": "vitest",
 		"release": "changeset publish",
 		"changeset": "changeset"
@@ -48,8 +48,8 @@
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
 		"postcss-preset-env": "^9.2.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.5",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
 		"publint": "^0.1.9",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" style="color-scheme: dark">
 	<head>
 		<meta charset="utf-8" />

diff --git a/src/docs/components/cmdk/framer/framer-cmdk.svelte b/src/docs/components/cmdk/framer/framer-cmdk.svelte
@@ -100,10 +100,10 @@
 						<img src="/rauno.jpeg" alt="Avatar of Rauno" />
 					{:else if value === 'Slider'}
 						<div data-cmdk-framer-slider="">
-							<div />
+							<div></div>
 						</div>
 					{:else if value === 'Container'}
-						<div data-cmdk-framer-container="" />
+						<div data-cmdk-framer-container=""></div>
 					{/if}
 				</div>
 			</div>

diff --git a/src/docs/components/cmdk/raycast/raycast-cmdk.svelte b/src/docs/components/cmdk/raycast/raycast-cmdk.svelte
@@ -21,7 +21,7 @@
 
 <div class="raycast">
 	<Command.Root bind:value>
-		<div data-cmdk-raycast-top-shine="" />
+		<div data-cmdk-raycast-top-shine=""></div>
 		<Command.Input autofocus placeholder="Search for apps and commands..." bind:el={inputEl} />
 		<hr data-cmdk-raycast-loader="" />
 		<Command.List bind:el={listEl}>

diff --git a/src/docs/components/code-block.svelte b/src/docs/components/code-block.svelte
@@ -36,8 +36,8 @@
 </script>
 
 <div class="codeBlock">
-	<div class="line2" aria-hidden />
-	<div class="line3" aria-hidden />
+	<div class="line2" aria-hidden></div>
+	<div class="line3" aria-hidden></div>
 	<pre
 		use:setCodeString
 		class="root prism-code language-svelte"
@@ -46,7 +46,7 @@
 		<button aria-label="Copy Code" on:click={copyCode}>
 			<CopyIcon />
 		</button>
-		<div class="shine" />
+		<div class="shine"></div>
 			{@html rawCodeString}
 	</pre>
 </div>
diff --git a/src/docs/components/theme-switcher.svelte b/src/docs/components/theme-switcher.svelte
@@ -93,7 +93,7 @@
 			<svelte:component this={icon} />
 			{key}
 			{#if isActive}
-				<div class="activeTheme" in:send={{ key: 'active' }} out:receive={{ key: 'active' }} />
+				<div class="activeTheme" in:send={{ key: 'active' }} out:receive={{ key: 'active' }}></div>
 			{/if}
 		</button>
 	{/each}

diff --git a/src/lib/cmdk/components/CommandSeparator.svelte b/src/lib/cmdk/components/CommandSeparator.svelte
@@ -21,6 +21,6 @@
 	{#if asChild}
 		<slot {attrs} />
 	{:else}
-		<div {...attrs} {...$$restProps} />
+		<div {...attrs} {...$$restProps}></div>
 	{/if}
 {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -48,7 +48,7 @@
 		</div>
 		<ThemeSwitcher bind:theme />
 
-		<div aria-hidden class="line" />
+		<div aria-hidden class="line"></div>
 		<CodeBlock />
 	</div>
 	<Footer />

diff --git a/src/styles/app.postcss b/src/styles/app.postcss
@@ -293,7 +293,9 @@
 		&[aria-selected] {
 			background: #ffffff;
 			color: var(--gray12);
-			box-shadow: 0px 2px 5px -2px rgb(0 0 0 / 15%), 0 1px 3px -1px rgb(0 0 0 / 20%);
+			box-shadow:
+				0px 2px 5px -2px rgb(0 0 0 / 15%),
+				0 1px 3px -1px rgb(0 0 0 / 20%);
 		}
 	}
 }
@@ -400,7 +402,9 @@
 		border-radius: inherit;
 		padding: var(--size);
 		background: linear-gradient(to top, var(--gray1), var(--gray7));
-		mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
+		mask:
+			linear-gradient(black, black) content-box,
+			linear-gradient(black, black);
 		mask-composite: exclude;
 		transform: translateZ(0);
 	}

diff --git a/src/styles/code.postcss b/src/styles/code.postcss
@@ -29,7 +29,10 @@
 		right: 12px;
 		color: var(--gray11);
 		cursor: copy;
-		transition: color 150ms ease, background 150ms ease, transform 150ms ease;
+		transition:
+			color 150ms ease,
+			background 150ms ease,
+			transform 150ms ease;
 
 		&:hover {
 			color: var(--gray12);