Make API type safe (#15)

Author: ovidiuch

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "printWidth": 89,
   "singleQuote": true,
   "trailingComma": "all"
 }

flowdef/README.md

@@ -1,6 +1,6 @@
 {
   "name": "react-plugin",
-  "version": "1.0.0-alpha.17",
+  "version": "2.0.0-alpha.1",
   "description": "API for composable 3rd party React plugins",
   "repository": "https://github.com/skidding/react-plugin.git",
   "author": "Ovidiu Cherecheș <[email protected]>",
@@ -14,14 +14,14 @@
     "lint": "tslint --project tsconfig.json",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
-    "build": "rm -rf dist && yarn lint && yarn tsc -b tsconfig.build.json && cp flowdef/index.js.flow dist"
+    "build": "rm -rf dist && yarn lint && yarn tsc -b tsconfig.build.json"
   },
   "dependencies": {
     "@skidding/linked-list": "^1.0.2",
     "array-find-index": "^1.0.2",
     "lodash": "^4.17.11",
     "react-is": "^16.6.3",
-    "ui-plugin": "^1.0.0-alpha.24"
+    "ui-plugin": "^2.0.0-alpha.1"
   },
   "devDependencies": {
     "@skidding/async-retry": "^1.0.2",

flowdef/index.js.flow

@@ -1,11 +1,8 @@
 declare module '@skidding/async-retry' {
-  interface IOptions {
+  type Options = {
     timeout?: number;
     loopDelay?: number;
-  }
+  };
 
-  export default function retry(
-    cb: () => unknown,
-    opts?: IOptions,
-  ): Promise<void>;
+  export default function retry(cb: () => unknown, opts?: Options): Promise<void>;
 }

package.json

@@ -4,7 +4,5 @@ declare module '@skidding/linked-list' {
     next: () => LinkedItem<Item>;
   };
 
-  export default function createLinkedList<Item>(
-    items: Item[],
-  ): LinkedItem<Item>;
+  export default function createLinkedList<Item>(items: Item[]): LinkedItem<Item>;
 }

src/@types/@skidding/async-retry.d.ts

@@ -1,26 +1,26 @@
 import { isEqual } from 'lodash';
 import * as React from 'react';
-import { enablePlugin, getPlugins, IPlugin, onPluginChange } from 'ui-plugin';
+import { enablePlugin, getPlugins, Plugin, onPluginLoad } from 'ui-plugin';
 
-interface IProps {
+type Props = {
   children: (
     props: {
-      plugins: IPlugin[];
+      plugins: Plugin[];
       enable: (pluginName: string, enabled: boolean) => void;
     },
   ) => React.ReactNode;
-}
+};
 
-interface IState {
-  plugins: IPlugin[];
-}
+type State = {
+  plugins: Plugin[];
+};
 
-export class PluginsConsumer extends React.Component<IProps, IState> {
+export class PluginsConsumer extends React.Component<Props, State> {
   state = {
     plugins: getPluginArray(),
   };
 
-  removePluginChangeHandler: null | (() => unknown) = null;
+  removePluginLoadHandler: null | (() => unknown) = null;
 
   render() {
     const { children } = this.props;
@@ -33,17 +33,17 @@ export class PluginsConsumer extends React.Component<IProps, IState> {
   }
 
   componentDidMount() {
-    this.removePluginChangeHandler = onPluginChange(this.handlePluginChange);
+    this.removePluginLoadHandler = onPluginLoad(this.handlePluginLoad);
   }
 
   componentWillUnmount() {
-    if (this.removePluginChangeHandler) {
-      this.removePluginChangeHandler();
-      this.removePluginChangeHandler = null;
+    if (this.removePluginLoadHandler) {
+      this.removePluginLoadHandler();
+      this.removePluginLoadHandler = null;
     }
   }
 
-  handlePluginChange = () => {
+  handlePluginLoad = () => {
     const newPlugins = getPluginArray();
 
     if (!isEqual(newPlugins, this.state.plugins)) {

src/@types/@skidding/linked-list.d.ts

@@ -1,22 +1,22 @@
 import { isEqual } from 'lodash';
 import * as React from 'react';
-import { getPluginContext, isPluginLoaded, onStateChange } from 'ui-plugin';
-import { GetProps } from '../shared';
+import { getPlugin, getPluginContext, onStateChange } from 'ui-plugin';
+import { GetProps } from '../types';
 
-interface IProps {
+type Props = {
   pluginName: string;
   component: React.ComponentType;
   slotProps: object;
   getProps: GetProps;
   children?: React.ReactNode;
-}
+};
 
-interface IState {
+type State = {
   plugProps: object;
-}
+};
 
-export class PlugConnect extends React.Component<IProps, IState> {
-  static getDerivedStateFromProps(props: IProps, state: IState) {
+export class PlugConnect extends React.Component<Props, State> {
+  static getDerivedStateFromProps(props: Props, state: State) {
     const plugProps = getPlugProps(props);
 
     if (plugPropsEqual(plugProps, state.plugProps)) {
@@ -57,7 +57,7 @@ export class PlugConnect extends React.Component<IProps, IState> {
     // rendering is async, it takes a while for the Slot components to process
     // plugin changes, so PlugConnect components might receive state changes
     // for plugins that are no longer enabled.
-    if (!isPluginLoaded(this.props.pluginName)) {
+    if (!getPlugin(this.props.pluginName).enabled) {
       return;
     }
 
@@ -77,7 +77,7 @@ export class PlugConnect extends React.Component<IProps, IState> {
   }
 }
 
-function getPlugProps({ pluginName, slotProps, getProps }: IProps) {
+function getPlugProps({ pluginName, slotProps, getProps }: Props) {
   return getProps(getPluginContext(pluginName), slotProps);
 }
 

src/PluginsConsumer.tsx

@@ -1,19 +1,19 @@
 import { LinkedItem } from '@skidding/linked-list';
 import * as React from 'react';
-import { IPlug } from '../shared';
+import { Plug } from '../types';
 
-type SlotContextValue = undefined | LinkedItem<IPlug>;
+type SlotContextValue = undefined | LinkedItem<Plug>;
 
-interface ISlotContexts {
+type SlotContexts = {
   [slotName: string]: React.Context<SlotContextValue>;
-}
+};
 
 // Slots are nested, so higher-level Slots can contain lower-level Slots.
 // Multiple Plugs can be consumed by the same Slot, and the reference to the
 // current Plug is is passed down through the Slot context. A different context
 // is created for each Slot name to prevent Slots that contain other Slots from
 // interfering with each other’s Plug references.
-const slotContexts: ISlotContexts = {};
+const slotContexts: SlotContexts = {};
 
 export function getSlotContext(slotName: string) {
   if (!slotContexts[slotName]) {

src/Slot/PlugConnect.tsx

@@ -2,28 +2,28 @@ import createLinkedList from '@skidding/linked-list';
 import { isEqual } from 'lodash';
 import * as React from 'react';
 import { isValidElementType } from 'react-is';
-import { onPluginChange } from 'ui-plugin';
-import { getLoadedPlugsForSlot } from '../pluginStore';
-import { IPlug } from '../shared';
+import { onPluginLoad } from 'ui-plugin';
+import { Plug } from '../types';
+import { getEnabledPlugsForSlot } from '../store';
 import { getSlotContext } from './contexts';
 import { PlugConnect } from './PlugConnect';
 
-interface IProps {
+type Props = {
   name: string;
   children?: React.ReactNode;
   props?: object;
-}
+};
 
-interface IState {
-  plugs: IPlug[];
-}
+type State = {
+  plugs: Plug[];
+};
 
-export class Slot extends React.Component<IProps, IState> {
+export class Slot extends React.Component<Props, State> {
   state = {
-    plugs: getLoadedPlugsForSlot(this.props.name),
+    plugs: getEnabledPlugsForSlot(this.props.name),
   };
 
-  removePluginChangeHandler: null | (() => unknown) = null;
+  removePluginLoadHandler: null | (() => unknown) = null;
 
   render() {
     const { name, children, props = {} } = this.props;
@@ -52,40 +52,34 @@ export class Slot extends React.Component<IProps, IState> {
           }
 
           return (
-            <Provider value={next()}>
-              {getPlugNode(plug, props, children)}
-            </Provider>
+            <Provider value={next()}>{getPlugNode(plug, props, children)}</Provider>
           );
         }}
       </Consumer>
     );
   }
 
   componentDidMount() {
-    this.removePluginChangeHandler = onPluginChange(this.handlePluginChange);
+    this.removePluginLoadHandler = onPluginLoad(this.handlePluginLoad);
   }
 
   componentWillUnmount() {
-    if (this.removePluginChangeHandler) {
-      this.removePluginChangeHandler();
-      this.removePluginChangeHandler = null;
+    if (this.removePluginLoadHandler) {
+      this.removePluginLoadHandler();
+      this.removePluginLoadHandler = null;
     }
   }
 
-  handlePluginChange = () => {
-    const newPlugs = getLoadedPlugsForSlot(this.props.name);
+  handlePluginLoad = () => {
+    const newPlugs = getEnabledPlugsForSlot(this.props.name);
 
     if (!isEqual(newPlugs, this.state.plugs)) {
       this.setState({ plugs: newPlugs });
     }
   };
 }
 
-function getPlugNode(
-  plug: IPlug,
-  slotProps: object,
-  children?: React.ReactNode,
-) {
+function getPlugNode(plug: Plug, slotProps: object, children?: React.ReactNode) {
   const { pluginName, render, getProps } = plug;
 
   if (typeof render === 'string' || !isValidElementType(render)) {
@@ -108,7 +102,7 @@ function getPlugNode(
   return React.createElement(render, slotProps, children);
 }
 
-function getFirstLinkedPlug(plugs: IPlug[]) {
+function getFirstLinkedPlug(plugs: Plug[]) {
   // Plugs are traversed in the order they're applied. But this doesn't mean
   // top-down from a component hierarchy point of view. The traversal of the
   // plugs can go up and down the component hierachy repeatedly, based on the