Plugin folders re-structuring

Summary:
Here I'm changing plugin repository structure to allow re-using of shared packages between both public and fb-internal plugins, and to ensure that public plugins has their own yarn.lock as this will be required to implement reproducible jobs checking plugin compatibility with released flipper versions.

Please note that there are a lot of moved files in this diff, make sure to click "Expand all" to see all that actually changed (there are not much of them actually).

New proposed structure for plugin packages:
```
- root
- node_modules - modules included into Flipper: flipper, flipper-plugin, react, antd, emotion
-- plugins
 --- node_modules - modules used by both public and fb-internal plugins (shared libs will be linked here, see D27034936)
 --- public
---- node_modules - modules used by public plugins
---- pluginA
----- node_modules - modules used by plugin A exclusively
---- pluginB
----- node_modules - modules used by plugin B exclusively
 --- fb
---- node_modules - modules used by fb-internal plugins
---- pluginC
----- node_modules - modules used by plugin C exclusively
---- pluginD
----- node_modules - modules used by plugin D exclusively
```
I've moved all public plugins under dir "plugins/public" and excluded them from root yarn workspaces. Instead, they will have their own yarn workspaces config and yarn.lock and they will use flipper modules as peer dependencies.

Reviewed By: mweststrate

Differential Revision: D27034108

fbshipit-source-id: c2310e3c5bfe7526033f51b46c0ae40199fd7586

desktop/plugins/public/hermesdebuggerrn/Banner.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {shell} from 'electron';
+import {styled, colors, FlexRow, Text, GK} from 'flipper';
+
+const BannerContainer = styled(FlexRow)({
+  height: '30px',
+  width: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#2bb673', // Hermes green.
+});
+
+const BannerText = styled(Text)({
+  color: colors.white,
+  fontSize: 14,
+  lineHeight: '20px',
+});
+
+const BannerLink = styled(CustomLink)({
+  color: colors.white,
+  textDecoration: 'underline',
+  '&:hover': {
+    cursor: 'pointer',
+    color: '#303846',
+  },
+});
+
+const StyledLink = styled.span({
+  '&:hover': {
+    cursor: 'pointer',
+  },
+});
+
+StyledLink.displayName = 'CustomLink:StyledLink';
+
+function CustomLink(props: {
+  href: string;
+  className?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <StyledLink
+      className={props.className}
+      onClick={() => shell.openExternal(props.href)}
+      style={props.style}>
+      {props.children || props.href}
+    </StyledLink>
+  );
+}
+
+export const isBannerEnabled: () => boolean = function () {
+  return GK.get('flipper_plugin_hermes_debugger_survey');
+};
+
+export default function Banner() {
+  if (!GK.get('flipper_plugin_hermes_debugger_survey')) {
+    return null;
+  }
+  return (
+    <BannerContainer>
+      <BannerText>
+        Help us improve your debugging experience with this{' '}
+        <BannerLink href="https://fburl.com/hermessurvey">
+          single page survey
+        </BannerLink>
+        !
+      </BannerText>
+    </BannerContainer>
+  );
+}

desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx

@@ -0,0 +1,120 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {styled, colors, FlexColumn} from 'flipper';
+
+import electron from 'electron';
+
+const devToolsNodeId = (url: string) =>
+  `hermes-chromedevtools-out-of-react-node-${url.replace(/\W+/g, '-')}`;
+
+// TODO: build abstraction of this: T62306732
+const TARGET_CONTAINER_ID = 'flipper-out-of-contents-container'; // should be a hook in the future
+
+function createDevToolsNode(
+  url: string,
+  marginTop: string | null,
+): HTMLElement {
+  const existing = findDevToolsNode(url);
+  if (existing) {
+    return existing;
+  }
+
+  // It is necessary to activate chrome devtools in electron
+  electron.remote.getCurrentWindow().webContents.toggleDevTools();
+  electron.remote.getCurrentWindow().webContents.closeDevTools();
+
+  const wrapper = document.createElement('div');
+  wrapper.id = devToolsNodeId(url);
+  wrapper.style.height = '100%';
+  wrapper.style.width = '100%';
+
+  const iframe = document.createElement('webview');
+  iframe.style.height = '100%';
+  iframe.style.width = '100%';
+
+  // HACK: chrome-devtools:// is blocked by the sandbox but devtools:// isn't for some reason.
+  iframe.src = url.replace(/^chrome-/, '');
+
+  wrapper.appendChild(iframe);
+
+  if (marginTop) {
+    document.getElementById(TARGET_CONTAINER_ID)!.style.marginTop = marginTop;
+  }
+
+  document.getElementById(TARGET_CONTAINER_ID)!.appendChild(wrapper);
+  return wrapper;
+}
+
+function findDevToolsNode(url: string): HTMLElement | null {
+  return document.querySelector('#' + devToolsNodeId(url));
+}
+
+function attachDevTools(devToolsNode: HTMLElement) {
+  devToolsNode.style.display = 'block';
+  document.getElementById(TARGET_CONTAINER_ID)!.style.display = 'block';
+  document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.display =
+    'block';
+}
+
+function detachDevTools(devToolsNode: HTMLElement | null) {
+  document.getElementById(TARGET_CONTAINER_ID)!.style.display = 'none';
+  document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.display =
+    'none';
+
+  if (devToolsNode) {
+    devToolsNode.style.display = 'none';
+  }
+}
+
+const EmptyContainer = styled(FlexColumn)({
+  height: '100%',
+  width: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: colors.light02,
+});
+
+type ChromeDevToolsProps = {
+  url: string;
+  marginTop: string | null;
+};
+
+export default class ChromeDevTools extends React.Component<ChromeDevToolsProps> {
+  createDevTools(url: string, marginTop: string | null) {
+    const devToolsNode = createDevToolsNode(url, marginTop);
+    attachDevTools(devToolsNode);
+  }
+
+  hideDevTools(_url: string) {
+    detachDevTools(findDevToolsNode(this.props.url));
+  }
+
+  componentDidMount() {
+    this.createDevTools(this.props.url, this.props.marginTop);
+  }
+
+  componentWillUnmount() {
+    this.hideDevTools(this.props.url);
+  }
+
+  componentDidUpdate(prevProps: ChromeDevToolsProps) {
+    const oldUrl = prevProps.url;
+    const newUrl = this.props.url;
+    if (oldUrl != newUrl) {
+      this.hideDevTools(oldUrl);
+      this.createDevTools(newUrl, this.props.marginTop);
+    }
+  }
+
+  render() {
+    return <EmptyContainer />;
+  }
+}

desktop/plugins/public/hermesdebuggerrn/ErrorScreen.tsx

@@ -0,0 +1,108 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {styled, FlexColumn, FlexRow, Text, Glyph, colors} from 'flipper';
+
+const Container = styled(FlexColumn)({
+  height: '100%',
+  width: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: colors.light02,
+});
+
+const Welcome = styled(FlexColumn)({
+  width: 460,
+  background: colors.white,
+  borderRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+  overflow: 'hidden',
+  transition: '0.6s all ease-out',
+});
+
+const Title = styled(Text)({
+  fontSize: 24,
+  fontWeight: 300,
+  textAlign: 'center',
+  color: colors.light50,
+  marginTop: 16,
+  marginBottom: 16,
+});
+
+const Item = styled(FlexRow)({
+  padding: 10,
+  alignItems: 'center',
+  borderTop: `1px solid ${colors.light10}`,
+});
+
+const ItemTitle = styled(Text)({
+  color: colors.light50,
+  fontSize: 14,
+  lineHeight: '20px',
+});
+
+const Bold = styled(Text)({
+  fontWeight: 600,
+});
+
+const Icon = styled(Glyph)({
+  marginRight: 11,
+  marginLeft: 6,
+});
+
+// As more known failures are found, add them to this list with better error information.
+const KNOWN_FAILURE_MESSAGES: Record<
+  string,
+  Record<'message' | 'hint', string>
+> = {
+  'Failed to fetch': {
+    // This is the error that is returned specifcally when Metro is turned off.
+    message: 'Metro disconnected.',
+    hint: 'Please check that metro is running and Flipper can connect to it.',
+  },
+  default: {
+    // All we really know in this case is that we can't connect to metro.
+    // Do not try and be more specific here.
+    message: 'Cannot connect to Metro.',
+    hint: 'Please check that metro is running and Flipper can connect to it.',
+  },
+};
+
+function getReason(error: Error) {
+  let failure_message = KNOWN_FAILURE_MESSAGES.default;
+  if (error != null && KNOWN_FAILURE_MESSAGES[error.message]) {
+    failure_message = KNOWN_FAILURE_MESSAGES[error.message];
+  }
+
+  return (
+    <ItemTitle>
+      <Bold>{failure_message.message} </Bold>
+      {failure_message.hint}
+    </ItemTitle>
+  );
+}
+
+type Props = Readonly<{
+  error: Error;
+}>;
+
+export default function ErrorScreen(props: Props) {
+  return (
+    <Container>
+      <Welcome>
+        <Title>Hermes Debugger Error</Title>
+        <Item>
+          <Icon size={20} name="caution-octagon" color={colors.red} />
+          <FlexColumn>{getReason(props.error)}</FlexColumn>
+        </Item>
+      </Welcome>
+    </Container>
+  );
+}

desktop/plugins/public/hermesdebuggerrn/LaunchScreen.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {styled, FlexColumn, FlexRow, Text, Glyph, colors} from 'flipper';
+
+const Container = styled(FlexColumn)({
+  height: '100%',
+  width: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: colors.light02,
+});
+
+const Welcome = styled(FlexColumn)({
+  width: 460,
+  background: colors.white,
+  borderRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+  overflow: 'hidden',
+  transition: '0.6s all ease-out',
+});
+
+const Title = styled(Text)({
+  fontSize: 24,
+  fontWeight: 300,
+  textAlign: 'center',
+  color: colors.light50,
+  marginTop: 16,
+  marginBottom: 16,
+});
+
+const Item = styled(FlexRow)({
+  padding: 10,
+  alignItems: 'center',
+  borderTop: `1px solid ${colors.light10}`,
+});
+
+const ItemTitle = styled(Text)({
+  color: colors.light50,
+  fontSize: 14,
+  lineHeight: '20px',
+});
+
+const Bold = styled(Text)({
+  fontWeight: 600,
+});
+
+const Icon = styled(Glyph)({
+  marginRight: 11,
+  marginLeft: 6,
+});
+
+export default function LaunchScreen() {
+  return (
+    <Container>
+      <Welcome>
+        <Title>Hermes Debugger</Title>
+        <Item>
+          <Icon size={20} name="question-circle" color={colors.info} />
+          <FlexColumn>
+            <ItemTitle>
+              <Bold>Metro is connected but no Hermes apps were found.</Bold>{' '}
+              Open a React Native screen with Hermes enabled to connect. Note:
+              you may need to reload the app in order to reconnect the device to
+              Metro.
+            </ItemTitle>
+          </FlexColumn>
+        </Item>
+      </Welcome>
+    </Container>
+  );
+}

desktop/plugins/public/hermesdebuggerrn/SelectScreen.tsx

@@ -0,0 +1,85 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {styled, FlexColumn, FlexRow, Text, Glyph, colors} from 'flipper';
+import {Target, Targets} from './index';
+
+const Container = styled(FlexColumn)({
+  height: '100%',
+  width: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: colors.light02,
+});
+
+const Welcome = styled(FlexColumn)({
+  width: 460,
+  background: colors.white,
+  borderRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+  overflow: 'hidden',
+  transition: '0.6s all ease-out',
+});
+
+const Title = styled(Text)({
+  fontSize: 24,
+  fontWeight: 300,
+  textAlign: 'center',
+  color: colors.light50,
+  marginTop: 16,
+  marginBottom: 16,
+});
+
+const Item = styled(FlexRow)({
+  padding: 10,
+  alignItems: 'center',
+  borderTop: `1px solid ${colors.light10}`,
+});
+
+const ItemTitle = styled(Text)({
+  color: colors.light50,
+  fontSize: 14,
+  lineHeight: '20px',
+});
+
+const Icon = styled(Glyph)({
+  marginRight: 11,
+  marginLeft: 6,
+});
+
+type Props = {
+  readonly targets: Targets;
+  readonly onSelect: (target: Target) => void;
+};
+
+export default function SelectScreen(props: Props) {
+  return (
+    <Container>
+      <Welcome>
+        <Title>Hermes Debugger Select</Title>
+        <Item>
+          <FlexColumn>
+            <ItemTitle>Please select a target:</ItemTitle>
+          </FlexColumn>
+        </Item>
+        {props.targets.map((target) => {
+          return (
+            <Item onClick={() => props.onSelect(target)} key={target.id}>
+              <Icon size={20} name="code" color={colors.info} />
+              <FlexColumn>
+                <ItemTitle>{target.title}</ItemTitle>
+              </FlexColumn>
+            </Item>
+          );
+        })}
+      </Welcome>
+    </Container>
+  );
+}

desktop/plugins/public/hermesdebuggerrn/index.tsx

@@ -0,0 +1,177 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {
+  FlipperDevicePlugin,
+  Device,
+  styled,
+  colors,
+  FlexRow,
+  FlexColumn,
+} from 'flipper';
+import LaunchScreen from './LaunchScreen';
+import Banner, {isBannerEnabled} from './Banner';
+import SelectScreen from './SelectScreen';
+import ErrorScreen from './ErrorScreen';
+import ChromeDevTools from './ChromeDevTools';
+
+const POLL_SECS = 5 * 1000;
+const METRO_PORT_ENV_VAR = process.env.METRO_SERVER_PORT || '8081';
+const METRO_PORT = isNaN(+METRO_PORT_ENV_VAR) ? '8081' : METRO_PORT_ENV_VAR;
+const METRO_URL = new URL('http://localhost');
+METRO_URL.port = METRO_PORT;
+
+export type Target = Readonly<{
+  id: string;
+  description: string;
+  title: string;
+  faviconUrl: string;
+  devtoolsFrontendUrl: string;
+  type: string;
+  webSocketDebuggerUrl: string;
+  vm: string;
+}>;
+
+export type Targets = ReadonlyArray<Target>;
+
+type State = Readonly<{
+  targets?: Targets | null;
+  selectedTarget?: Target | null;
+  error?: Error | null;
+}>;
+
+const Content = styled(FlexRow)({
+  height: '100%',
+  width: '100%',
+  flexGrow: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const Container = styled(FlexColumn)({
+  height: '100%',
+  width: '100%',
+  justifyContent: 'flex-start',
+  alignItems: 'flex-start',
+  backgroundColor: colors.light02,
+});
+
+export default class extends FlipperDevicePlugin<State, any, any> {
+  static supportsDevice(device: Device) {
+    return !device.isArchived && device.os === 'Metro';
+  }
+
+  state: State = {
+    targets: null,
+    selectedTarget: null,
+    error: null,
+  };
+
+  poll?: NodeJS.Timeout;
+
+  componentDidMount() {
+    // This is a pretty basic polling mechnaism. We ask Metro every POLL_SECS what the
+    // current available targets are and only handle a few basic state transitions.
+    this.poll = setInterval(this.checkDebugTargets, POLL_SECS);
+    this.checkDebugTargets();
+  }
+
+  componentWillUnmount() {
+    if (this.poll) {
+      clearInterval(this.poll);
+    }
+  }
+
+  checkDebugTargets = () => {
+    fetch(`${METRO_URL.toString()}json`)
+      .then((res) => res.json())
+      .then(
+        (result) => {
+          // We only want to use the Chrome Reload targets.
+          const targets = result.filter(
+            (target: any) =>
+              target.title ===
+              'React Native Experimental (Improved Chrome Reloads)',
+          );
+
+          // Find the currently selected target.
+          // If the current selectedTarget isn't returned, clear it.
+          let currentlySelected = null;
+          if (this.state.selectedTarget != null) {
+            for (const target of result) {
+              if (
+                this.state.selectedTarget?.webSocketDebuggerUrl ===
+                target.webSocketDebuggerUrl
+              ) {
+                currentlySelected = this.state.selectedTarget;
+              }
+            }
+          }
+
+          // Auto-select the first target if there is one,
+          // but don't change the one that's already selected.
+          const selectedTarget =
+            currentlySelected == null && targets.length === 1
+              ? targets[0]
+              : currentlySelected;
+
+          this.setState({
+            error: null,
+            targets,
+            selectedTarget,
+          });
+        },
+        (error) => {
+          this.setState({
+            targets: null,
+            selectedTarget: null,
+            error,
+          });
+        },
+      );
+  };
+
+  handleSelect = (selectedTarget: Target) => this.setState({selectedTarget});
+
+  renderContent() {
+    const {error, selectedTarget, targets} = this.state;
+
+    if (selectedTarget) {
+      let bannerMargin = null;
+      if (isBannerEnabled()) {
+        bannerMargin = '29px';
+      }
+
+      return (
+        <ChromeDevTools
+          url={selectedTarget.devtoolsFrontendUrl}
+          marginTop={bannerMargin}
+        />
+      );
+    } else if (targets != null && targets.length === 0) {
+      return <LaunchScreen />;
+    } else if (targets != null && targets.length > 0) {
+      return <SelectScreen targets={targets} onSelect={this.handleSelect} />;
+    } else if (error != null) {
+      return <ErrorScreen error={error} />;
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    return (
+      <Container>
+        <Banner />
+        <Content>{this.renderContent()}</Content>
+      </Container>
+    );
+  }
+}

desktop/plugins/public/hermesdebuggerrn/package.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
+  "name": "flipper-plugin-hermesdebuggerrn",
+  "id": "Hermesdebuggerrn",
+  "pluginType": "device",
+  "supportedDevices": [
+    {"os": "Metro", "archived": false}
+  ],
+  "version": "0.0.0",
+  "main": "dist/bundle.js",
+  "flipperBundlerEntry": "index.tsx",
+  "license": "MIT",
+  "title": "Hermes Debugger (RN)",
+  "icon": "code",
+  "keywords": [
+    "flipper-plugin"
+  ],
+  "bugs": {
+    "email": "rickhanlonii@fb.com"
+  }
+}