├── .gitignore
├── package.json
├── index.js
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "posthtml-static-react",
 3 |   "version": "1.0.1",
 4 |   "description": "A PostHTML plugin to render custom elements as static React components.",
 5 |   "keywords": [
 6 |     "parser",
 7 |     "transform",
 8 |     "manipulation",
 9 |     "posthtml",
10 |     "posthtml-plugin",
11 |     "react",
12 |     "static-react",
13 |     "components"
14 |   ],
15 |   "main": "index.js",
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/rasmusfl0e/posthtml-static-react.git"
19 |   },
20 |   "author": {
21 |     "name": "rasmusfl0e",
22 |     "email": "rasmusfl0e@gmail.com"
23 |   },
24 |   "license": "ISC",
25 |   "bugs": {
26 |     "url": "https://github.com/rasmusfl0e/posthtml-static-react/issues"
27 |   },
28 |   "homepage": "https://github.com/rasmusfl0e/posthtml-static-react#readme",
29 |   "dependencies": {
30 |     "posthtml-match-helper": "^1.0.0",
31 |     "react": "^0.14.0",
32 |     "react-dom": "^0.14.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var React = require("react");
 2 | var server = require("react-dom/server");
 3 | 
 4 | var matchHelper = require("posthtml-match-helper");
 5 | 
 6 | var attrToProp = {
 7 | 	"class": "className",
 8 | 	"for": "htmlFor"
 9 | };
10 | 
11 | function toReact (node, components) {
12 | 	var tag = node.tag;
13 | 	var attrs = node.attrs;
14 | 	var element = (tag in components) ? components[tag] : (tag in React.DOM) ? tag : "div";
15 | 	var props = {
16 | 		key: Math.random().toString(32).slice(2)
17 | 	};
18 | 
19 | 	if (attrs) {
20 | 		Object.keys(attrs).map(function (attr) {
21 | 			var prop = attr in attrToProp ? attrToProp[attr] : attr;
22 | 			props[prop] = attrs[attr];
23 | 		});
24 | 	}
25 | 
26 | 	var children = null;
27 | 	if (Array.isArray(node.content)) {
28 | 		children = node.content.map(function (_node) {
29 | 			return typeof _node === "string" ? _node : toReact(_node, components);
30 | 		});
31 | 	}
32 | 
33 | 	return React.createElement(element, props, children);
34 | }
35 | 
36 | module.exports = function (matcher, components) {
37 | 
38 | 	return function posthtmlStaticReact (tree) {
39 | 
40 | 		tree.match(matchHelper(matcher), function (node) {
41 | 			return server.renderToStaticMarkup(toReact(node, components));
42 | 		});
43 | 
44 | 	};
45 | 
46 | };
47 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # posthtml-static-react
 2 | 
 3 | > A [PostHTML](https://github.com/posthtml/posthtml) plugin to render custom elements as static React components.
 4 | 
 5 | Basic usage
 6 | 
 7 | ```js
 8 | var React = require("react");
 9 | var posthtml = require("posthtml");
10 | var renderStaticReact = require("posthtml-static-react");
11 | 
12 | var html = "<my-custom-element></my-custom-element>";
13 | 
14 | var MyCustomElement = function (props) {
15 | 	return (
16 | 		<div className="my-custom-element"></div>
17 | 	);
18 | };
19 | 
20 | var components = {
21 | 	"my-custom-element": MyCustomElement
22 | };
23 | 
24 | posthtml()
25 | 	.use(renderStaticReact("my-custom-element", components))
26 | 	.process(html)
27 | 	.then(function (result) {
28 | 		console.log(result.html);
29 | 		// "<div class=\"my-custom-element\"></div>"
30 | 	});
31 | ```
32 | 
33 | **Note**: If you use [JSX](https://facebook.github.io/jsx/) syntax (as the example above) you will need to transform your scripts - either precompile with [babel](https://babeljs.io/docs/usage/cli/#babel) or at runtime with [babel-node](https://babeljs.io/docs/usage/cli/#babel-node). YMMV.
34 | 
35 | #### Arguments
36 | 
37 | * `matcher` (string|object|array) - Accepts a matcher argument just like [posthtml match](https://github.com/posthtml/posthtml/blob/master/README.md#match-objectstringregexp-functionposthtmlnode-posthtmlnodestring) - or a CSS selector string (which will be turned into at matcher object via [posthtml-match-helper](https://github.com/rasmusfl0e/posthtml-match-helper)).
38 | * `components` (object) - A map of the custom element names used in your HTML and the React components you want to render them as.
39 | 
40 | #### Returns
41 | 
42 | A configured plugin ready to use with PostHTML.
43 | 


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