├── .gitignore
├── Readme.md
├── example.js
├── index.js
├── package.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | # Preact RC
 2 | 
 3 | Remote control your Preact components! Here's a [demo](http://jsbin.com/cagirom/2/edit?html,js,output).
 4 | 
 5 | Trigger components from other parts of the virtual DOM tree without holding onto any of their state.
 6 | 
 7 | Useful for modals, callouts, and alerts.
 8 | 
 9 | ## Installation
10 | 
11 | ```js
12 | npm install preact-rc
13 | ```
14 | 
15 | ## Example
16 | 
17 | ```js
18 | Alert = RC(function (props) {
19 |   return <AlertBox {...props} />
20 | })
21 | 
22 | // <Alert /> will now render <AlertBox>
23 | // Alert.setState({ ... }) will pass props into AlertBox
24 | ```
25 | 
26 | ## License
27 | 
28 | MIT
29 | 


--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
 1 | const { h, render, Component } = require('preact')
 2 | const RC = require('./')
 3 | 
 4 | const Alert = RC(function (props) {
 5 |   return h(AlertBox, props)
 6 | })
 7 | 
 8 | class App extends Component {
 9 |   onClick () {
10 |     Alert.setState({ message: 'ALERT!!!!' })
11 |   }
12 | 
13 |   render () {
14 |     return h('button', { onClick: this.onClick.bind(this) }, 'Click me')
15 |   }
16 | }
17 | 
18 | class AlertBox extends Component {
19 |   componentWillReceiveProps () {
20 |     setTimeout(() => this.setState({ hide: true }), 1000)
21 |     this.setState({ hide: false })
22 |   }
23 | 
24 |   render (props, state = {}) {
25 |     if (!props.message || state.hide) return null
26 |     return h('div', { key: 'alert', style: 'background: red; color: white' }, props.message)
27 |   }
28 | }
29 | 
30 | render(h('div', {}, [ h(Alert), h(App) ]), document.body)
31 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Module Dependencies
 3 |  */
 4 | 
 5 | var assign = require('object-assign')
 6 | var preact = require('preact')
 7 | 
 8 | /**
 9 |  * Export `RC`
10 |  */
11 | 
12 | module.exports = RC
13 | 
14 | /**
15 |  * Create a Preact class
16 |  */
17 | 
18 | function createClass (obj) {
19 |   function C () {
20 |     preact.Component.apply(this, arguments)
21 |     if (obj.construct) obj.construct.call(this)
22 |   }
23 |   C.prototype = new preact.Component()
24 |   for (var i in obj) C.prototype[i] = obj[i]
25 |   C.prototype.constructor = C
26 |   return C
27 | }
28 | 
29 | /**
30 |  * RC
31 |  */
32 | 
33 | function RC (fn) {
34 |   var channel = {
35 |     publish: function (data) { this.fn(data) },
36 |     subscribe: function (fn) { this.fn = fn },
37 |     fn: function () {}
38 |   }
39 | 
40 |   var rc = createClass({
41 |     construct: function () {
42 |       var self = this
43 |       channel.subscribe(function (state) { self.setState(state) })
44 |     },
45 |     render: function (props, state) {
46 |       return fn(assign({}, props, state || {}))
47 |     }
48 |   })
49 | 
50 |   rc.setState = function (state) {
51 |     channel.publish(state)
52 |   }
53 | 
54 |   return rc
55 | }
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "preact-rc",
 3 |   "version": "1.0.0",
 4 |   "description": "Remote Control for your Preact components",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": ["preact", "remove", "control", "portal", "component"],
10 |   "author": "Matthew Mueller",
11 |   "license": "ISC",
12 |   "peerDependencies": {
13 |     "preact": "^7.1.0"
14 |   },
15 |   "dependencies": {
16 |     "object-assign": "^4.1.0"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | object-assign:
 4 |   version "4.1.0"
 5 |   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 6 | 
 7 | preact:
 8 |   version "7.1.0"
 9 |   resolved "https://registry.yarnpkg.com/preact/-/preact-7.1.0.tgz#119cf65963abff28038b2330601adde969990a8d"
10 | 
11 | 


--------------------------------------------------------------------------------