From fc0064f6a0ed4c66a726a93786f7e1bb39bcfe80 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Sat, 13 May 2023 11:17:27 +0530 Subject: Initial Commit * Implements Basic Routing and API * Implements Package.json file select and json parse * Displays Project Name, Version & Desc from the package.json * Fetch all package details using npm registry API and map it based on package name --- .vscode/extensions.json | 5 ++ .vscode/settings.json | 5 ++ README.md | 11 ++++ components/Button.tsx | 11 ++++ deno.json | 10 +++ deno.lock | 138 +++++++++++++++++++++++++++++++++++++++++ dev.ts | 5 ++ fresh.gen.ts | 30 +++++++++ import_map.json | 10 +++ islands/ListPackageDetails.tsx | 31 +++++++++ islands/UploadButton.tsx | 17 +++++ main.ts | 10 +++ routes/[name].tsx | 5 ++ routes/analyze.tsx | 39 ++++++++++++ routes/api/npm.ts | 30 +++++++++ routes/api/npmregistry.ts | 9 +++ routes/index.tsx | 16 +++++ static/favicon.ico | Bin 0 -> 22382 bytes static/logo.svg | 6 ++ 19 files changed, 388 insertions(+) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100644 README.md create mode 100644 components/Button.tsx create mode 100644 deno.json create mode 100644 deno.lock create mode 100644 dev.ts create mode 100644 fresh.gen.ts create mode 100644 import_map.json create mode 100644 islands/ListPackageDetails.tsx create mode 100644 islands/UploadButton.tsx create mode 100644 main.ts create mode 100644 routes/[name].tsx create mode 100644 routes/analyze.tsx create mode 100644 routes/api/npm.ts create mode 100644 routes/api/npmregistry.ts create mode 100644 routes/index.tsx create mode 100644 static/favicon.ico create mode 100644 static/logo.svg diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..09cf720 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "denoland.vscode-deno" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f4f84f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "deno.enable": true, + "deno.lint": true, + "editor.defaultFormatter": "denoland.vscode-deno" +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..b8831c0 --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +# NPM Package Analyzer + +### Usage + +Start the project: + +``` +deno task start +``` + +This will watch the project directory and restart as necessary. diff --git a/components/Button.tsx b/components/Button.tsx new file mode 100644 index 0000000..0d10b4b --- /dev/null +++ b/components/Button.tsx @@ -0,0 +1,11 @@ +import { JSX } from "preact"; +import { IS_BROWSER } from "$fresh/runtime.ts"; + +export function Button(props: JSX.HTMLAttributes) { + return ( + + + ); +} \ No newline at end of file diff --git a/main.ts b/main.ts new file mode 100644 index 0000000..dedce9c --- /dev/null +++ b/main.ts @@ -0,0 +1,10 @@ +/// +/// +/// +/// +/// + +import { start } from "$fresh/server.ts"; +import manifest from "./fresh.gen.ts"; + +await start(manifest); diff --git a/routes/[name].tsx b/routes/[name].tsx new file mode 100644 index 0000000..9c06827 --- /dev/null +++ b/routes/[name].tsx @@ -0,0 +1,5 @@ +import { PageProps } from "$fresh/server.ts"; + +export default function Greet(props: PageProps) { + return
Hello {props.params.name}
; +} diff --git a/routes/analyze.tsx b/routes/analyze.tsx new file mode 100644 index 0000000..0889986 --- /dev/null +++ b/routes/analyze.tsx @@ -0,0 +1,39 @@ +import { Handlers, PageProps } from "$fresh/server.ts"; +import ListPackageDetails from "../islands/ListPackageDetails.tsx"; +import { handler as fetchPackages } from "./api/npm.ts"; + +export const handler: Handlers = { + async POST(req, ctx) { + const form = await req.formData(); + const fileData = form.get("packagefile") as File; + const packagejson = await parsePackageJson(fileData); + const packages = {...packagejson.dependencies, ...packagejson.devDependencies}; + const {name, version, description} = packagejson + return ctx.render({packages, name, version, description}); + }, +}; + +const parsePackageJson = (fileData: File) => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsText(fileData); + reader.addEventListener("load", (event: any) => { + resolve(JSON.parse(reader.result as string)); + }); + }); +}; + +export default function Analyze({ data }: PageProps) { + const {packages, name, version, description} = data; + return ( +
+ Analyzer + +
+ ); +} diff --git a/routes/api/npm.ts b/routes/api/npm.ts new file mode 100644 index 0000000..4063fc7 --- /dev/null +++ b/routes/api/npm.ts @@ -0,0 +1,30 @@ +import { Handlers } from "$fresh/server.ts"; + +export const handler: Handlers = { + async POST(_req, ctx) { + const requestPackages: Object = await _req.json(); + // Loop through items + console.log(typeof requestPackages) + let packageUrls: any[] = []; + for (let packageName in requestPackages) { + packageUrls = [ + ...packageUrls, + `https://registry.npmjs.org/${packageName}` + ]; + } + + const packageDetailsResponse = await fetchPackageDetails(packageUrls); + const packageDetails = Object.keys(requestPackages).map((packageName, index) => { + return { + [packageName]: packageDetailsResponse[index] + } + }) + return Response.json({ packageDetails }); + }, +}; + +async function fetchPackageDetails(packageUrls: any[]) { + return await Promise.all( + packageUrls.map(url => fetch(url).then(res => res.json())) + ) +} diff --git a/routes/api/npmregistry.ts b/routes/api/npmregistry.ts new file mode 100644 index 0000000..366e3bf --- /dev/null +++ b/routes/api/npmregistry.ts @@ -0,0 +1,9 @@ +import { Handlers } from "$fresh/server.ts"; + +export const handler: Handlers = { + async GET(_req, ctx) { + const registryResponse = await fetch('https://registry.npmjs.org/@angular/core'); + const data = await registryResponse.json(); + return Response.json({data}); + }, +}; diff --git a/routes/index.tsx b/routes/index.tsx new file mode 100644 index 0000000..df5a04e --- /dev/null +++ b/routes/index.tsx @@ -0,0 +1,16 @@ +import { Head } from "$fresh/runtime.ts"; +import { Handlers } from "$fresh/server.ts"; +import UploadButton from "../islands/UploadButton.tsx"; + +export default function Home() { + return ( + <> + + Package Analyzer + +
+ +
+ + ); +} diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..1cfaaa2 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/logo.svg b/static/logo.svg new file mode 100644 index 0000000..ef2fbe4 --- /dev/null +++ b/static/logo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file -- cgit v1.2.3