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

5 files changed, 99 insertions, 0 deletions

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 <div>Hello {props.params.name}</div>;
+}
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<any> = {

+  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<any>((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<any>) {

+    const {packages, name, version, description} = data;

+  return (

+    <div>

+      Analyzer

+      <ListPackageDetails 

+        packages={packages} 

+        projectname={name} 

+        projectversion={version}

+        projectdesc={description}

+      ></ListPackageDetails>

+    </div>

+  );

+}

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<any, { data: any }> = {

+    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<any, { data: string }> = {

+  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 (
+    <>
+      <Head>
+        <title>Package Analyzer</title>
+      </Head>
+      <div>
+        <UploadButton></UploadButton>
+      </div>
+    </>
+  );
+}