Viewport decorator (#937)

Author: ovidiuch

examples/jsx-fixtures/components/WelcomeMessage/index.jsxfixture.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { Viewport } from '../../decorators/Viewport';
+import { Viewport } from 'react-cosmos-fixture';
 import { Hello } from '.';
 
 export default (

examples/jsx-fixtures/decorators/Viewport.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { isEqual } from 'lodash';
-import { FixtureState } from 'react-cosmos-shared2/fixtureState';
 
 export type ElRefs = { [elPath: string]: React.Component };
 
@@ -22,15 +21,6 @@ export type CachedRefHandlers = {
   [elPath: string]: CachedRefHandler;
 };
 
-// Make latest fixture state accessible in hooks callbacks
-export function useFixtureStateRef(fixtureState: FixtureState) {
-  const ref = React.useRef(fixtureState);
-  React.useEffect(() => {
-    ref.current = fixtureState;
-  });
-  return ref;
-}
-
 export function useUnmount(cb: () => void) {
   React.useEffect(() => cb, []);
 }

packages/react-cosmos-fixture/src/FixtureCapture/classState/shared.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { isEqual } from 'lodash';
 import {
   FixtureDecoratorId,
+  FixtureState,
   createValues,
   extendWithValues,
   getFixtureStateClassState,
@@ -15,7 +16,6 @@ import {
   ElRefs,
   InitialStates,
   CachedRefHandlers,
-  useFixtureStateRef,
   useUnmount,
   replaceState
 } from './shared';
@@ -119,7 +119,7 @@ export function useFixtureState(
         }
       }
     });
-  }, [children, fixtureState.classState]);
+  }, [setFixtureState, children, fixtureState.classState]);
 
   // Update prev fixture state ref *after* running effects that reference it
   React.useEffect(() => {
@@ -141,7 +141,7 @@ export function useFixtureState(
     }
 
     elRefs.current[elPath] = elRef;
-    setInitialState(elPath, elRef);
+    setInitialState(initialStates.current, elPath, elRef);
 
     const elementId = { decoratorId, elPath };
     const fsClassState = findFixtureStateClassState(
@@ -161,15 +161,28 @@ export function useFixtureState(
       replaceState(elRef, extendWithValues(state, fsClassState.values));
     }
   }
+}
 
-  function setInitialState(elPath: string, elRef: React.Component) {
-    const found = initialStates.current[elPath];
-    const type = elRef.constructor as React.ComponentClass;
+// Make latest fixture state accessible in ref callback
+function useFixtureStateRef(fixtureState: FixtureState) {
+  const ref = React.useRef(fixtureState);
+  React.useEffect(() => {
+    ref.current = fixtureState;
+  });
+  return ref;
+}
 
-    // Keep the first state recevied for this type
-    const initialStateExists = found && found.type === type;
-    if (!initialStateExists && elRef.state) {
-      initialStates.current[elPath] = { type, state: elRef.state };
-    }
+function setInitialState(
+  initialStates: InitialStates,
+  elPath: string,
+  elRef: React.Component
+) {
+  const found = initialStates[elPath];
+  const type = elRef.constructor as React.ComponentClass;
+
+  // Keep the first state recevied for this type
+  const initialStateExists = found && found.type === type;
+  if (!initialStateExists && elRef.state) {
+    initialStates[elPath] = { type, state: elRef.state };
   }
 }

packages/react-cosmos-fixture/src/FixtureCapture/classState/useFixtureState.ts

@@ -10,7 +10,7 @@ import {
 } from 'react-cosmos-shared2/fixtureState';
 import { FixtureContext } from '../../FixtureContext';
 import { findRelevantElementPaths } from '../shared/findRelevantElementPaths';
-import { ElRefs, useFixtureStateRef } from './shared';
+import { ElRefs } from './shared';
 
 // How often to check the state of the loaded component and update the fixture
 // state if it changed
@@ -23,7 +23,6 @@ export function useReadClassState(
 ) {
   const elPaths = findRelevantElementPaths(children);
   const { fixtureState, setFixtureState } = React.useContext(FixtureContext);
-  const lastFixtureState = useFixtureStateRef(fixtureState);
   const timeoutId = React.useRef<null | number>(null);
 
   React.useEffect(() => {
@@ -54,11 +53,7 @@ export function useReadClassState(
 
       const { state } = elRefs.current[elPath];
       const elementId = { decoratorId, elPath };
-      const fsClassState = findFixtureStateClassState(
-        lastFixtureState.current,
-        elementId
-      );
-
+      const fsClassState = findFixtureStateClassState(fixtureState, elementId);
       if (
         fsClassState &&
         state &&

packages/react-cosmos-fixture/src/FixtureCapture/classState/useReadClassState.ts

@@ -77,7 +77,7 @@ export function usePropsCapture(
         }));
       }
     });
-  }, [fixture, fixtureState.props]);
+  }, [setFixtureState, fixture, fixtureState.props]);
 
   React.useEffect(() => {
     prevFixtureRef.current = fixture;

packages/react-cosmos-fixture/src/FixtureCapture/props/index.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { FixtureContext } from './FixtureContext';
+
+type Props = {
+  children: React.ReactNode;
+  width: number;
+  height: number;
+};
+
+export function Viewport({ children, width, height }: Props) {
+  const { setFixtureState } = React.useContext(FixtureContext);
+
+  React.useEffect(() => {
+    setFixtureState(fixtureState => ({
+      ...fixtureState,
+      viewport: { width, height }
+    }));
+  }, [setFixtureState, width, height]);
+
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+  return <>{children}</>;
+}

packages/react-cosmos-fixture/src/Viewport.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import retry from '@skidding/async-retry';
+import { uuid } from 'react-cosmos-shared2/util';
+import { runFixtureConnectTests } from '../testHelpers';
+import { anyProps } from '../testHelpers/fixtureState';
+import { Viewport } from '..';
+
+const rendererId = uuid();
+const fixtures = {
+  first: (
+    <Viewport width={320} height={240}>
+      yo
+    </Viewport>
+  )
+};
+const decorators = {};
+const fixtureId = { path: 'first', name: null };
+
+runFixtureConnectTests(mount => {
+  it('renders children', async () => {
+    await mount(
+      { rendererId, fixtures, decorators },
+      async ({ renderer, selectFixture }) => {
+        await selectFixture({
+          rendererId,
+          fixtureId,
+          fixtureState: {}
+        });
+        await retry(() => expect(renderer.toJSON()).toBe('yo'));
+      }
+    );
+  });
+
+  it('creates viewport fixture state', async () => {
+    await mount(
+      { rendererId, fixtures, decorators },
+      async ({ selectFixture, fixtureStateChange }) => {
+        await selectFixture({
+          rendererId,
+          fixtureId,
+          fixtureState: {}
+        });
+        await fixtureStateChange({
+          rendererId,
+          fixtureId,
+          fixtureState: {
+            props: [anyProps()],
+            viewport: { width: 320, height: 240 }
+          }
+        });
+      }
+    );
+  });
+
+  it('updates viewport fixture state', async () => {
+    await mount(
+      { rendererId, fixtures, decorators },
+      async ({ update, selectFixture, fixtureStateChange }) => {
+        await selectFixture({
+          rendererId,
+          fixtureId,
+          fixtureState: {}
+        });
+        update({
+          rendererId,
+          fixtures: {
+            first: (
+              <Viewport width={640} height={480}>
+                yo
+              </Viewport>
+            )
+          },
+          decorators
+        });
+        await fixtureStateChange({
+          rendererId,
+          fixtureId,
+          fixtureState: {
+            props: [anyProps()],
+            viewport: { width: 640, height: 480 }
+          }
+        });
+      }
+    );
+  });
+});

packages/react-cosmos-fixture/src/__tests__/viewport.tsx

@@ -8,3 +8,6 @@ export { FixtureContext } from './FixtureContext';
 
 // Advanced: Use in fixtures to capture elements in render callback
 export { FixtureCapture } from './FixtureCapture';
+
+// Use in fixtures
+export { Viewport } from './Viewport';