Replace parcel/watcher with chokidar (#2296)

* Replace parcel/watcher with chokidar * Remove parcel/watcher * Make the watch optional * Await for closing the watchers * Minor refactor * Fix watcher options --------- Co-authored-by: Fran Dios <fran.dios@shopify.com>
Shopify · Jul 5, 2024 · ee28ee1 · ee28ee1
1 parent 426bb39
commit ee28ee1
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 103 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -39,6 +39,7 @@
     "@shopify/oxygen-cli": "4.4.9",
     "@shopify/plugin-cloudflare": "3.61.2",
     "ansi-escapes": "^6.2.0",
+    "chokidar": "3.5.3",
     "cli-truncate": "^4.0.0",
     "diff": "^5.1.0",
     "fs-extra": "^11.1.0",
@@ -53,9 +54,6 @@
     "ts-morph": "20.0.0",
     "use-resize-observer": "^9.1.0"
   },
-  "optionalDependencies": {
-    "@parcel/watcher": "^2.3.0"
-  },
   "peerDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
     "@remix-run/dev": "^2.1.0",

diff --git a/packages/cli/src/lib/template-diff.ts b/packages/cli/src/lib/template-diff.ts
@@ -49,117 +49,95 @@ export async function prepareDiffDirectory(
     joinPath(targetDirectory, 'node_modules'),
   );
 
-  const pw = watch
-    ? await import('@parcel/watcher').catch((error) => {
-        console.log('Could not watch for file changes.', error);
-      })
-    : undefined;
+  const {default: chokidar} = await import('chokidar');
 
-  const subscriptions = await Promise.all([
-    // Copy back the changes in generated d.ts from the
-    // temporary directory to the original diff directory.
-    pw?.subscribe(
-      targetDirectory,
-      (error, events) => {
-        if (error) {
-          console.error(error);
-          return;
-        }
-
-        events.map((event) => {
-          return copyFile(
-            event.path,
-            joinPath(diffDirectory, relativePath(targetDirectory, event.path)),
-          );
-        });
-      },
-      {ignore: ['!*.generated.d.ts']},
-    ),
+  const subscriptions = watch
+    ? [
+        // Copy back the changes in generated d.ts from the
+        // temporary directory to the original diff directory.
+        chokidar
+          .watch(joinPath(targetDirectory, '*.generated.d.ts'), {
+            ignoreInitial: true,
+          })
+          .on('all', async (eventName, eventFilePath) => {
+            const targetFile = joinPath(
+              diffDirectory,
+              relativePath(targetDirectory, eventFilePath),
+            );
 
-    // Copy new changes in the original diff directory to
-    // the temporary directory.
-    pw?.subscribe(
-      diffDirectory,
-      async (error, events) => {
-        if (error) {
-          console.error(error);
-          return;
-        }
+            await copyFile(eventFilePath, targetFile);
+          }),
 
-        await events.map((event) => {
-          const targetFile = joinPath(
-            targetDirectory,
-            relativePath(diffDirectory, event.path),
-          );
+        // Copy new changes in the original diff directory to
+        // the temporary directory.
+        chokidar
+          .watch(diffDirectory, {
+            ignoreInitial: true,
+            ignored: [
+              '**/*.generated.d.ts',
+              '**/package.json',
+              '**/tsconfig.json',
+              '**/.shopify',
+            ],
+          })
+          .on('all', async (eventName, eventFilePath) => {
+            const targetFile = joinPath(
+              targetDirectory,
+              relativePath(diffDirectory, eventFilePath),
+            );
 
-          const fileInTemplate = event.path.replace(
-            diffDirectory,
-            templateDirectory,
-          );
+            const fileInTemplate = eventFilePath.replace(
+              diffDirectory,
+              templateDirectory,
+            );
 
-          return event.type === 'delete'
-            ? fileExists(fileInTemplate)
+            if (eventName === 'unlink') {
+              return fileExists(fileInTemplate)
                 .then((exists) =>
                   exists
                     ? // Replace it with original file from the starter template.
                       copyFile(fileInTemplate, targetFile)
                     : // Remove the file otherwise.
                       remove(targetFile),
                 )
-                .catch(() => {})
-            : copyFile(event.path, targetFile);
-        });
-      },
-      {
-        ignore: [
-          '*.generated.d.ts',
-          'package.json',
-          'tsconfig.json',
-          '.shopify',
-        ],
-      },
-    ),
+                .catch(() => {});
+            }
 
-    // Copy new changes in the starter template to the temporary
-    // directory only if they don't overwrite the files in the
-    // original diff directory, which have higher priority.
-    pw?.subscribe(
-      templateDirectory,
-      async (error, events) => {
-        if (error) {
-          console.error(error);
-          return;
-        }
+            return copyFile(eventFilePath, targetFile);
+          }),
 
-        await events.map(async (event) => {
-          const fileInDiff = event.path.replace(
-            templateDirectory,
-            diffDirectory,
-          );
+        // Copy new changes in the starter template to the temporary
+        // directory only if they don't overwrite the files in the
+        // original diff directory, which have higher priority.
+        chokidar
+          .watch(templateDirectory, {
+            ignoreInitial: true,
+            ignored: [
+              '**/*.generated.d.ts',
+              '**/package.json',
+              '**/tsconfig.json',
+              '**/.shopify',
+            ],
+          })
+          .on('all', async (eventName, eventFilePath) => {
+            const fileInDiff = eventFilePath.replace(
+              templateDirectory,
+              diffDirectory,
+            );
 
-          // File in diff directory has higher priority.
-          if (await fileExists(fileInDiff)) return;
+            if (await fileExists(fileInDiff)) return;
 
-          const targetFile = joinPath(
-            targetDirectory,
-            relativePath(templateDirectory, event.path),
-          );
+            const targetFile = joinPath(
+              targetDirectory,
+              relativePath(templateDirectory, eventFilePath),
+            );
 
-          return event.type === 'delete'
-            ? remove(targetFile).catch(() => {})
-            : copyFile(event.path, targetFile);
-        });
-      },
-      {
-        ignore: [
-          '*.generated.d.ts',
-          'package.json',
-          'tsconfig.json',
-          '.shopify',
-        ],
-      },
-    ),
-  ]);
+            return eventName === 'unlink'
+              ? remove(targetFile).catch(() => {})
+              : copyFile(eventFilePath, targetFile);
+          }),
+      ]
+    : [];
 
   return {
     /**
@@ -170,7 +148,7 @@ export async function prepareDiffDirectory(
      * Removes the temporary directory and stops the file watchers.
      */
     cleanup: async () => {
-      await Promise.all(subscriptions.map((sub) => sub?.unsubscribe()));
+      await Promise.all(subscriptions.map((sub) => sub.close()));
       await remove(targetDirectory);
     },
     /**

diff --git a/packages/create-hydrogen/tsup.config.ts b/packages/create-hydrogen/tsup.config.ts
@@ -16,7 +16,6 @@ export default defineConfig({
   bundle: true,
   external: [
     '@ast-grep/napi', // Required binary
-    '@parcel/watcher', // Not used but but needs to resolve it
     'react-devtools-core', // Not used but breaks the build otherwise
   ],
   // Needed for some CJS dependencies: