Add proxy boilerplate #405

CONTRIBUTING.md

@@ -11,6 +11,7 @@ Jump to:
   - [Monorepo](#monorepo)
   - [Playground & Loader](#playground--loader-communication)
   - [webpack](#webpack)
+- [Proxy boilerplate](#proxy-boilerplate)
 - [How to contribute](#how-to-contribute)
 
 ## Mission
@@ -79,6 +80,43 @@ Using webpack-dev-middleware, the webpack config is attached to an Express serve
 
 Static exporting is almost identical to development mode, except that it saves the webpack build to disk instead of attaching it to a running Express server.
 
+## Proxy boilerplate
+
+Start from this when creating a new proxy.
+
+```js
+import React from 'react';
+import proxyPropTypes from 'react-cosmos-utils/lib/proxy-prop-types';
+
+const defaults = {
+  // add option defaults here
+};
+
+export default options => {
+  const { /* expand options here */ } = { ...defaults, ...options };
+
+  const NoopProxy = props => {
+    const { value: NextProxy } = props.nextProxy;
+
+    return <NextProxy {...props} nextProxy={props.nextProxy.next()} />;
+  };
+
+  NoopProxy.propTypes = proxyPropTypes;
+
+  return NoopProxy;
+};
+```
+
+Notice the core requirements of a proxy:
+- Renders next proxy with same props
+- Advances the proxy chain – sends `props.nextProxy.next()` to next proxy
+- Implements or extends default proxy PropTypes
+
+This is a very basic example. Here's what proxies might also do:
+- Implement lifecycle methods (mock stuff in constructor, revert it in componentWillUnmount)
+- Add extra DOM markup around NextProxy
+- Transform props of props.fixture (careful, tho.)
+
 ## How to contribute
 
 A great way to start is by picking up a [`free for all`](https://github.com/react-cosmos/react-cosmos/issues?q=is%3Aopen+is%3Aissue+label%3A%22free+for+all%22) issue. Keep the project [goals](#goals) in mind.