Introduce static resource URLs

Summary: Introduced an API that converts a filepath, relatively to the `desktop/static/` folder in a url that can be resolved by the render environment. This will generate `file://` urls in Electron, and root relative `/` urls in browser envs

Reviewed By: aigoncharov

Differential Revision: D32767427

fbshipit-source-id: 378da7709bcb19449873358a8703b9c5a5809c57

desktop/app/src/electron/initializeElectron.tsx

@@ -180,6 +180,12 @@ export function initializeElectron(
     async requirePlugin(path) {
       return (window as any).electronRequire(path);
     },
+    getStaticResourceUrl(relativePath): string {
+      return (
+        'file://' +
+        path.resolve(flipperServerConfig.paths.staticPath, relativePath)
+      );
+    },
   } as RenderHost;
 
   setupMenuBar();

desktop/flipper-ui-browser/src/initializeRenderHost.tsx

@@ -70,6 +70,10 @@ export function initializeRenderHost(
       // eslint-disable-next-line no-eval
       return eval(source);
     },
+    getStaticResourceUrl(path): string {
+      // the 'static' folder is mounted as static middleware in Express at the root
+      return '/' + path;
+    },
   } as RenderHost;
 }
 

desktop/flipper-ui-core/src/RenderHost.tsx

@@ -97,6 +97,7 @@ export interface RenderHost {
   flipperServer: FlipperServer;
   serverConfig: FlipperServerConfig;
   requirePlugin(path: string): Promise<any>;
+  getStaticResourceUrl(relativePath: string): string;
 }
 
 export function getRenderHostInstance(): RenderHost {

desktop/scripts/jest-setup-after.ts

@@ -187,5 +187,8 @@ function createStubRenderHost(): RenderHost {
     async requirePlugin(path: string) {
       return require(path);
     },
+    getStaticResourceUrl(relativePath): string {
+      return 'file://' + resolve(rootPath, 'static', relativePath);
+    },
   };
 }