feat: add GITHUB_FETCH_EXAMPLE to main (#1940)

* feat: add GITHUB_FETCH_EXAMPLE to IPC

* refactor: use GITHUB_FETCH_EXAMPLE in the renderer

* refactor: use symbolic constants for org, repo names

Author: ckerr

src/ambient.d.ts

@@ -103,6 +103,7 @@ declare global {
         opts?: Partial<DownloadVersionParams>,
       ): Promise<void>;
       fetchVersions(): Promise<Version[]>;
+      fetchExample(ref: string, path: string): Promise<EditorValues>;
       getAvailableThemes(): Promise<Array<LoadedFiddleTheme>>;
       getElectronTypes(ver: RunnableVersion): Promise<string | undefined>;
       getIsPackageManagerInstalled(

src/ipc-events.ts

@@ -74,6 +74,7 @@ export enum IpcEvents {
   FIDDLE_STOPPED = 'FIDDLE_STOPPED',
   VERSION_DOWNLOAD_PROGRESS = 'VERSION_DOWNLOAD_PROGRESS',
   VERSION_STATE_CHANGED = 'VERSION_STATE_CHANGED',
+  GITHUB_FETCH_EXAMPLE = 'GITHUB_FETCH_EXAMPLE',
   GITHUB_GIST_CREATE = 'GITHUB_GIST_CREATE',
   GITHUB_GIST_DELETE = 'GITHUB_GIST_DELETE',
   GITHUB_GIST_LIST_COMMITS = 'GITHUB_GIST_LIST_COMMITS',

src/main/github.ts

@@ -1,15 +1,21 @@
 import * as fs from 'node:fs';
-import * as path from 'node:path';
+import { join as pathJoin } from 'node:path';
 
-import { Octokit } from '@octokit/rest';
+import { Octokit, RestEndpointMethodTypes } from '@octokit/rest';
 import { IpcMainInvokeEvent, app, safeStorage } from 'electron';
 
+import { getTemplate } from './content';
 import { ipcMainManager } from './ipc';
-import { GistRevision } from '../interfaces';
+import { EditorValues, GistRevision } from '../interfaces';
 import { IpcEvents } from '../ipc-events';
+import { isSupportedFile } from '../utils/editor-utils';
 
 // --- Input validation ---
 
+const ELECTRON_ORG = 'electron';
+
+const ELECTRON_REPO = 'electron';
+
 const TOKEN_PATTERN =
   /^(ghp_[a-zA-Z0-9]{36}|github_pat_[a-zA-Z0-9]{22}_[a-zA-Z0-9]{59})$/;
 
@@ -79,7 +85,7 @@ function areValidGistFiles(
 
 function getCredentialsPath(): string {
   const CREDENTIALS_FILE = '.github-credentials';
-  return path.join(app.getPath('userData'), CREDENTIALS_FILE);
+  return pathJoin(app.getPath('userData'), CREDENTIALS_FILE);
 }
 
 function saveToken(token: string): void {
@@ -365,9 +371,64 @@ async function handleGistListCommits(
   }));
 }
 
+async function handleFetchExample(
+  _event: IpcMainInvokeEvent,
+  params: unknown,
+): Promise<EditorValues> {
+  if (typeof params !== 'object' || params === null)
+    throw new Error('Invalid parameters.');
+  const { ref, path } = params as Record<string, unknown>;
+  if (typeof ref !== 'string') throw new Error('Invalid ref.');
+  if (typeof path !== 'string') throw new Error('Invalid path.');
+  return fetchExample(ref, path);
+}
+
+async function fetchExample(ref: string, path: string): Promise<EditorValues> {
+  if (!ref) throw new Error('Invalid ref.');
+  if (!path) throw new Error('Invalid path.');
+
+  // `repos.getContent` returns a union; the directory variant is the array form.
+  type RepoContentEntry = Extract<
+    RestEndpointMethodTypes['repos']['getContent']['response']['data'],
+    readonly unknown[]
+  >[number];
+
+  const owner = ELECTRON_ORG;
+  const repo = ELECTRON_REPO;
+  const octo = getOctokit();
+
+  // Fetch the example folder listing.
+  const folder = await octo.repos.getContent({ owner, path, ref, repo });
+  if (!Array.isArray(folder.data))
+    throw new Error(`${owner}:${repo}/${path}:${ref} is not a valid example`);
+  const files = (folder.data as RepoContentEntry[]).filter(
+    (file) =>
+      typeof file.download_url === 'string' &&
+      typeof file.name === 'string' &&
+      isSupportedFile(file.name),
+  );
+
+  // Get the base template for this version: 'v42.0.0' -> '42.0.0'.
+  const version = ref.replace(/^v/, '');
+  const values: EditorValues = { ...(await getTemplate(version)) };
+
+  // Download each supported file and overlay onto the template.
+  await Promise.all(
+    files.map(async (file) => {
+      const resp = await fetch(file.download_url as string);
+      if (!resp.ok)
+        throw new Error(`Failed to download ${file.name}: ${resp.status}`);
+      values[file.name as keyof EditorValues] = await resp.text();
+    }),
+  );
+
+  return values;
+}
+
 // --- Setup ---
 
 export function setupGitHub() {
+  ipcMainManager.handle(IpcEvents.GITHUB_FETCH_EXAMPLE, handleFetchExample);
   ipcMainManager.handle(IpcEvents.GITHUB_GIST_CREATE, handleGistCreate);
   ipcMainManager.handle(IpcEvents.GITHUB_GIST_DELETE, handleGistDelete);
   ipcMainManager.handle(
@@ -386,6 +447,7 @@ export function setupGitHub() {
 
 // Exported for testing
 export const testing = {
+  fetchExample,
   handleGistCreate,
   handleGistDelete,
   handleGistListCommits,

src/preload/preload.ts

@@ -107,6 +107,8 @@ export async function setupFiddleGlobal() {
     fetchVersions() {
       return ipcRenderer.invoke(IpcEvents.FETCH_VERSIONS);
     },
+    fetchExample: (ref: string, path: string) =>
+      ipcRenderer.invoke(IpcEvents.GITHUB_FETCH_EXAMPLE, { ref, path }),
     getElectronTypes(ver: RunnableVersion) {
       return ipcRenderer.invoke(IpcEvents.GET_ELECTRON_TYPES, ver);
     },

src/renderer/constants.ts

@@ -1,6 +1,3 @@
-export const ELECTRON_ORG = 'electron';
-export const ELECTRON_REPO = 'electron';
-
 export const FIDDLE_GIST_DESCRIPTION_PLACEHOLDER = 'Electron Fiddle Gist';
 
 export const PREFERS_DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';

src/renderer/remote-loader.ts

@@ -1,13 +1,11 @@
 import semver from 'semver';
 
-import { ELECTRON_ORG, ELECTRON_REPO } from './constants';
 import { AppState } from './state';
 import { disableDownload } from './utils/disable-download';
 import { isKnownFile, isSupportedFile } from './utils/editor-utils';
 import { getOctokit } from './utils/octokit';
 import { getReleaseChannel } from './versions';
 import {
-  EditorId,
   EditorValues,
   ElectronReleaseChannel,
   GenericDialogType,
@@ -62,14 +60,6 @@ export class RemoteLoader {
     path: string,
   ): Promise<boolean> {
     try {
-      const octo = await getOctokit(this.appState);
-      const folder = await octo.repos.getContent({
-        owner: ELECTRON_REPO,
-        repo: ELECTRON_ORG,
-        ref: tag,
-        path,
-      });
-
       const index = tag.search(/\d/);
       const version = tag.substring(index);
 
@@ -80,35 +70,7 @@ export class RemoteLoader {
       const ok = await this.setElectronVersion(version);
       if (!ok) return false;
 
-      const values = await window.ElectronFiddle.getTemplate(
-        this.appState.version,
-      );
-      if (!Array.isArray(folder.data)) {
-        throw new Error(
-          'The example Fiddle tried to launch is not a valid Electron example',
-        );
-      }
-
-      const loaders: Array<Promise<void>> = [];
-
-      for (const child of folder.data) {
-        if (!child.download_url) {
-          console.warn(`Could not find download_url for ${child.name}`);
-          continue;
-        }
-
-        if (isSupportedFile(child.name)) {
-          loaders.push(
-            fetch(child.download_url)
-              .then((r) => r.text())
-              .then((t) => {
-                values[child.name as EditorId] = t;
-              }),
-          );
-        }
-      }
-
-      await Promise.all(loaders);
+      const values = await window.ElectronFiddle.fetchExample(tag, path);
 
       return this.handleLoadingSuccess(values, '');
     } catch (error: any) {