All the mixins

Author: goatslacker

Diff for: AltManagerMixin.js

@@ -0,0 +1,91 @@
+'use strict'
+/**
+ * This mixin lets you setup your listeners for a single store/action for
+ * that uses AltManager.js, it will re-attach listeners when the props.alt
+ * changes. It requires an alt instance as props.alt to be passed. For exmaple:
+ *
+ * <FooComponent alt={manager.get('MyAltInstName')} />
+ *
+ * Your component will have access to this.action and this.store which contains
+ * the dyanmically available Alt action instance and Alt store instance.
+ *
+ * Usage:
+ *
+ * mixins: [AltManagerMixin],
+ *
+ * statics: {
+ *   registerStore: FooStore,
+ *   registerAction: FooAction,
+ * },
+ *
+ *
+ * onNewAlt(newState, newProps) {
+ *   // Do whatever you want here. This is an optional callback you can have
+ *   // inside your component if it needs to handle certain actions if a new
+ *   // Alt instance was created.
+ * }
+ *
+ */
+var AltManagerMixin = {
+
+  action: null,
+  store: null,
+
+  componentWillMount: function() {
+    // we need to init the store and actions during creation
+    this.initProps(this.props)
+  },
+
+  componentWillReceiveProps: function(newProps) {
+    // unlisten from old alt store if change of alt
+    if (this.props.alt !== newProps.alt) {
+      this.store.unlisten(this.listenState)
+      // init the new props
+      this.initProps(newProps)
+    } else {
+      // we always need to set the new state if the props changed
+      this.setState(this.store.getState())
+    }
+  },
+
+  listenState: function(data) {
+    // we make this a method here so we can pass it to unlisten
+    this.setState(data)
+  },
+
+  initProps: function(props) {
+    var Store = this.constructor.registerStore
+    var Action = this.constructor.registerAction
+    if (!Store) {
+      throw new ReferenceError('registerStore has not been defined')
+    }
+
+    if (!Action) {
+      throw new ReferenceError('registerAction has not been is defined')
+    }
+
+    var storeName = Store.name
+    var actionName = Action.name
+
+    this.action = props.alt.getActions(actionName)
+    this.store = props.alt.getStore(storeName)
+
+    if (!this.action) {
+      props.alt.addActions(actionName, Action)
+      this.action = props.alt.getActions(actionName)
+      this.store = props.alt.createStore(Store, null, props.alt)
+      if (this.onNewAlt) {
+        this.onNewAlt(this.store.getState(), props)
+      }
+    }
+
+    this.setState(this.store.getState())
+    this.store.listen(this.listenState)
+  },
+
+  componentWillUnmount: function() {
+    this.store.unlisten(this.listenState)
+  }
+}
+
+module.exports = AltManagerMixin

Diff for: FluxyMixin.js

@@ -0,0 +1,81 @@
+'use strict'
+/**
+ * This mixin lets you setup your listeners. It is similar to Fluxible's mixin.
+ *
+ * Usage:
+ *
+ * mixins: [FluxyMixin],
+ *
+ * statics: {
+ *   storeListeners: {
+ *     doFoo: FooStore,
+ *     doBar: BarStore
+ *   }
+ * },
+ *
+ * doFoo: function (storeState) {
+ *   this.setState({ foo: FooStore.getState() })
+ * },
+ *
+ * doBar: function (storeState) { },
+ *
+ * render: function () {
+ *   // state will be in the keys you provided
+ *   this.state.foo
+ * }
+ *
+ * ----
+ *
+ * You can also pass in an Array of stores to storeListeners:
+ *
+ * statics: {
+ *   storeListeners: [FooStore, BarStore]
+ * }
+ *
+ * Changes will then be passed to a function `onChange` which you will have
+ * to define:
+ *
+ * onChange() {
+ *   this.setState({
+ *     foo: FooStore.getState(),
+ *     bar: BarStore.getState()
+ *   })
+ * }
+ */
+var Subscribe = require('./Subscribe')
+
+var FluxyMixin = {
+  componentDidMount: function () {
+    Subscribe.create(this)
+
+    var stores = this.constructor.storeListeners
+
+    if (Array.isArray(stores)) {
+      if (!this.onChange) {
+        throw new ReferenceError(
+          'onChange should exist in your React component but is not defined'
+        )
+      }
+
+      stores.forEach(function (store) {
+        Subscribe.add(this, store, this.onChange)
+      }, this)
+    } else {
+      Object.keys(stores).forEach(function (handler) {
+        if (!this[handler]) {
+          throw new ReferenceError(
+            handler + ' does not exist in your React component'
+          )
+        }
+
+        Subscribe.add(this, stores[handler], this[handler])
+      }, this)
+    }
+  },
+
+  componentWillUnmount: function () {
+    Subscribe.destroy(this)
+  }
+}
+
+module.exports = FluxyMixin

Diff for: IsomorphicMixin.js

@@ -0,0 +1,15 @@
+'use strict'
+module.exports = { create: createIsomorphicMixin }
+
+function createIsomorphicMixin(alt) {
+  return {
+    componentWillMount: function () {
+      if (!this.props.altStores) {
+        throw new ReferenceError(
+          'altStores was not provided as a property to the react element'
+        )
+      }
+      alt.bootstrap(JSON.stringify(this.props.altStores))
+    }
+  }
+}

Diff for: ListenerMixin.js

@@ -0,0 +1,28 @@
+'use strict'
+var Subscribe = require('./Subscribe')
+
+var ListenerMixin = {
+  componentWillMount: function () {
+    Subscribe.create(this)
+  },
+
+  componentWillUnmount: function () {
+    Subscribe.destroy(this)
+  },
+
+  listenTo: function (store, handler) {
+    Subscribe.add(this, store, handler)
+  },
+
+  listenToMany: function (stores, handler) {
+    stores.forEach(function (store) {
+      this.listenTo(store, handler)
+    }, this)
+  },
+
+  getListeners: function () {
+    return Subscribe.listeners(this)
+  }
+}
+
+module.exports = ListenerMixin

Diff for: ReactStateMagicMixin.js

@@ -0,0 +1,82 @@
+'use strict'
+/**
+ * This mixin automatically sets the state for you based on the key you provide
+ *
+ * Usage:
+ *
+ * mixins: [ReactStateMagicMixin],
+ *
+ * statics: {
+ *   registerStores: {
+ *     foo: FooStore,
+ *     bar: BarStore
+ *   }
+ * },
+ *
+ * render: function () {
+ *   // state will be in the keys you provided
+ *   this.state.foo
+ *   this.state.bar
+ * }
+ *
+ * Alternatively:
+ *
+ * statics: {
+ *   registerStore: FooStore
+ * },
+ *
+ * render: function () {
+ *   // all of FooStore's state will be dumped into this.state
+ *   this.state
+ * }
+ */
+var Subscribe = require('./Subscribe')
+
+var ReactStateMagicMixin = {
+  getInitialState: function () {
+    return this.getStateFromStores()
+  },
+
+  componentDidMount: function () {
+    Subscribe.create(this)
+
+    var stores = this.constructor.registerStores
+
+    if (this.constructor.registerStore && this.constructor.registerStores) {
+      throw new ReferenceError(
+        'You are attempting to use `registerStore` and `registerStores` ' +
+          'pick one'
+      )
+    }
+
+    if (this.constructor.registerStore) {
+      Subscribe.add(this, this.constructor.registerStore, this.altSetState)
+    } else {
+      Object.keys(stores).forEach(function (formatter) {
+        Subscribe.add(this, stores[formatter], this.altSetState)
+      }, this)
+    }
+  },
+
+  componentWillUnmount: function () {
+    Subscribe.destroy(this)
+  },
+
+  getStateFromStores: function () {
+    if (this.constructor.registerStore) {
+      return this.constructor.registerStore.getState()
+    }
+
+    var stores = this.constructor.registerStores
+
+    return Object.keys(stores).reduce(function (obj, key) {
+      return obj[key] = stores[key].getState(), obj
+    }, {})
+  },
+
+  altSetState: function () {
+    this.setState(this.getStateFromStores())
+  }
+}
+
+module.exports = ReactStateMagicMixin

Diff for: Subscribe.js

@@ -0,0 +1,22 @@
+'use strict'
+
+var Subscribe = {
+  create: function (context) {
+    context._AltMixinRegistry = context._AltMixinRegistry || []
+  },
+
+  add: function (context, store, handler) {
+    context._AltMixinRegistry.push(store.listen(handler))
+  },
+
+  destroy: function (context) {
+    context._AltMixinRegistry.forEach(function (f) { f() })
+    context._AltMixinRegistry = []
+  },
+
+  listeners: function (context) {
+    return context._AltMixinRegistry
+  }
+}
+
+module.exports = Subscribe

Diff for: index.js

@@ -0,0 +1 @@
+module.exports = new Error('Require each individual mixin')

Diff for: package.json

@@ -0,0 +1,25 @@
+{
+  "name": "alt-mixins",
+  "version": "1.0.0",
+  "description": "Mixins for use with Alt and react",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:altjs/mixins.git"
+  },
+  "keywords": [
+    "mixins",
+    "react",
+    "alt",
+    "flux"
+  ],
+  "author": "Josh Perez <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/altjs/mixins/issues"
+  },
+  "homepage": "https://github.com/altjs/mixins"
+}