Add withPIXIApp higher order component

Author: inlet

src/index.js

@@ -1,15 +1,15 @@
 import { TYPES, PixiComponent } from './utils/element'
 import { render } from './render'
 import Stage from './stage'
-import Provider from './stage/provider'
+import { Provider, withPixiApp } from './stage/provider'
 
 /**
  * -------------------------------------------
  * Public API
  * -------------------------------------------
  */
 
-export { render, Stage, Provider, PixiComponent }
+export { render, Stage, Provider, withPixiApp, PixiComponent }
 
 export const BitmapText = TYPES.BitmapText
 export const Container = TYPES.Container

src/stage/provider.js

@@ -1,8 +1,46 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+/**
+ * Provider for exposing the PIXI.Application
+ *
+ * @param {Function} children
+ * @param {Object} app from context
+ * @returns {React.Component}
+ * @usage:
+ *
+ *   const App = () => (
+ *     <Stage>
+ *       <Provider>
+ *         {app => <MyComponent app={app} />}
+ *       </Provider>
+ *     </Stage>
+ *   )
+ *
+ */
 const Provider = ({ children }, { app }) => children(app)
 Provider.contextTypes = { app: PropTypes.object }
 Provider.propTypes = { children: PropTypes.func }
 
-export default Provider
+/**
+ * Or as a Higher Order Component
+ *
+ * @param {React.Component|Function} BaseComponent
+ * @returns {React.Component|Function}
+ * @usage
+ *
+ *  const App = withPIXIApp(({ app ) => ())
+ *
+ */
+const withPixiApp = BaseComponent => {
+  class WithPIXIApp extends React.Component {
+    render() {
+      return <BaseComponent {...this.props} app={this.context.app} />
+    }
+  }
+
+  WithPIXIApp.contextTypes = { app: PropTypes.object }
+  return WithPIXIApp
+}
+
+export { withPixiApp, Provider }

test/__snapshots__/index.spec.js.snap

@@ -17,5 +17,6 @@ Object {
   "Text": "Text",
   "TilingSprite": "TilingSprite",
   "render": [Function],
+  "withPixiApp": [Function],
 }
 `;

test/stage.spec.js

@@ -3,7 +3,7 @@ import * as PIXI from 'pixi.js'
 import renderer from 'react-test-renderer'
 import { PixiFiber, PACKAGE_NAME, VERSION } from '../src/reconciler'
 import { runningInBrowser } from '../src/helpers'
-import { Stage, Provider, Container, Text } from '../src'
+import { Stage, Provider, withPixiApp, Container, Text } from '../src'
 import { getCanvasProps } from '../src/stage'
 import { mockToSpy } from './__utils__/mock'
 
@@ -240,7 +240,26 @@ describe('stage', () => {
 
       const instance = el.getInstance()
 
-      expect(fn).toHaveBeenCalled()
+      expect(fn).toHaveBeenCalledTimes(1)
+      expect(fn).toHaveBeenCalledWith(instance.app)
+    })
+  })
+
+  describe('provider as a higher order component', () => {
+    test('pass down app to child component', () => {
+      const fn = jest.fn(() => <Container />)
+      const Comp = withPixiApp(({ app }) => fn(app))
+
+      const el = renderer.create(
+        <Stage>
+          <Container>
+            <Comp />
+          </Container>
+        </Stage>
+      )
+
+      const instance = el.getInstance()
+
       expect(fn).toHaveBeenCalledTimes(1)
       expect(fn).toHaveBeenCalledWith(instance.app)
     })