Create API for array Slots (#18)

Author: ovidiuch

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    sourceType: 'module',
+  },
+  plugins: ['react-hooks'],
+  extends: ['plugin:react/recommended'],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

TODO.md

@@ -1,8 +1,7 @@
 - [x] Rename Slot props to `slotProps`
 - [x] Test new plug API in react-cosmos with yarn link
 - [x] Test for context memoization in plugs
-- [ ] Create useArraySlot
-- [ ] Maybe: createPluginStore
+- [x] Create ArraySlot component
 
 ---
 

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'node'
+  testEnvironment: 'node',
+  collectCoverageFrom: ['**/src/**/*.{ts,tsx}', '!**/testHelpers/**'],
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-plugin",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "API for composable 3rd party React plugins",
   "repository": "https://github.com/skidding/react-plugin.git",
   "author": "Ovidiu Cherecheș <[email protected]>",
@@ -11,7 +11,7 @@
     "dist"
   ],
   "scripts": {
-    "lint": "tslint --project tsconfig.json",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
     "build": "rm -rf dist && yarn lint && yarn tsc -b tsconfig.build.json"
@@ -20,21 +20,23 @@
     "@skidding/linked-list": "^1.0.2",
     "array-find-index": "^1.0.2",
     "lodash": "^4.17.11",
-    "ui-plugin": "^2.0.0-alpha.2"
+    "ui-plugin": "^2.0.0-alpha.3"
   },
   "devDependencies": {
     "@skidding/async-retry": "^2.0.0",
     "@types/jest": "^24.0.12",
     "@types/lodash": "^4.14.123",
     "@types/react": "^16.8.17",
     "@types/react-test-renderer": "^16.8.1",
+    "@typescript-eslint/parser": "^1.7.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "jest": "^24.8.0",
     "prettier": "^1.17.0",
     "react": "^16.8.6",
     "react-test-renderer": "^16.8.6",
     "ts-jest": "^24.0.2",
-    "tslint": "^5.16.0",
-    "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.4.5"
   }
 }

src/ArraySlot/__tests__/index.tsx

@@ -0,0 +1,96 @@
+import retry from '@skidding/async-retry';
+import * as React from 'react';
+import { ReactTestRenderer, act } from 'react-test-renderer';
+import { createRenderer } from '../../testHelpers';
+import { loadPlugins, createPlugin, resetPlugins, ArraySlot } from '../..';
+
+afterEach(resetPlugins);
+
+function AgeComponent({ age }: { age: number }) {
+  // TS isn't happy with function components returning strings
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544
+  return <>{`${age}y old`}</>;
+}
+
+interface Test {
+  name: 'test';
+  state: { age: number };
+}
+
+it('renders each plug', async () => {
+  const { plug, register } = createPlugin<Test>({
+    name: 'test',
+    initialState: { age: 28 },
+  });
+  plug('root', () => <AgeComponent age={29} />);
+  plug('root', () => <AgeComponent age={30} />);
+  plug('root', () => <AgeComponent age={31} />);
+  register();
+
+  loadPlugins();
+  const renderer = createRenderer(<ArraySlot name="root" />);
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`
+    Array [
+      "29y old",
+      "30y old",
+      "31y old",
+    ]
+  `);
+});
+
+it('passes down pluginContext prop', () => {
+  const { plug, register } = createPlugin<Test>({
+    name: 'test',
+    initialState: { age: 29 },
+  });
+  plug('root', ({ pluginContext }) => (
+    <AgeComponent age={pluginContext.getState().age} />
+  ));
+  register();
+
+  loadPlugins();
+  const renderer = createRenderer(<ArraySlot name="root" />);
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`"29y old"`);
+});
+
+it('passes down slot props', () => {
+  const { plug, register } = createPlugin<Test>({
+    name: 'test',
+    initialState: { age: 28 },
+  });
+  plug<{ age: number }>('root', ({ slotProps }) => <AgeComponent age={slotProps.age} />);
+  register();
+
+  loadPlugins();
+  const renderer = createRenderer(<ArraySlot name="root" slotProps={{ age: 29 }} />);
+  expect(renderer.toJSON()).toMatchInlineSnapshot(`"29y old"`);
+});
+
+it('updates plug on plugin state change', async () => {
+  const { onLoad, plug, register } = createPlugin<Test>({
+    name: 'test',
+    initialState: { age: 29 },
+  });
+  plug('root', ({ pluginContext }) => (
+    <AgeComponent age={pluginContext.getState().age} />
+  ));
+  onLoad(({ setState }) => {
+    setTimeout(() => {
+      act(() => {
+        setState({ age: 30 });
+      });
+    });
+  });
+  register();
+
+  loadPlugins();
+  const renderer = createRenderer(<ArraySlot name="root" />);
+  await retry(() => {
+    // expect().toMatchInlineSnapshot can't be placed inside async retry()
+    expect(getAgeProp(renderer)).toEqual(30);
+  });
+});
+
+function getAgeProp(renderer: ReactTestRenderer) {
+  return renderer.root.findByType(AgeComponent).props.age;
+}

src/ArraySlot/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useSlotPlugs } from '../shared/useSlotPlugs';
+import { PlugConnect } from '../shared/PlugConnect';
+
+// Possible future features: Sorting and custom plug decoration
+type Props = {
+  name: string;
+  slotProps?: object;
+};
+
+export function ArraySlot({ name, slotProps = {} }: Props) {
+  return (
+    // TS isn't happy with function components returning non-JSX.Elements
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544
+    <>
+      {useSlotPlugs(name).map(plug => (
+        <PlugConnect
+          key={plug.id}
+          pluginName={plug.pluginName}
+          component={plug.component}
+          slotProps={slotProps}
+        />
+      ))}
+    </>
+  );
+}

src/PluginsConsumer.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
+import { createRenderer } from '../../testHelpers';
 import {
   enablePlugin,
   loadPlugins,
   PluginsConsumer,
   createPlugin,
   resetPlugins,
-} from '..';
+} from '../..';
 
 afterEach(resetPlugins);
 
@@ -19,7 +20,7 @@ it('calls the consumer render fn with plugin list', () => {
   createPlugin({ name: 'Michael Palin' }).register();
   loadPlugins();
 
-  const renderer = create(<EnabledPluginNames />);
+  const renderer = createRenderer(<EnabledPluginNames />);
   expect(renderer.toJSON()).toMatchInlineSnapshot(
     `"Graham Chapman, John Cleese, Terry Gilliam, Eric Idle, Terry Jones, Michael Palin"`,
   );
@@ -36,7 +37,7 @@ it('calls the consumer render fn with enabled plugin list', () => {
   enablePlugin('Michael Palin', false);
   loadPlugins();
 
-  const renderer = create(<EnabledPluginNames />);
+  const renderer = createRenderer(<EnabledPluginNames />);
   expect(renderer.toJSON()).toMatchInlineSnapshot(
     `"Graham Chapman, John Cleese, Terry Gilliam, Eric Idle"`,
   );
@@ -50,11 +51,13 @@ it('calls the consumer render fn with enabled plugin list', () => {
   createPlugin({ name: 'Terry Jones' }).register();
   createPlugin({ name: 'Michael Palin' }).register();
 
-  const renderer = create(<EnabledPluginNames />);
+  const renderer = createRenderer(<EnabledPluginNames />);
   loadPlugins();
 
-  enablePlugin('Terry Jones', false);
-  enablePlugin('Michael Palin', false);
+  act(() => {
+    enablePlugin('Terry Jones', false);
+    enablePlugin('Michael Palin', false);
+  });
 
   expect(renderer.toJSON()).toMatchInlineSnapshot(
     `"Graham Chapman, John Cleese, Terry Gilliam, Eric Idle"`,

src/__tests__/consumer.tsx renamed to src/PluginsConsumer/__tests__/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { create } from 'react-test-renderer';
-import { loadPlugins, PluginsConsumer, createPlugin, resetPlugins } from '..';
+import { act } from 'react-test-renderer';
+import { createRenderer } from '../../testHelpers';
+import { loadPlugins, PluginsConsumer, createPlugin, resetPlugins } from '../..';
 
 afterEach(resetPlugins);
 
@@ -9,7 +10,7 @@ it('updates plugins from consumer methods', () => {
   createPlugin({ name: 'Wiz Khalifa' }).register();
   loadPlugins();
 
-  const renderer = create(<PluginList />);
+  const renderer = createRenderer(<PluginList />);
   expect(renderer.toJSON()).toMatchInlineSnapshot(`
 Array [
   <p
@@ -27,8 +28,10 @@ Array [
 
   // Disable both
   const [snoop, wiz] = renderer.root.findAllByType('p');
-  snoop.props.onClick();
-  wiz.props.onClick();
+  act(() => {
+    snoop.props.onClick();
+    wiz.props.onClick();
+  });
 
   expect(renderer.toJSON()).toMatchInlineSnapshot(`
 Array [
@@ -46,7 +49,9 @@ Array [
 `);
 
   // Bring back Wiz
-  wiz.props.onClick();
+  act(() => {
+    wiz.props.onClick();
+  });
 
   expect(renderer.toJSON()).toMatchInlineSnapshot(`
 Array [