diff --git a/CHANGELOG.md b/CHANGELOG.md index dd26266..29ac450 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # React Resolver Changelog +### v3.0.0 - (2016-03-01) + +- Require React, React-DOM v0.14 + + + ### v2.0.5 - (2015-09-07) - Fix React Router v0.13.3 `HistoryLocation` bug diff --git a/README.md b/README.md index d87b2df..522020f 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,12 @@ install [ES6 Promise](https://github.com/jakearchibald/es6-promise)._ $ npm install --save react-resolver ``` +_For React v0.13 support, install [v2.x.x](https://github.com/ericclemmons/react-resolver/tree/v2.0.5)._ + +```shell +$ npm install --save react-resolver@2 +``` + ## Documentation @@ -53,8 +59,6 @@ Complete documentation can be found here: - [Introduction](/docs/introduction) - [Getting Started](/docs/getting-started) -- [API Reference](/docs/api) -- [Troubleshooting](/docs/Troubleshooting.md) - - - diff --git a/examples/react-v0.13/README.md b/examples/react-v0.13/README.md deleted file mode 100644 index 468aa13..0000000 --- a/examples/react-v0.13/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# React Resolver - React v0.13 Example - - -### Technologies - -- `express` (v4.13.3) -- `react` (v0.13.3) -- `react-router` (v0.13.3) - - -### Usage - -Development: - -```shell -$ npm start -``` - -Production: - -```shell -$ NODE_ENV=production npm start -``` diff --git a/examples/react-v0.13/package.json b/examples/react-v0.13/package.json deleted file mode 100644 index c7cbf1c..0000000 --- a/examples/react-v0.13/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "private": true, - "scripts": { - "build": "webpack", - "clean": "rm -rf dist", - "preinstall": "rm -rf ./node_modules/react-resolver", - "postinstall": "cp -r ../../src node_modules/react-resolver", - "start": "npm install; if [[ ${NODE_ENV} == \"production\" ]]; then npm run start:prod; else npm run start:dev; fi", - "start:dev": "npm run clean && node watch", - "start:prod": "npm run clean && npm run build && node src/server" - }, - "dependencies": { - "axios": "0.5.4", - "babel-core": "5.8.21", - "babel-loader": "5.3.2", - "es6-promise": "2.3.0", - "express": "4.13.3", - "react": "0.13.3", - "react-router": "0.13.3", - "webpack": "1.11.0" - }, - "devDependencies": { - "piping": "0.2.0", - "react-router-server-location": "1.0.2", - "webpack-dev-server": "1.10.1" - } -} diff --git a/examples/react-v0.13/public/favicon.ico b/examples/react-v0.13/public/favicon.ico deleted file mode 100644 index 85a4d9f..0000000 Binary files a/examples/react-v0.13/public/favicon.ico and /dev/null differ diff --git a/examples/react-v0.13/src/app.js b/examples/react-v0.13/src/app.js deleted file mode 100644 index 2564b8a..0000000 --- a/examples/react-v0.13/src/app.js +++ /dev/null @@ -1,56 +0,0 @@ -import express from "express"; -import path from "path"; -import React from "react"; -import { Resolver } from "react-resolver"; -import Router from "react-router"; -import ServerLocation from "react-router-server-location"; - -import routes from "./routes"; - -export default express() - // Serve minified assets - .use(express.static(path.join(__dirname, "../dist"))) - .use(express.static(path.join(__dirname, "../public"))) - - // Let React handle all routes - .get("*", function(req, res) { - const location = new ServerLocation(req, res); - - Router.create({ location, routes }).run(function(Handler, state) { - // Redirect any unknown to home - if (!state.routes.length) { - return res.redirect("/"); - } - - const notFound = state.routes.filter(({ name }) => name === "404").length; - - Resolver - .resolve(() => ) - .then(({ Resolved, data }) => { - res - .status(notFound ? 404 : 200) - .send(` - - - - - Stargazers Demo – React Resolver - - - -
${React.renderToString()}
- - - - - - `) - ; - }) - .catch((error) => { - res.status(500).send(error); - }) - ; - }); - }) -; diff --git a/examples/react-v0.13/src/client.js b/examples/react-v0.13/src/client.js deleted file mode 100644 index db59d16..0000000 --- a/examples/react-v0.13/src/client.js +++ /dev/null @@ -1,12 +0,0 @@ -import ES6Promise from "es6-promise"; -import React from "react"; -import { Resolver } from "react-resolver"; -import Router from "react-router"; - -import routes from "./routes"; - -ES6Promise.polyfill(); - -Router.run(routes, Router.HistoryLocation, (Root) => { - Resolver.render(() => , document.getElementById("app")); -}); diff --git a/examples/react-v0.13/src/components/App.js b/examples/react-v0.13/src/components/App.js deleted file mode 100644 index 2db8ac8..0000000 --- a/examples/react-v0.13/src/components/App.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; - -import Header from "../components/Header"; -import Footer from "../components/Footer"; -import { RouteHandler } from "react-router"; - -export default class App extends React.Component { - static displayName = "App" - - render() { - return ( -
-
- -
- -
- -
-
- ); - } -} diff --git a/examples/react-v0.13/src/components/Footer.js b/examples/react-v0.13/src/components/Footer.js deleted file mode 100644 index cf01e69..0000000 --- a/examples/react-v0.13/src/components/Footer.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -export default class Footer extends React.Component { - static displayName = "Footer" - - render() { - return ( -
-
- © 2015 Eric Clemmons -
-
- ); - } -} diff --git a/examples/react-v0.13/src/components/Header.js b/examples/react-v0.13/src/components/Header.js deleted file mode 100644 index f580373..0000000 --- a/examples/react-v0.13/src/components/Header.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -import Nav from "./Nav"; - -export default class Header extends React.Component { - static displayName = "Header" - - render() { - return ( -
-
- ); - } -} diff --git a/examples/react-v0.13/src/components/Home.js b/examples/react-v0.13/src/components/Home.js deleted file mode 100644 index 3d38fbe..0000000 --- a/examples/react-v0.13/src/components/Home.js +++ /dev/null @@ -1,105 +0,0 @@ -import React from "react"; - -import { context, resolve } from "react-resolver"; - -@context("router") -@resolve("submit", function({ router }) { - return (action) => router.transitionTo(action); -}) -export default class Home extends React.Component { - static displayName = "Home" - - constructor(props) { - super(props); - - this.state = { - action: props.router.makeHref("query.repo"), - user: "ericclemmons", - repo: "react-resolver", - }; - } - - componentDidMount() { - this.setState(this.computeState()); - } - - computeState(state) { - const nextState = { - ...this.state, - ...state, - }; - - const { user, repo } = nextState; - const { router } = this.props; - - nextState.action = router.makeHref("repo", { user, repo }); - - return nextState; - } - - handleChange(event) { - const { name, value } = event.target; - - this.setState(this.computeState({ [name]: value })); - } - - handleSubmit(event) { - const { submit } = this.props; - const { action } = this.state; - - submit(action); - - event.preventDefault(); - } - - render() { - const { action, user, repo } = this.state; - - return ( -
-
-
- - View a Project's Stargazers - -
-
-
-
-
-
- - -
- -
- - -
-
- -
-
- -
-
-
-
-
-
-
- ); - } -} diff --git a/examples/react-v0.13/src/components/Nav.js b/examples/react-v0.13/src/components/Nav.js deleted file mode 100644 index 8fa446a..0000000 --- a/examples/react-v0.13/src/components/Nav.js +++ /dev/null @@ -1,18 +0,0 @@ -import { Link } from "react-router"; -import React from "react"; - -export default class Nav extends React.Component { - static displayName = "Nav" - - render() { - return ( - - ); - } -} diff --git a/examples/react-v0.13/src/components/NotFound.js b/examples/react-v0.13/src/components/NotFound.js deleted file mode 100644 index 70bed09..0000000 --- a/examples/react-v0.13/src/components/NotFound.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; - -export default class NotFound extends React.Component { - static displayName = "NotFound" - - render() { - const { splat } = this.props.params; - - return ( -
-
-
- - 404 - - -

- Unfortunately, this URL does not exist. -

- -
- 
{splat}
-
-
-
-
- ); - } -} diff --git a/examples/react-v0.13/src/components/Stargazer.js b/examples/react-v0.13/src/components/Stargazer.js deleted file mode 100644 index 761a406..0000000 --- a/examples/react-v0.13/src/components/Stargazer.js +++ /dev/null @@ -1,56 +0,0 @@ -import axios from "axios"; -import { Link } from "react-router"; -import React from "react"; - -import { resolve } from "react-resolver"; - -@resolve("stargazer", function({ params }) { - const { user } = params; - const url = `https://api.github.com/users/${user}`; - - return axios.get(url).then(({ data }) => data); -}) -export default class Stargazer extends React.Component { - static displayName = "Stargazer" - - render() { - const { stargazer } = this.props; - - return ( -
-
-
- - {stargazer.login} - - -
    -
  • - - - {stargazer.name} - -

    - {stargazer.company} -
    - {stargazer.location} -

    -
    • -
-
- -
- - - Back - - - - View on Github - -
-
-
- ); - } -} diff --git a/examples/react-v0.13/src/routes.js b/examples/react-v0.13/src/routes.js deleted file mode 100644 index 39d654a..0000000 --- a/examples/react-v0.13/src/routes.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import { NotFoundRoute, Route } from "react-router"; - -import App from "./components/App"; -import Home from "./components/Home"; -import NotFound from "./components/NotFound"; -import Stargazer from "./components/Stargazer"; -import Stargazers from "./components/Stargazers"; - -export default ( - - // Query-able URLs (for POSTs & crawlers) - - - // Canonical URLs - - - - - - -); diff --git a/examples/react-v0.13/src/server.js b/examples/react-v0.13/src/server.js deleted file mode 100644 index de9a2f4..0000000 --- a/examples/react-v0.13/src/server.js +++ /dev/null @@ -1,7 +0,0 @@ -require("babel-core/register")({ only: /src|react-resolver/ }); - -var app = require("./app"); - -app.listen(3000, function() { - console.info("✅ Node server started at http://localhost:3000/"); -}); diff --git a/examples/react-v0.13/watch.js b/examples/react-v0.13/watch.js deleted file mode 100644 index ab3ae08..0000000 --- a/examples/react-v0.13/watch.js +++ /dev/null @@ -1,46 +0,0 @@ -var config = require("./webpack.config"); -var piping = require("piping")({ hook: true }); -var webpack = require("webpack"); -var WebpackDevServer = require("webpack-dev-server"); - -config.debug = true; -config.devtool = "#eval-source-map"; - -config.entry.client.unshift( - "webpack-dev-server/client?http://localhost:8080", - "webpack/hot/only-dev-server" -); - -config.plugins.unshift( - // Wrap builds with HMR - new webpack.HotModuleReplacementPlugin(), - - // Prevent errors from causing a reload - new webpack.NoErrorsPlugin() -); - -if (piping) { - require("./src/server"); -} else { - new WebpackDevServer(webpack(config), { - contentBase: "/", - publicPath: "http://localhost:8080/", - headers: { "Access-Control-Allow-Origin": "*" }, - historyApiFallback: true, - host: "0.0.0.0", - hot: true, - inline: true, - lazy: false, - noInfo: false, - proxy: { "*": "http://localhost:3000/" }, - quiet: true, - stats: { colors: true }, - }).listen(8080, "localhost", function(error, result) { - if (error) { - console.error(error); - throw error; - } - - console.info("✅ WebpackDevServer started at http://localhost:8080/"); - }); -} diff --git a/examples/react-v0.13/webpack.config.js b/examples/react-v0.13/webpack.config.js deleted file mode 100644 index ba3883e..0000000 --- a/examples/react-v0.13/webpack.config.js +++ /dev/null @@ -1,36 +0,0 @@ -var path = require("path"); - -module.exports = { - entry: { - client: [ - path.join(__dirname, "src/client.js"), - ], - }, - - module: { - loaders: [ - { - test: /\.js$/, - include: [ - path.join(__dirname, "src"), - path.join(__dirname, "node_modules/react-resolver"), - ], - loaders: ["babel"], - }, - ], - }, - - output: { - chunkFilename: "[name].min.js", - devtoolModuleFilenameTemplate: "[absolute-resource-path]", - filename: "[name].min.js", - hotUpdateChunkFilename: "update/[hash]/[id].update.js", - hotUpdateMainFilename: "update/[hash]/update.json", - path: path.join(__dirname, "dist"), - publicPath: "http://localhost:8080/", - }, - - plugins: [], - - target: "web", -}; diff --git a/package.json b/package.json index ad60a83..0bfb3ad 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,25 @@ { "name": "react-resolver", - "version": "2.0.5", + "version": "3.0.1", "description": "Async-rendering & data-fetching for universal React applications", "main": "dist/index.js", "directories": { "test": "test" }, + "peerDependencies": { + "react": "^0.14.6 || ^15.0.0-0", + "react-dom": "^0.14.6 || ^15.0.0-0" + }, "devDependencies": { - "babel": "5.8.21", + "babel": "5.8.34", "eslint-config-future": "^2.1.1", - "gitbook-cli": "0.3.4", + "gitbook-cli": "1.0.1", "gitbook-plugin-include": "0.1.0", "gitbook-plugin-include-highlight": "0.1.0", - "gitbook-plugin-todo": "0.1.0", - "mocha": "2.2.5", - "react": "0.13.3" + "gitbook-plugin-todo": "0.1.2", + "mocha": "2.3.4", + "react": "^15.0.0", + "react-dom": "^15.0.0" }, "scripts": { "build": "npm run clean && npm run build:docs && npm run build:lib", @@ -28,7 +33,7 @@ "lint": "eslint src test", "prepublish": "npm run build:lib", "preversion": "npm run clean", - "postversion": "git push origin master --tags && npm run docs:publisher", + "postversion": "git push origin master --tags && npm run docs:publish", "test": "mocha", "version": "npm run build" }, diff --git a/src/Resolver.js b/src/Resolver.js index 7f21d1f..444582d 100644 --- a/src/Resolver.js +++ b/src/Resolver.js @@ -1,6 +1,8 @@ /* eslint-disable no-underscore-dangle */ import React from "react"; +import ReactDOM from "react-dom"; +import {renderToStaticMarkup} from "react-dom/server"; const ID = "ReactResolver.ID"; const CHILDREN = "ReactResolver.CHILDREN"; @@ -33,8 +35,7 @@ export default class Resolver extends React.Component { } static render = function(render, node, data = window[PAYLOAD]) { - // @TODO - Use react-dom.render - React.render(( + ReactDOM.render(( {render} @@ -46,8 +47,7 @@ export default class Resolver extends React.Component { static resolve = function(render, initialData = {}) { const queue = []; - // @TODO - Use react-dom/server.renderToStaticMarkup - React.renderToStaticMarkup( + renderToStaticMarkup( queue.push(promise)}> {render} diff --git a/test/resolve.test.js b/test/resolve.test.js index 509ef75..40b4149 100644 --- a/test/resolve.test.js +++ b/test/resolve.test.js @@ -1,5 +1,6 @@ import assert from "assert"; import React from "react"; +import { renderToStaticMarkup } from "react-dom/server"; import { resolve, Resolver } from ".."; @@ -32,8 +33,8 @@ describe("@resolve", function() { it("is synchronous", function() { assert.equal( - React.renderToStaticMarkup(), - "
\nscalar
" + renderToStaticMarkup(), + "
scalar
" ); }); }); @@ -45,8 +46,8 @@ describe("@resolve", function() { it("is asynchronous", function() { assert.equal( - React.renderToStaticMarkup(), - "" + renderToStaticMarkup(), + "" ); }); }); @@ -62,8 +63,8 @@ describe("@resolve", function() { it("is asynchronous", function() { assert.equal( - React.renderToStaticMarkup(), - "" + renderToStaticMarkup(), + "" ); }); });