Enable eslint import checks and fixed the reported errors (#878)

Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/878

1) Enabled eslint error reporting for unresolved imports and fixed all the errors
2) Enabled eslint for typings (d.ts) and fixed all the errors

Reviewed By: passy

Differential Revision: D20335151

fbshipit-source-id: 7b142281a406b32df0f02a5cd0d7d05eba941acd

desktop/.eslintignore

@@ -1,4 +1,3 @@
-*.d.ts
 *.bundle.js
 src/fb/plugins/relaydevtools/relay-devtools/*
 latest
@@ -12,3 +11,4 @@ dist
 website/build
 react-native/ReactNativeFlipperExample
 scripts/generate-changelog.js
+static/index.js

desktop/.eslintrc.js

@@ -25,7 +25,13 @@ module.exports = {
   parser: 'babel-eslint',
   root: true,
   extends: 'fbjs',
-  plugins: [...fbjs.plugins, 'header', 'prettier', '@typescript-eslint'],
+  plugins: [
+    ...fbjs.plugins,
+    'header',
+    'prettier',
+    '@typescript-eslint',
+    'import',
+  ],
   rules: {
     // disable rules from eslint-config-fbjs
     'react/react-in-jsx-scope': 0, // not needed with our metro implementation
@@ -53,6 +59,16 @@ module.exports = {
     'header/header': [2, 'block', {pattern}],
     'prettier/prettier': [2, prettierConfig],
     'flowtype/object-type-delimiter': [0],
+
+    // import
+    'import/no-unresolved': [2, {commonjs: true, amd: true}],
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
   },
   overrides: [
     {

desktop/package.json

@@ -122,6 +122,7 @@
     "electron-builder": "^22.3.2",
     "eslint": "^6.7.0",
     "eslint-config-fbjs": "^3.1.1",
+    "eslint-import-resolver-typescript": "^2.0.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-flowtype": "^4.3.0",
     "eslint-plugin-header": "^3.0.0",
@@ -134,6 +135,8 @@
     "glob": "^7.1.2",
     "jest": "^25.1.0",
     "jest-fetch-mock": "^3.0.0",
+    "metro": "^0.58.0",
+    "metro-resolver": "^0.58.0",
     "prettier": "^1.19.1",
     "react-async": "^10.0.0",
     "recursive-readdir": "^2.2.2",
@@ -250,7 +253,9 @@
     "test-electron": "jest --testPathPattern=\"electron\\.(js|tsx)$\" --testEnvironment=@jest-runner/electron/environment --runner=@jest-runner/electron --no-cache",
     "test-with-device": "USE_ELECTRON_STUBS=1 jest --testPathPattern=\"device\\.(js|tsx)$\" --detectOpenHandles --no-cache",
     "tsc": "tsc --noemit",
-    "lint": "eslint . --ext .js,.ts,.tsx && flow check && yarn tsc",
+    "eslint": "eslint . --ext .js,.ts,.tsx",
+    "flow": "flow check",
+    "lint": "yarn eslint && yarn flow && yarn tsc",
     "everything": "yarn reset && yarn install && yarn lint && yarn test && yarn test-electron && yarn build --mac --win --linux && yarn build-headless --mac --linux && yarn start"
   },
   "optionalDependencies": {

desktop/pkg/src/types/metro.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+declare module 'metro';

desktop/pkg/src/utils/runBuild.ts

@@ -7,7 +7,7 @@
  * @format
  */
 
-const Metro = require('metro'); // no typings :(
+import Metro from 'metro';
 import * as path from 'path';
 
 function hash(string: string) {

desktop/scripts/build-utils.ts

@@ -7,7 +7,7 @@
  * @format
  */
 
-const Metro = require('../static/node_modules/metro');
+import Metro from 'metro';
 import compilePlugins from '../static/compilePlugins';
 import util from 'util';
 import tmp from 'tmp';
@@ -16,6 +16,8 @@ import fs from 'fs-extra';
 import {spawn} from 'promisify-child-process';
 import recursiveReaddir from 'recursive-readdir';
 
+const projectRoot = path.join(__dirname, '..');
+
 async function mostRecentlyChanged(
   dir: string,
   ignores: string[],
@@ -64,12 +66,11 @@ export function compileDefaultPlugins(
 
 export function compile(buildFolder: string, entry: string) {
   console.log(`⚙️  Compiling renderer bundle...`);
-  const projectRoots = path.join(__dirname, '..');
   return Metro.runBuild(
     {
       reporter: {update: () => {}},
-      projectRoot: projectRoots,
-      watchFolders: [projectRoots],
+      projectRoot: projectRoot,
+      watchFolders: [projectRoot],
       serializer: {},
       transformer: {
         babelTransformerPath: path.join(
@@ -98,7 +99,7 @@ export function compile(buildFolder: string, entry: string) {
 }
 
 export async function compileMain({dev}: {dev: boolean}) {
-  const staticDir = path.resolve(__dirname, '..', 'static');
+  const staticDir = path.resolve(projectRoot, 'static');
   const out = path.join(staticDir, 'main.bundle.js');
   // check if main needs to be compiled
   if (await fs.pathExists(out)) {
@@ -114,7 +115,7 @@ export async function compileMain({dev}: {dev: boolean}) {
     const config = Object.assign({}, await Metro.loadConfig(), {
       reporter: {update: () => {}},
       projectRoot: staticDir,
-      watchFolders: [staticDir],
+      watchFolders: [projectRoot],
       transformer: {
         babelTransformerPath: path.join(
           __dirname,

desktop/scripts/metro-transform.js

@@ -1,65 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-const generate = require('babel-generator').default;
-const babylon = require('babylon');
-const babel = require('babel-core');
-const metro = require('metro');
-
-exports.transform = function({
-  filename,
-  options,
-  src,
-  plugins: defaultPlugins,
-}) {
-  const presets = [];
-
-  let ast = babylon.parse(src, {
-    filename,
-    plugins: ['jsx', 'flow', 'classProperties', 'objectRestSpread'],
-    sourceType: filename.includes('node_modules') ? 'script' : 'module',
-  });
-
-  // run babel
-  const plugins = [
-    ...defaultPlugins,
-    require('./babel-plugins/electron-requires.js'),
-    require('./babel-plugins/dynamic-requires.js'),
-  ];
-  if (!filename.includes('node_modules')) {
-    plugins.unshift(require('babel-plugin-transform-es2015-modules-commonjs'));
-  }
-  ast = babel.transformFromAst(ast, src, {
-    babelrc: !filename.includes('node_modules'),
-    code: false,
-    comments: false,
-    compact: false,
-    filename,
-    plugins,
-    presets,
-    sourceMaps: true,
-  }).ast;
-
-  const result = generate(
-    ast,
-    {
-      filename,
-      sourceFileName: filename,
-      sourceMaps: true,
-    },
-    src,
-  );
-
-  return {
-    ast,
-    code: result.code,
-    filename,
-    map: result.rawMappings.map(metro.sourceMaps.compactMapping),
-  };
-};

desktop/scripts/start-dev-server.ts

@@ -20,8 +20,8 @@ import path from 'path';
 import fs from 'fs';
 import {compileMain} from './build-utils';
 import Watchman from '../static/watchman';
-const Metro = require('../static/node_modules/metro');
-const MetroResolver = require('../static/node_modules/metro-resolver');
+import Metro from 'metro';
+import MetroResolver from 'metro-resolver';
 
 const ansiToHtmlConverter = new AnsiToHtmlConverter();
 

desktop/scripts/yarn-install.ts

@@ -16,6 +16,8 @@ const exec = util.promisify(execImport);
 const PACKAGES = [
   'headless-tests',
   'static',
+  'doctor',
+  'pkg',
   'src/plugins/*',
   'src/fb/plugins/*',
   'src/fb/plugins/layout/*',

desktop/src/Client.tsx

@@ -9,7 +9,7 @@
 
 import {FlipperPlugin, FlipperDevicePlugin} from './plugin';
 import BaseDevice, {OS} from './devices/BaseDevice';
-import {App} from './App.js';
+import {App} from './App';
 import {Logger} from './fb-interfaces/Logger';
 import {Store} from './reducers/index';
 import {setPluginState} from './reducers/pluginStates';

desktop/src/__tests__/createTablePlugin.node.tsx

@@ -10,7 +10,7 @@
 import {createTablePlugin} from '../createTablePlugin';
 import {FlipperPlugin} from '../plugin';
 import {List, Map as ImmutableMap} from 'immutable';
-import {TableRows_immutable} from '../ui/components/table/types.js';
+import {TableRows_immutable} from '../ui/components/table/types';
 
 const PROPS = {
   method: 'method',

desktop/src/dispatcher/__tests__/plugins.node.js

@@ -107,10 +107,8 @@ test('checkGK for failing plugin', () => {
 });
 
 test('requirePlugin returns null for invalid requires', () => {
-  const plugin = requirePlugin(
-    [],
-    require,
-  )({
+  const requireFn = requirePlugin([], require);
+  const plugin = requireFn({
     name: 'pluginID',
     out: 'this/path/does not/exist',
   });
@@ -121,10 +119,8 @@ test('requirePlugin returns null for invalid requires', () => {
 test('requirePlugin loads plugin', () => {
   const name = 'pluginID';
   const homepage = 'https://fb.workplace.com/groups/flippersupport/';
-  const plugin = requirePlugin(
-    [],
-    require,
-  )({
+  const requireFn = requirePlugin([], require);
+  const plugin = requireFn({
     name,
     homepage,
     out: path.join(__dirname, 'TestPlugin.js'),

desktop/src/dispatcher/application.tsx

@@ -15,7 +15,7 @@ import {
   GRAPHQL_IOS_GROUP,
   LITHO_GROUP,
 } from '../reducers/supportForm';
-import {Store} from '../reducers/index.js';
+import {Store} from '../reducers/index';
 import {Logger} from '../fb-interfaces/Logger';
 import {parseFlipperPorts} from '../utils/environmentVariables';
 import {

desktop/src/dispatcher/server.tsx

@@ -11,7 +11,7 @@ import Server from '../server';
 
 import {Store} from '../reducers/index';
 import {Logger} from '../fb-interfaces/Logger';
-import Client from '../Client.js';
+import Client from '../Client';
 import {UninitializedClient} from '../UninitializedClient';
 
 export default (store: Store, logger: Logger) => {

desktop/src/dispatcher/types.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Store} from '../reducers/index.js';
+import {Store} from '../reducers/index';
 import {Logger} from '../fb-interfaces/Logger';
 
 export type Dispatcher = (

desktop/src/plugins/fresco/ImagePool.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {ImageId, ImageData} from './api.js';
+import {ImageId, ImageData} from './api';
 
 export type ImagesMap = {[imageId in ImageId]: ImageData};
 

desktop/src/ui/components/data-inspector/DataInspector.tsx

@@ -21,7 +21,7 @@ import {colors} from '../colors';
 import {clipboard} from 'electron';
 import deepEqual from 'deep-equal';
 import React from 'react';
-import {TooltipOptions} from '../TooltipProvider.js';
+import {TooltipOptions} from '../TooltipProvider';
 
 export {DataValueExtractor} from './DataPreview';
 

desktop/src/ui/components/filter/FilterRow.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Filter} from './types.js';
+import {Filter} from './types';
 import React, {PureComponent} from 'react';
 import ContextMenu from '../ContextMenu';
 import textContent from '../../../utils/textContent';

desktop/static/compilePlugins.ts

@@ -10,7 +10,7 @@
 
 import path from 'path';
 import fs from 'fs';
-const Metro = require('metro');
+import Metro from 'metro';
 import util from 'util';
 import recursiveReaddir from 'recursive-readdir';
 import expandTilde from 'expand-tilde';

desktop/types/line-replace.d.ts

@@ -13,6 +13,11 @@ declare module 'line-replace' {
     line: number;
     text: string;
     addNewLine: boolean;
-        callback: (args: {file: string; line: number; replacedText: string; text: string}) => void;
+    callback: (args: {
+      file: string;
+      line: number;
+      replacedText: string;
+      text: string;
+    }) => void;
   }): void;
 }

desktop/types/metro-resolver.d.tsx

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+declare module 'metro-resolver';

desktop/types/metro.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+declare module 'metro';

desktop/types/npm-api.d.ts

@@ -23,7 +23,6 @@ declare module 'npm-api' {
     use(...args: any[]): any;
 
     view(...args: any[]): any;
-
   }
 
   export class Repository {
@@ -34,5 +33,4 @@ declare module 'npm-api' {
     name: string;
     version: string;
   }
-
 }