Set up separate package build

Summary:
Added a microbundle based build setup to the data-source folder to be able to package just that folder.

For simplicity / iteration speed, this is only used to publish externally. Our own code still references the source files directly.

More strict separation can be done later if there is external adoption.

Reviewed By: nikoant

Differential Revision: D28056699

fbshipit-source-id: a011b615cfffeff8ecb879bd7281a71085cea965

desktop/flipper-plugin/src/data-source/.ignore

@@ -0,0 +1,2 @@
+lib/
+node_modules/

desktop/flipper-plugin/src/data-source/DataSource.tsx

@@ -7,12 +7,10 @@
  * @format
  */
 
-import {
-  sortedIndexBy,
-  sortedLastIndexBy,
-  property,
-  sortBy as lodashSort,
-} from 'lodash';
+import sortedIndexBy from 'lodash/sortedIndexBy';
+import sortedLastIndexBy from 'lodash/sortedLastIndexBy';
+import property from 'lodash/property';
+import lodashSort from 'lodash/sortBy';
 
 // If the dataSource becomes to large, after how many records will we start to drop items?
 const dropFactor = 0.1;

desktop/flipper-plugin/src/data-source/__tests__/datasource-basics.node.tsx

@@ -7,6 +7,8 @@
  * @format
  */
 
+// ok for now, should be factored if this becomes a stand-alone lib
+// eslint-disable-next-line
 import {createDataSource} from '../../state/createDataSource';
 import {DataSource} from '../DataSource';
 

desktop/flipper-plugin/src/data-source/__tests__/datasource-perf.node.tsx

@@ -7,6 +7,8 @@
  * @format
  */
 
+// ok for now, should be factored if this becomes a stand-alone lib
+// eslint-disable-next-line
 import {createDataSource} from '../../state/createDataSource';
 import {DataSource} from '../DataSource';
 

desktop/flipper-plugin/src/data-source/flipper-data-source.tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es5",                            
+    "module": "commonjs",                       
+    "strict": true,                             
+    "esModuleInterop": true,                    
+    "skipLibCheck": true,                       
+    "forceConsistentCasingInFileNames": true    
+  }
+}

desktop/flipper-plugin/src/data-source/index.tsx

@@ -7,9 +7,10 @@
  * @format
  */
 
-export {DataSource} from './DataSource';
+export {DataSource, ExtractKeyType} from './DataSource';
 export {
   DataSourceRendererVirtual,
   DataSourceVirtualizer,
+  useTableRedraw,
 } from './DataSourceRendererVirtual';
 export {DataSourceRendererStatic} from './DataSourceRendererStatic';

desktop/flipper-plugin/src/data-source/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "flipper-data-source",
+  "version": "0.0.1",
+  "description": "Library to power streamig data visualisations",
+  "repository": "https://github.com/facebook/flipper",
+  "author": "Facebook Inc",
+  "license": "MIT",
+  "source": "index.tsx",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "microbundle --tsconfig flipper-data-source.tsconfig.json --no-compress",
+    "watch": "microbundle --tsconfig flipper-data-source.tsconfig.json --no-compress watch"
+  },
+  "files": [
+    "lib/"
+  ],
+  "devDependencies": {
+    "@reach/observe-rect": "^1.2.0",
+    "lodash": "^4.17.21",
+    "microbundle": "^0.13.0",
+    "react-virtual": "^2.6.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

desktop/flipper-plugin/src/index.ts

@@ -83,7 +83,8 @@ export {
 } from './utils/Logger';
 export {Idler} from './utils/Idler';
 
-export {DataSource} from './data-source/DataSource';
+// Import from the index file directly, to make sure package.json's main field is skipped.
+export {DataSource} from './data-source/index';
 export {createDataSource} from './state/createDataSource';
 
 export {DataTable, DataTableColumn} from './ui/data-table/DataTable';

desktop/flipper-plugin/src/state/createDataSource.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {DataSource, ExtractKeyType} from '../data-source/DataSource';
+import {DataSource, ExtractKeyType} from '../data-source/index';
 import {registerStorageAtom} from '../plugin/PluginBase';
 
 type CreateDataSourceOptions<T, K extends keyof T> = {

desktop/flipper-plugin/src/ui/DataFormatter.tsx

@@ -18,7 +18,7 @@ import React, {createElement, Fragment, isValidElement, useState} from 'react';
 import {tryGetFlipperLibImplementation} from '../plugin/FlipperLib';
 import {safeStringify} from '../utils/safeStringify';
 import {urlRegex} from '../utils/urlRegex';
-import {useTableRedraw} from '../data-source/DataSourceRendererVirtual';
+import {useTableRedraw} from '../data-source/index';
 import {theme} from './theme';
 
 /**

desktop/flipper-plugin/src/ui/data-table/DataTable.tsx

@@ -28,7 +28,7 @@ import {
   DataSourceRendererStatic,
   DataSource,
   DataSourceVirtualizer,
-} from '../../data-source';
+} from '../../data-source/index';
 import {
   computeDataTableFilter,
   createDataTableManager,

desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx

@@ -10,8 +10,7 @@
 import type {DataTableColumn} from './DataTable';
 import {Percentage} from '../../utils/widthUtils';
 import {MutableRefObject, Reducer} from 'react';
-import {DataSource} from '../../data-source/DataSource';
-import {DataSourceVirtualizer} from '../../data-source/DataSourceRendererVirtual';
+import {DataSource, DataSourceVirtualizer} from '../../data-source/index';
 import produce, {castDraft, immerable, original} from 'immer';
 
 export type OnColumnResize = (id: string, size: number | Percentage) => void;

desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import {tryGetFlipperLibImplementation} from '../../plugin/FlipperLib';
 import {DataTableColumn} from './DataTable';
 import {toFirstUpper} from '../../utils/toFirstUpper';
-import {DataSource} from '../../data-source/DataSource';
+import {DataSource} from '../../data-source/index';
 
 const {Item, SubMenu} = Menu;
 

desktop/flipper-plugin/src/utils/createTablePlugin.tsx

@@ -8,7 +8,7 @@
  */
 
 import {notification, Typography} from 'antd';
-import {DataSource} from '../data-source/DataSource';
+import {DataSource} from '../data-source/index';
 import React from 'react';
 import {PluginClient} from '../plugin/Plugin';
 import {usePlugin} from '../plugin/PluginContext';