Add JSR package support

src/lib/SearchableJson.svelte

@@ -22,7 +22,7 @@
 	packageManager.subscribe((newValues) => {
 		const grouped = newValues.reduce(
 			(carry, item) => {
-				if (['npm', 'pnpm', 'yarn'].includes(item)) {
+				if (['npm', 'pnpm', 'yarn', 'deno'].includes(item)) {
 					carry['npm'].push(item);
 				}
 				if (['gem', 'bundler'].includes(item)) {
@@ -79,9 +79,10 @@
 				$packageManager = (detail ?? []).map((i) => i.value);
 			}}
 			items={[
-				{ label: 'NPM', value: 'npm', group: 'NPM' },
-				{ label: 'PNPM', value: 'pnpm', group: 'NPM' },
-				{ label: 'Yarn', value: 'yarn', group: 'NPM' },
+				{ label: 'NPM', value: 'npm', group: 'JS+TS' },
+				{ label: 'PNPM', value: 'pnpm', group: 'JS+TS' },
+				{ label: 'Yarn', value: 'yarn', group: 'JS+TS' },
+				{ label: 'Deno', value: 'deno', group: 'JS+TS' },
 				{ label: 'RubyGem', value: 'gem', group: 'Gem' },
 				{ label: 'Bundler', value: 'bundler', group: 'Gem' }
 			]}
@@ -105,6 +106,7 @@
 			date={entry.date}
 			npm={entry.npm}
 			gem={entry.gem}
+			jsr={entry.jsr}
 			version={entry.version}
 		/>
 	{/each}

src/lib/components/ComponentIndex/Card.svelte

@@ -3,40 +3,61 @@
 	import { copyToClipboard } from '$lib/utils/clipboard';
 	import { packageManager as manager } from '$stores/packageManager';
 	import { relativeDate } from '$utils/relativeDate';
+	import { derived } from 'svelte/store';
 
 	export let title: string;
 	export let description: string;
 	export let stars: string;
 	export let npm: string | undefined = undefined;
 	export let gem: string | undefined = undefined;
+	export let jsr: string | undefined = undefined;
 	export let repository: string | undefined = undefined;
 	export let date = undefined;
 	export let version = undefined;
 
 	let clipboardCopy = false;
 
 	const copy = () => {
-		copyToClipboard(packageManagerAction($manager, npm, gem)).then(() => (clipboardCopy = false));
+		copyToClipboard($managerAction).then(() => (clipboardCopy = false));
 		clipboardCopy = true;
 	};
 
-	const packageManagerAction = ($manager: Array<string>, npm?: string, gem?: string): string => {
-		if (npm) {
-			return `${packageManagers[$manager.find((m) => ['npm', 'pnpm', 'yarn'].includes(m)) ?? 'npm']} ${npm}`;
+	const managerAction = derived(manager, ($manager) => {
+		if (npm && $manager.includes('npm')) {
+			return `npm install ${npm}`;
 		}
-		if (gem) {
-			return `${packageManagers[$manager.find((m) => ['gem', 'bundler'].includes(m)) ?? 'gem']} ${gem}`;
+		if (npm && $manager.includes('pnpm')) {
+			return `pnpm add ${npm}`;
+		}
+		if (npm && $manager.includes('yarn')) {
+			return `yarn add ${npm}`;
+		}
+		if (npm && $manager.includes('deno')) {
+			return `deno install npm:${npm}`;
 		}
-		return '';
-	};
 
-	const packageManagers = {
-		npm: 'npm install',
-		pnpm: 'pnpm add',
-		yarn: 'yarn add',
-		gem: 'gem install',
-		bundler: 'bundle add'
-	};
+		if (gem && $manager.includes('gem')) {
+			return `gem install ${gem}`;
+		}
+		if (gem && $manager.includes('bundler')) {
+			return `bundle add ${gem}`;
+		}
+
+		if (jsr && $manager.includes('npm')) {
+			return `npx jsr add ${jsr}`;
+		}
+		if (jsr && $manager.includes('pnpm')) {
+			return `pnpm dlx jsr add ${jsr}`;
+		}
+		if (jsr && $manager.includes('yarn')) {
+			return `yarn dlx jsr add ${jsr}`;
+		}
+		if (jsr && $manager.includes('deno')) {
+			return `deno install ${jsr}`;
+		}
+
+		return '';
+	});
 </script>
 
 <div class="card flex flex-col rounded-md p-3 text-base lg:text-lg" id={title}>
@@ -78,12 +99,8 @@
 		</div>
 	</div>
 
-	{#if npm || gem}
-		<Tag
-			click={() => copy()}
-			variant="copy"
-			title={clipboardCopy ? 'copied!' : packageManagerAction($manager, npm, gem)}
-		/>
+	{#if npm || gem || jsr}
+		<Tag click={() => copy()} variant="copy" title={clipboardCopy ? 'copied!' : $managerAction} />
 	{/if}
 	<p class="flex-grow pb-6">{description}</p>
 	<div class="flex items-end justify-between">

src/lib/schemas.js

@@ -34,15 +34,17 @@ export const packagesSchema = z.array(
 			description: z.string().max(250),
 			categories: z.array(z.enum(PACKAGES_CATEGORIES)).min(1).max(6)
 		}),
-		z
-			.object({
+		z.union([
+			z.object({
 				npm: z.string().regex(packageNameRegex)
+			}),
+			z.object({
+				gem: z.string().regex(/^[a-z_-]+$/)
+			}),
+			z.object({
+				jsr: z.string().regex(/^@[a-z0-9-]+\/[a-z0-9-]+$/)
 			})
-			.or(
-				z.object({
-					gem: z.string().regex(/^[a-z_-]+$/)
-				})
-			)
+		])
 	)
 );
 

src/routes/help/submitting/+page.svelte

@@ -35,14 +35,15 @@
 	let npm = 'svelte-lorem-ipsum';
 	let categories;
 	let repository = 'https://github.com/sveltejs/svelte-lorem-ipsum';
+	let manager = { value: 'npm' };
 
 	$: pathName = `${type.value}s`;
 	$: jsonSnippet = {
 		title,
 		url: url ? url : undefined,
 		repository: repository ? repository : undefined,
 		description,
-		npm: npm ? npm : undefined,
+		[manager.value]: type.value === 'package' ? npm : undefined,
 		categories: categories?.map((c) => c.value)
 	};
 
@@ -115,13 +116,33 @@
 			<span class="input-helper">A short description of the package</span>
 		</div>
 	</div>
-	<div class="input-wrapper">
-		<label for="npm">NPM:</label>
-		<div>
-			<input id="npm" type="text" bind:value={npm} />
-			<span class="input-helper">The npm name of the package</span>
+	{#if type.value === 'package'}
+		<div class="input-wrapper">
+			<label for="npm">
+				<SvelteSelect
+					id="categories"
+					items={[
+						{ value: 'npm', label: 'NPM' },
+						{ value: 'jsr', label: 'JSR' },
+						{ value: 'gem', label: 'Ruby' }
+					]}
+					showIndicator
+					isClearable={false}
+					bind:value={manager}
+				/>
+			</label>
+			<div>
+				<input id="npm" type="text" bind:value={npm} />
+				<span class="input-helper"
+					>The {manager.value === 'npm'
+						? 'npm'
+						: manager.value === 'jsr'
+							? 'deno jsr package'
+							: 'gem'} name of the package</span
+				>
+			</div>
 		</div>
-	</div>
+	{/if}
 	<div class="input-wrapper">
 		<label for="categories" class="required">Categories:</label>
 		<div>