Added Base Package.json Page

src/lib/SingleInputSubmitButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = HTMLButtonAttributes;
+
+	let { ...rest }: Props = $props();
+</script>
+
+<button {...rest} type="submit">→</button>
+
+<style>
+	button {
+		background: none;
+		border: none;
+		color: var(--accent);
+		font-family: inherit;
+		font-size: 1.125rem;
+		padding: 0.625rem 0.75rem;
+		cursor: pointer;
+		flex-shrink: 0;
+		line-height: 1;
+	}
+
+	button:hover {
+		color: var(--accent-hover);
+	}
+</style>

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import { all } from 'module-replacements';
 	import Autocomplete from '$lib/Autocomplete.svelte';
 	import ReplacementsTitle from '$lib/ReplacementsTitle.svelte';
+	import SingleInputSubmitButton from '$lib/SingleInputSubmitButton.svelte';
 	import { scopify } from '$lib/utils';
 
 	const examples = ['is-number', 'left-pad', 'is-odd', 'object-assign'];
@@ -56,7 +57,7 @@
 				on_select_navigate_to={navigate_to}
 				autofocus
 			/>
-			<button type="submit" class="submit-btn" aria-label="Search">→</button>
+			<SingleInputSubmitButton aria-label="Search" />
 		</form>
 
 		<div class="examples">
@@ -134,22 +135,6 @@
 		border-color: var(--accent);
 	}
 
-	.submit-btn {
-		background: none;
-		border: none;
-		color: var(--accent);
-		font-family: inherit;
-		font-size: 1.125rem;
-		padding: 0.625rem 0.75rem;
-		cursor: pointer;
-		flex-shrink: 0;
-		line-height: 1;
-	}
-
-	.submit-btn:hover {
-		color: var(--accent-hover);
-	}
-
 	.examples {
 		margin-top: 2rem;
 	}

src/routes/package-json/+page.server.ts

@@ -0,0 +1,67 @@
+import { fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { all } from 'module-replacements';
+export const prerender = false;
+
+function is_record(value: unknown): value is Record<string, unknown> {
+	return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData();
+		const package_json = data.get('package_json');
+
+		if (!package_json) {
+			return fail(400, { package_json, error: 'Paste a package.json file to scan.' });
+		}
+
+		let parsed_json: unknown;
+		try {
+			parsed_json = JSON.parse(package_json.toString());
+		} catch {
+			return fail(400, { package_json, error: 'File was not valid JSON.' });
+		}
+
+		if (!is_record(parsed_json)) {
+			return fail(400, {
+				package_json,
+				error: 'File was an invalid format (not an object).'
+			});
+		}
+
+		if (!parsed_json['devDependencies'] && !parsed_json['dependencies']) {
+			return fail(400, {
+				package_json,
+				error: 'No dependencies or devDependencies found.'
+			});
+		}
+
+		const dev_deps = parsed_json['devDependencies'] ?? {};
+		const prod_deps = parsed_json['dependencies'] ?? {};
+
+		if (!is_record(dev_deps) || !is_record(prod_deps)) {
+			return fail(400, {
+				package_json,
+				error: 'dependencies and devDependencies must be objects.'
+			});
+		}
+
+		const replacements = [];
+		for (const mapping of Object.keys(all.mappings)) {
+			const match = dev_deps[mapping] ?? prod_deps[mapping];
+			if (match) {
+				replacements.push({
+					dep: mapping,
+					replacement: all.mappings[mapping]
+				});
+			}
+		}
+
+		return {
+			success: true,
+			checked: Object.keys(dev_deps).length + Object.keys(prod_deps).length,
+			replacements
+		};
+	}
+} satisfies Actions;