Allow direct references of doctor and pkg from the main bundle

Summary: This diff allows direct referencing pkg and doctor packages from the main bundle so they can be changed and used in the main app without publishing to npm

Reviewed By: mweststrate

Differential Revision: D20390416

fbshipit-source-id: af625a8b7cead4481743a88aec198493d363ce76

desktop/doctor/package.json

@@ -3,6 +3,7 @@
   "version": "0.7.0",
   "description": "Utility for checking for issues with a flipper installation",
   "main": "lib/index.js",
+  "flipper:source": "src",
   "types": "lib/index.d.ts",
   "license": "MIT",
   "devDependencies": {

desktop/package.json

@@ -9,6 +9,7 @@
   "icon": "icon.png",
   "category": "facebook-intern",
   "privileged": true,
+  "license": "MIT",
   "build": {
     "appId": "flipper",
     "productName": "Flipper",
@@ -77,7 +78,9 @@
       "<rootDir>/static/globalTestSetup.js"
     ],
     "moduleNameMapper": {
-      "^flipper$": "<rootDir>/src/index.tsx"
+      "^flipper$": "<rootDir>/src",
+      "^flipper-doctor$": "<rootDir>/doctor/src",
+      "^flipper-pkg$": "<rootDir>/pkg/src"
     },
     "clearMocks": true
   },

desktop/pkg/package.json

@@ -4,6 +4,7 @@
   "description": "Utility for building and publishing Flipper plugins",
   "repository": "facebook/flipper",
   "main": "lib/index.js",
+  "flipper:source": "src",
   "types": "lib/index.d.ts",
   "license": "MIT",
   "bin": {

desktop/scripts/build-utils.ts

@@ -74,15 +74,15 @@ export function compile(buildFolder: string, entry: string) {
       serializer: {},
       transformer: {
         babelTransformerPath: path.join(
-          __dirname,
+          projectRoot,
-          '..',
           'static',
           'transforms',
           'index.js',
         ),
       },
       resolver: {
-        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+        resolverMainFields: ['flipper:source', 'module', 'main'],
+        blacklistRE: /\.native\.js$/,
       },
     },
     {
@@ -118,8 +118,7 @@ export async function compileMain({dev}: {dev: boolean}) {
       watchFolders: [projectRoot],
       transformer: {
         babelTransformerPath: path.join(
-          __dirname,
+          projectRoot,
-          '..',
           'static',
           'transforms',
           'index.js',
@@ -127,7 +126,8 @@ export async function compileMain({dev}: {dev: boolean}) {
       },
       resolver: {
         sourceExts: ['tsx', 'ts', 'js'],
-        blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+        resolverMainFields: ['flipper:source', 'module', 'main'],
+        blacklistRE: /\.native\.js$/,
       },
     });
     await Metro.runBuild(config, {

desktop/scripts/start-dev-server.ts

@@ -82,15 +82,15 @@ function startMetroServer(app: Express) {
     watchFolders: [projectRoot],
     transformer: {
       babelTransformerPath: path.join(
-        __dirname,
+        projectRoot,
-        '..',
         'static',
         'transforms',
         'index.js',
       ),
     },
     resolver: {
-      blacklistRE: /(\/|\\)(sonar|flipper|flipper-public)(\/|\\)(desktop)(\/|\\)(dist|doctor)(\/|\\)|(\.native\.js$)/,
+      resolverMainFields: ['flipper:source', 'module', 'main'],
+      blacklistRE: /\.native\.js$/,
       resolveRequest: (context: any, moduleName: string, platform: string) => {
         if (moduleName.startsWith('./localhost:3000')) {
           moduleName = moduleName.replace('./localhost:3000', '.');
@@ -134,7 +134,7 @@ function startAssetServer(
     }
     shutdownElectron = launchElectron({
       devServerURL: `http://localhost:${port}`,
-      bundleURL: `http://localhost:${port}/src/init.bundle?dev=true&platform=web&minify=false&excludeSource=false`,
+      bundleURL: `http://localhost:${port}/src/init.bundle`,
       electronURL: `http://localhost:${port}/index.dev.html`,
     });
     res.end();
@@ -174,16 +174,20 @@ async function addWebsocket(server: http.Server) {
   // refresh the app on changes to the src folder
   // this can be removed once metroServer notifies us about file changes
   try {
-    const watchman = new Watchman(path.resolve(__dirname, '..', 'src'));
+    const watchman = new Watchman(path.resolve(__dirname, '..'));
     await watchman.initialize();
-    await watchman.startWatchFiles(
+    await Promise.all(
-      '',
+      ['src', 'pkg', 'doctor'].map(dir =>
+        watchman.startWatchFiles(
+          dir,
           () => {
             io.emit('refresh');
           },
           {
             excludes: ['**/__tests__/**/*', '**/node_modules/**/*', '**/.*'],
           },
+        ),
+      ),
     );
   } catch (err) {
     console.error(

desktop/tsconfig.json

@@ -13,11 +13,13 @@
     "downlevelIteration": true,    
     "skipLibCheck": true,
     "paths": {
-      "flipper": ["./src/index.tsx"],
+      "flipper": ["./src"],
+      "flipper-doctor": ["./doctor/src"],
+      "flipper-pkg": ["./pkg/src"],
       "live-plugin-manager": ["./types/live-plugin-manager.d.tsx"]
     },
     "strict": true
   },
-  "include": ["src/**/*", "static/**/*", "scripts/**/*", "types/*", "headless/*", "plugins/**/*"],
+  "include": ["src/**/*", "doctor/**/*", "pkg/**/*", "static/**/*", "scripts/**/*", "types/**/*", "headless/**/*", "plugins/**/*"],
   "exclude": ["node_modules", "**/*.spec.ts"]
 }