refactor: remove Sync() calls from readFiddle() (#761)

Trying to reduce startup jank by making some blocking calls yield.

src/utils/read-fiddle.ts

@@ -13,25 +13,25 @@ import * as path from 'path';
 export async function readFiddle(folder: string): Promise<EditorValues> {
   const got: EditorValues = {};
 
-  const tryRead = (name: string) => {
-    try {
-      const filename = path.join(folder, name);
-      const content = fs.readFileSync(filename, 'utf-8');
-      return content || '';
-    } catch (error) {
-      console.warn(`Could not read file ${name}:`, error);
-      return '';
-    }
-  };
+  try {
+    const names = (await fs.readdir(folder)).filter(isSupportedFile);
+    const values = await Promise.allSettled(
+      names.map((name) => fs.readFile(path.join(folder, name), 'utf8')),
+    );
+
+    for (let i = 0; i < names.length; ++i) {
+      const name = names[i];
+      const value = values[i];
 
-  if (!fs.existsSync(folder)) {
-    console.warn(`readFiddle(): "${folder}" does not exist`);
-  } else {
-    for (const file of fs.readdirSync(folder)) {
-      if (isSupportedFile(file)) {
-        got[file] = tryRead(file);
+      if (value.status === 'fulfilled') {
+        got[name] = value.value || '';
+      } else {
+        console.warn(`Could not read file ${name}:`, value.reason);
+        got[name] = '';
       }
     }
+  } catch (err) {
+    console.warn(`Unable to read "${folder}": ${err.toString()}`);
   }
 
   if (!(MAIN_JS in got)) {

tests/utils/read-fiddle-spec.ts

@@ -10,8 +10,9 @@ describe('read-fiddle', () => {
   const folder = '/some/place';
 
   beforeEach(() => {
-    (fs.existsSync as jest.Mock).mockImplementationOnce(() => true);
-    (fs.readFileSync as jest.Mock).mockImplementation((filename) => filename);
+    (fs.readFile as jest.Mock).mockImplementation((filename) =>
+      Promise.resolve(filename),
+    );
     console.warn = jest.fn();
   });
 
@@ -20,11 +21,10 @@ describe('read-fiddle', () => {
   });
 
   function setupFSMocks(editorValues: EditorValues) {
-    (fs.existsSync as jest.Mock).mockReturnValue(true);
-    (fs.readdirSync as jest.Mock).mockReturnValue(Object.keys(editorValues));
-    (fs.readFileSync as jest.Mock).mockImplementation((filename) => {
-      return editorValues[path.basename(filename)];
-    });
+    (fs.readdir as jest.Mock).mockResolvedValue(Object.keys(editorValues));
+    (fs.readFile as jest.Mock).mockImplementation((filename) =>
+      Promise.resolve(editorValues[path.basename(filename)]),
+    );
   }
 
   it('injects main.js if not present', async () => {
@@ -67,9 +67,7 @@ describe('read-fiddle', () => {
   it('handles read errors gracefully', async () => {
     const mockValues = createEditorValues();
     setupFSMocks(mockValues);
-    (fs.readFileSync as jest.Mock).mockImplementation(() => {
-      throw new Error('bwap');
-    });
+    (fs.readFile as jest.Mock).mockRejectedValue(new Error('bwap'));
 
     const files = await readFiddle(folder);
 
@@ -82,7 +80,7 @@ describe('read-fiddle', () => {
   it('ensures truthy even when read returns null', async () => {
     const mockValues = createEditorValues();
     setupFSMocks(mockValues);
-    (fs.readFileSync as jest.Mock).mockReturnValue(null);
+    (fs.readFile as jest.Mock).mockResolvedValue(null);
 
     const files = await readFiddle(folder);
 

tsconfig.json

@@ -10,7 +10,7 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "lib": [
-      "es2019",
+      "es2020",
       "dom",
       "WebWorker"
     ],