Add example

example/.babelrc

@@ -0,0 +1,20 @@
+{
+  "stage": 0,
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }
+      }
+    }
+  }
+}

example/.eslintrc

@@ -0,0 +1,44 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "rules": {
+
+    // Babel handles strict for us so it should never be manually added
+    "strict": [2, "never"],
+
+    // Single quotes on JSX components
+    "jsx-quotes": [2, "prefer-single"],
+
+    // Indent 2 spaces always
+    "indent": [2, 2],
+
+    // Omitting curly braces is fine as long as there is only one line under the
+    // statement
+    "curly": [2, "multi-or-nest"],
+
+    // Console can be useful and can also be stripped about by webpack in prod
+    "no-console": [0],
+
+    // Don't require a `new` keyword when calling capitalized functons. Ex:
+    // Immutable.Map({})
+    "new-cap": [2, { "capIsNew": false }],
+
+    // Having unsed args is allowed b/c its good for consistency and reminding
+    // what vars are available. Ex: (req, res, next) => res.send(/* ... */)
+    "no-unused-vars": [1, {"vars": "all", "args": "none"}],
+
+    // Allow multiple components in a single file
+    "react/no-multi-comp": [0],
+
+    // Do not require closing brackets to be on same line as opening brackets.
+    // This is good in theory but often very ugly when applied to a lone closing
+    // bracket of an opening tag:
+    // <div
+    //   someProp={true}
+    // >
+    // Or
+    // <div
+    //   someProp={true}>
+    "react/jsx-closing-bracket-location": [0],
+  },
+}

example/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+*.DS_Store
+public/
+.tmp/
+nginx.conf
+npm-debug.log

example/README.md

@@ -0,0 +1,9 @@
+# Highlight Strings
+
+A simple example of using `reactReplaceString` to highlight numbers in a rendered text string.
+
+**Quick Start:**
+
+* `npm install`
+* `npm start` to run at `http://localhost:3000`
+

example/index.js

@@ -0,0 +1,26 @@
+import React, { PropTypes } from 'react';
+import { render } from 'react-dom';
+
+import reactReplaceString from '../';
+
+const Highlight = React.createClass({
+  propTypes: {
+    content: PropTypes.string.isRequired,
+  },
+
+  render() {
+    return (
+      <div>
+        {reactReplaceString(this.props.content, )
+          <span className='highlight'>{x}</span>
+        }
+      </div>
+    );
+  },
+});
+
+
+const content = `Hey my number is 555-555-5555.`;
+
+// Render the app
+render(<Highlight content={content} />, document.getElementById('root'));

example/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-string-replace-example",
+  "version": "0.1.0",
+  "scripts": {
+    "start": "babel-node ./server.js"
+  },
+  "main": "server.js",
+  "author": "Ian Sinnott <[email protected]> (http://iansinnott.com)",
+  "license": "MIT",
+  "homepage": "",
+  "devDependencies": {
+    "autoprefixer-loader": "^3.1.0",
+    "axis": "^0.5.2",
+    "babel": "^5.8.34",
+    "babel-core": "^5.4.7",
+    "babel-eslint": "^4.1.6",
+    "babel-loader": "^5.1.2",
+    "babel-plugin-react-transform": "^1.1.1",
+    "css-loader": "^0.23.0",
+    "eslint": "^1.10.3",
+    "eslint-config-airbnb": "^2.1.1",
+    "eslint-plugin-react": "^3.12.0",
+    "express": "^4.13.3",
+    "extract-text-webpack-plugin": "^0.9.1",
+    "file-loader": "^0.8.5",
+    "history": "^1.17.0",
+    "normalize.css": "^3.0.3",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "react-router": "^1.0.3",
+    "react-static-webpack-plugin": "^0.3.0",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "redbox-react": "^1.2.0",
+    "rimraf": "^2.4.4",
+    "rupture": "^0.6.1",
+    "style-loader": "^0.13.0",
+    "stylus-loader": "^1.4.2",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.9",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-hot-middleware": "^2.6.0"
+  },
+  "dependencies": {}
+}

example/server.js

@@ -0,0 +1,79 @@
+/**
+ * NOTE: This file must be run with babel-node as Node is not yet compatible
+ * with all of ES6 and we also use JSX.
+ */
+import url from 'url';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import express from 'express';
+import webpack from 'webpack';
+
+import config from './webpack.config.dev.js';
+
+const Html = ({
+  title = 'Rainbow Unicorns',
+  bundle = '/app.js',
+  body = '',
+  favicon = '',
+  stylesheet = '',
+}) => (
+  <html lang='en'>
+    <head>
+      <meta charSet='utf-8' />
+      <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
+      <meta name='viewport' content='width=device-width, initial-scale=1' />
+      <title>{title}</title>
+      {favicon && <link rel='shortcut icon' href={favicon} />}
+      {stylesheet && <link rel='stylesheet' href={stylesheet} />}
+    </head>
+    <body>
+      <div id='root' dangerouslySetInnerHTML={{ __html: body }} />
+      <script src={bundle} />
+    </body>
+  </html>
+);
+
+/**
+ * Render the entire web page to a string. We use render to static markup here
+ * to avoid react hooking on to the document HTML that will not be managed by
+ * React. The body prop is a string that contains the actual document body,
+ * which react will hook on to.
+ *
+ * We also take this opportunity to prepend the doctype string onto the
+ * document.
+ *
+ * @param {object} props
+ * @return {string}
+ */
+const renderDocumentToString = props =>
+  '<!doctype html>' + renderToStaticMarkup(<Html {...props} />);
+
+const app = express();
+const compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath,
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+// Send the boilerplate HTML payload down for all get requests. Routing will be
+// handled entirely client side and we don't make an effort to pre-render pages
+// before they are served when in dev mode.
+app.get('*', (req, res) => {
+  const html = renderDocumentToString({
+    bundle: config.output.publicPath + 'app.js',
+  });
+  res.send(html);
+});
+
+// NOTE: url.parse can't handle URLs without a protocol explicitly defined. So
+// if we parse '//localhost:8888' it doesn't work. We manually add a protocol even
+// though we are only interested in the port.
+const { port } = url.parse('http:' + config.output.publicPath);
+
+app.listen(port, 'localhost', err => {
+  if (err) return console.error(err);
+  console.log(`Dev server listening at http://localhost:${port}`);
+});

example/webpack.config.js

@@ -0,0 +1,44 @@
+/* eslint-disable no-var */
+var path = require('path');
+var webpack = require('webpack');
+
+// Set up dev host host and HMR host. For the dev host this is pretty self
+// explanatory: We use a different live-reload server to server our static JS
+// files in dev, so we need to be able to actually point a script tag to that
+// host so it can load the right files. The HRM host is a bit stranger. For more
+// details on why we need this URL see the readme and:
+// https://github.com/glenjamin/webpack-hot-middleware/issues/37
+var DEV_PORT = process.env.DEV_PORT || 3000;
+var DEV_HOST = '//localhost:' + DEV_PORT + '/';
+var HMR_HOST = DEV_HOST + '__webpack_hmr';
+
+module.exports = {
+  devtool: 'inline-source-map',
+
+  entry: {
+    app: [
+      'webpack-hot-middleware/client?path=' + HMR_HOST,
+      './client/index.js',
+    ],
+  },
+
+  output: {
+    path: path.join(__dirname, 'public'),
+    filename: '[name].js',
+    publicPath: DEV_HOST,
+  },
+
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+  ],
+
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loaders: ['babel'],
+      },
+    ],
+  },
+};