Implement a Parcel importer for bundle buddy

parcel-bundler/parcel#4648

src/home/Home.tsx

@@ -77,6 +77,19 @@ class Home extends Component<ImportResolveState & { history: ImportHistory }> {
                   );
                 }}
               />
+              <Route
+                exact
+                path="/parcel"
+                component={(h: { history: History }) => {
+                  return (
+                    <Importer
+                      importType={ImportTypes.PARCEL}
+                      graphFileName="bundle-buddy.json"
+                      history={h.history as any}
+                    />
+                  );
+                }}
+              />
               <Route
                 path="/:importer/resolve"
                 component={(h: { history: History }) => {

src/import/Describe.tsx

@@ -83,6 +83,22 @@ class DescribeImport extends Component<{ history: ImportHistory }> {
               Rome
             </button>
           </Link>
+          <Link
+            to="/parcel"
+            aria-label="parcel project import"
+            className="no-link-underline"
+          >
+            <button className={`type-button project-import parcel-import`}>
+              <img
+                width="35px"
+                height="26px"
+                alt="parcel logo"
+                src="/img/parcel_logo.png"
+                className="parcel-logo"
+              />{" "}
+              Parcel
+            </button>
+          </Link>
         </div>
         <div className="flex">
           <button className="project-import" tabIndex={-1}>

src/import/Importer.tsx

@@ -110,6 +110,20 @@ plugins: [{
       );
     }
 
+    if (type === ImportTypes.PARCEL) {
+      return (
+        <div>
+          <p>
+            run <code>BUNDLE_BUDDY=true parcel build</code>&nbsp; to generate
+            the sourcemap files and bundle-buddy.json file for your project
+          </p>
+          <code>
+            <pre>BUNDLE_BUDDY=true parcel build</pre>
+          </code>
+        </div>
+      );
+    }
+
     return <div />;
   }
 

src/index.css

@@ -305,6 +305,10 @@ img.rome-logo {
   zoom: 0.9;
 }
 
+img.parcel-logo {
+  margin: -10px 0 -10px -2px;
+}
+
 button.rome-import {
   display: flex;
   align-items: center;

src/types.ts

@@ -12,6 +12,7 @@ export type GraphEdges = Edge[];
 
 export enum ImportTypes {
   ROLLUP,
+  PARCEL,
   ROME,
   WEBPACK
 }