From 3b87a6425482d36f7c083039ad8d99d762a38145 Mon Sep 17 00:00:00 2001 From: MacFJA Date: Fri, 25 Oct 2024 21:46:09 +0200 Subject: [PATCH] Add JSR support Close #699 --- src/lib/SearchableJson.svelte | 10 ++-- src/lib/components/ComponentIndex/Card.svelte | 59 ++++++++++++------- src/lib/schemas.js | 16 ++--- src/routes/help/submitting/+page.svelte | 35 ++++++++--- 4 files changed, 81 insertions(+), 39 deletions(-) diff --git a/src/lib/SearchableJson.svelte b/src/lib/SearchableJson.svelte index 00bac0375..f0aa24ca5 100644 --- a/src/lib/SearchableJson.svelte +++ b/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} diff --git a/src/lib/components/ComponentIndex/Card.svelte b/src/lib/components/ComponentIndex/Card.svelte index e7a0b1498..cfef38649 100644 --- a/src/lib/components/ComponentIndex/Card.svelte +++ b/src/lib/components/ComponentIndex/Card.svelte @@ -3,12 +3,14 @@ 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; @@ -16,27 +18,46 @@ let clipboardCopy = false; const copy = () => { - copyToClipboard(packageManagerAction($manager, npm, gem)).then(() => (clipboardCopy = false)); + copyToClipboard($managerAction).then(() => (clipboardCopy = false)); clipboardCopy = true; }; - const packageManagerAction = ($manager: Array, 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 ''; + });
@@ -78,12 +99,8 @@
- {#if npm || gem} - copy()} - variant="copy" - title={clipboardCopy ? 'copied!' : packageManagerAction($manager, npm, gem)} - /> + {#if npm || gem || jsr} + copy()} variant="copy" title={clipboardCopy ? 'copied!' : $managerAction} /> {/if}

{description}

diff --git a/src/lib/schemas.js b/src/lib/schemas.js index ff1ef9e8e..51a0dd6b9 100644 --- a/src/lib/schemas.js +++ b/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_-]+$/) - }) - ) + ]) ) ); diff --git a/src/routes/help/submitting/+page.svelte b/src/routes/help/submitting/+page.svelte index af71e689d..23eaf7de5 100644 --- a/src/routes/help/submitting/+page.svelte +++ b/src/routes/help/submitting/+page.svelte @@ -35,6 +35,7 @@ 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 = { @@ -42,7 +43,7 @@ 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 @@ A short description of the package
-
- -
- - The npm name of the package + {#if type.value === 'package'} +
+ +
+ + The {manager.value === 'npm' + ? 'npm' + : manager.value === 'jsr' + ? 'deno jsr package' + : 'gem'} name of the package +
-
+ {/if}