formidablelabs / rapscallion Goto Github PK

View Code? Open in Web Editor NEW

1.4K 72.0 68.0 286 KB

Asynchronous React VirtualDOM renderer for SSR.

License: MIT License

JavaScript 98.95% Shell 1.05%

react server-side-rendering react-dom asynchronous stream html render

rapscallion's People

Contributors

Stargazers

Watchers

rapscallion's Issues

Implement data-fetching for server rendering

This is more of a question, but would it be possible to implement something like this into Rapscallion? https://github.com/rexhome7326/sync-will-mount

Tested it and it works, lets you await a promise in ComponentWillMount() before continuing render.
With React Router 4's new API data fetching is a little more cumbersome, so a lot of people are looking for simpler solutions to server side data fetching.

Cache TTL and/or invalidation

In many cases, we will want to control the growth of the component render cache. One option for cache-invalidation is to introduce a sibling prop to cacheKey: cacheTTL. When provided, this would invoke a function that clears the particular cache entry with setTimeout.

There may be other ways to go about this also... a FIFO array that tracks all cache entries might work for some use cases.

Null components should be rendered

Consider the empty component:

class Empty extends React.Component {
  render() {
    return null;
  }
}

Then rendering the component should result in placeholder in the form of HTML comment like so

> ReactDOMServer.renderToString(<Empty />)
'<!-- react-empty: 1 -->'

Instead Rapscallion just outputs an empty string. Client-side React will then complain about invalid checksum.

This should also work with undefined and false.

JSDoc internal documentation

Attributes with numeric value not rendered

<textarea rows="10" /> is OK but <textarea rows={10} /> where the attribute value is a number results in not being rendered.

throw new TypeError(`Unknown node of type: ${node.type}`);

Probably me doing something wrong, but I'm getting this error now;

/Users/user/project/node_modules/rapscallion/src/render/traverse.js:212

throw new TypeError(`Unknown node of type: ${node.type}`);TypeError: Unknown node of type: undefined

Style attribute is not parsed

Doing:

<div style={{ color: 'blue' }} />

Results in:

'<div style="[object Object]" />'

Tagged template literals --> Stream

When server-side rendering, most users will not want to send the exact output of a virtual-DOM render. For example, you might want to wrap it in <html> ... </html>, and you may want to inject your initial state into the DOM.

Often, developers will accomplish this by rendering to string, and then inserting that string into a template literal. Unfortunately, this pattern can become somewhat unwieldy since you're wanting to stream HTML data as it becomes available.

Fortunately, you can have the best of both worlds, via tagged template literals.

This library should export a helper function (nodeStreamTemplate) that transforms a template with embedded streams into one large stream.

Example:

import ssrAsync from "react-ssr-async";

// ...

app.get('/example', function(req, res){
  // ...

  const store = createStore(/* ... */);

  const componentHtml = ssrAsync.asNodeStream(<MyComponent store={store} />);
  const responseStream = ssrAsync.nodeStreamTemplate`
    <html>
    <body>
      ${componentHtml}
      <script>
        window._initialState = ${() => store.getState()};
      </script>
    </body>
    </html>
  `;

  responseStream.pipe(res);
});

babel-plugin-server: non-identifier expression as JSX element name

babel-plugin-server prerenders <undefined><undefined> given a non-identifier expression as JSX element name.

A minimum test case:

$ echo '<Foo.Bar />;' | ./node_modules/.bin/babel --plugins ./src/transform/server
({
  __prerendered__: "dom",
  segments: ["<undefined", 1, "></undefined>"]
});

Component caching

If a component specifies a cacheKey prop:

consume all string segments from its virtual DOM subtree,
stash the concatenated segments in a hash-map, keyed by the cacheKey,
emit the cached value on subsequent requests for the same cacheKey,
don't render cacheKey.

It might also be worth writing a Babel plugin that strips out cacheKey props, so that they won't be rendered to the DOM on the client.

Problem reading checksum, not a stream?

In the example, It is implied that with the following code, one should be able to set the react checksum.

const componentRenderer = render(<MyComponent store={store} />);

template`
  document.querySelector("#id-for-component-root").setAttribute("data-react-checksum", "${componentRenderer.checksum()}")
`.

For me, this leads to an error: Renderer#checksum can only be invoked for a renderer converted to node stream..

This seems to be an inconsistency with the readme. If I append toStream() to componentRenderer, I get another error:

Unknown value in template of type object: [object Object] at getSequenceEvent (/Users/…node_modules/rapscallion/lib/template.js:33:11).

If I get the checksum by doing componentRenderer.toStream().checksum() it ends up being empty "".

Is there something I'm doing wrong? or is this an issue with rapscallion or its documentation/

Handle `dangerouslySetInnerHTML` prop

Make sure that elements with dangerouslySetInnerHTML as a prop render the correct children.

Boolean attributes not rendered

<button disabled={true} /> or its shorthand <button disabled /> the disabled attribute seems to be ignored.

Differences in escaped/encoded text between React and Rapscallion

This test fails due to differences in encoding charcode 39 between React and Rapscallion.

describe("text encoding", () => {
  const Component = () => <div>{"<script type='' src=\"\"></script>"}</div>;
  checkParity(Component, {});
});

We can either pull in react-dom/lib/escapeTextContentForBrowser as a dep and use it directly, or duplicate/copy the changes necessary for parity.

https://github.com/facebook/react/blob/master/src/renderers/dom/shared/escapeTextContentForBrowser.js

Determine how to handle backpressure for streaming interface

Allow component cache to use alternative backend

Everything is in-memory for now. However, caching is done with simple keys. And once a cached component has been compressed, the values stored are simple strings. This being the case, there's no reason why Redis couldn't be used as a backend.

Several benefits come to mind:

TTLs for cache entries become simple to manage
you don't risk out-of-memory errors in your Node process for folks caching anything and everything
this scales across nodes
you could also prime your cache using known keys

stream chunk error

            <script dangerouslySetInnerHTML={{__html:[] }} type="text/javascript" />

This code (which is borderline invalid, but doesn't cause problems with renderToString), triggers the following:

     Uncaught TypeError: Invalid non-string/buffer chunk
      at chunkInvalid (_stream_readable.js:393:10)
      at readableAddChunk (_stream_readable.js:148:12)
      at Readable.push (_stream_readable.js:134:10)
      at pullBatch (node_modules/rapscallion/lib/consumers/common.js:30:14)
      at Readable.read [as _read] (node_modules/rapscallion/lib/consumers/node-stream.js:32:18)
      at Readable.read (_stream_readable.js:348:10)
      at resume_ (_stream_readable.js:737:12)
      at wrapped (node_modules/newrelic/lib/transaction/tracer/index.js:184:28)
      at _combinedTickCallback (internal/process/next_tick.js:74:11)
      at process._tickDomainCallback [as _tickCallback] (internal/process/next_tick.js:122:9)

renderToString just throws the array away and renders <script type="text/javascript"></script>

Pre-rendering Babel plugin

Add support for componentWillMount for stateful components

Adding a cacheKey attribute to a DOM element causes a React dev warning.

ReactDOM.render checks properties on DOM elements to make sure they are valid HTML attributes, and it throws a console warning in development mode if not. Since cacheKey is not a valid HTML attribute, rendering <div cacheKey="foo"/> results in this console warning:

Warning: Unknown prop `cacheKey` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I would suggest changing the name of the prop to data-cacheKey or data-cache-key. That will avoid the unknown prop warning.

Not able to insert JSON string properly in HTML element attribute

for ex:
var obj = {a:4};

react component

expected output

but Rapscallion returns
<input value="{"a":4}" id="input_1" />

which leads to the erroneous input value.
when I try to get input value, it returns "{".

Downgrade npm engines

  "engines": {
    "node": ">=6.0.0"
  },

should be downgraded now that we transpile on npm publishing for additional node support.

Use string concatenation in attr generation

<br/> is double rendered

Here's some photos showing the issue:
http://imgur.com/a/cwsjT

Last photo in the imgur list has javascript turned off.

Once I get the time I'll most likely submit a PR to help. :--)

Boolean attributes are not rendered

Consider this React component:

<video autoPlay />

The expected output when rendering is:

<video autoplay="" />

But Rapscallion actually returns

<video />

Note that the autoplay attribute is gone.

After quickly looking at the code, it seems like https://github.com/FormidableLabs/rapscallion/blob/master/src/render/attrs/index.js#L31 is responsible. If the value is true Object.keys(attrVal).length is indeed 0 but it is still a perfectly valid attribute. Checking if (attrVal === true) afterwards if then useless as it would have called continue previously, and the value is never inserted.

This is also illustrated by the failing test for attributes in the pull request #58 . If you look at the CI result here you will see many tests prop with no value failing for that reason.
I am not quite sure of the purpose of the Object.keys(attrVal).length check so I did not submit a pull request because I am unsure of the best way to fix it, but it should be an easy fix in any case.

Explore performance of native Promises in `toPromise` vs bluebird

Template example code has an XSS security issue.

The full example in the template section has the following line:

window._initialState = ${() => JSON.stringify(store.getState())};

Unfortunately, JSON.stringify can cause XSS attacks when read out in the middle of a <script> tag. As this article explains, a good solution is using the serialize-javascript module from npm.

Reliability

Howdy, is this library ready for prime time? Is it somehow battle tested?

I've project with about 500k unique visitors daily and 50-200 req/s all the time, so SSR performance and component level cache is crucial. Redis caching approach I came up with works but it's far from perfect. I know I won't have time to improve it soon enough, so I'm hoping for solution from open source scene.

Error thrown when using react-redux Provider

Error thrown:
"Uncaught Error: React.Children.only expected to receive a single React element child."
From debugging I could see the provider didn't get any children. Not sure why.

minimal reproduction code:

import React, { Component } from 'react';
import { render } from 'rapscallion/lib'
import { Provider } from 'react-redux';
class App extends Component {
    render() {
        return (
            <Provider>
                <div className="App" >
                hello joe
                </div>
            </Provider>
        );
    }
}
render(<App />).toPromise().then((html) => {
    console.log(html);
});

.babelrc

 {
    "presets": [
      "env"
    ],
    "plugins": [
      "rapscallion/babel-plugin-server"
    ]
  }

API Discussion: Why isn't template just a render function?

First off, congratulations on your launch! Nice job. 🚀🌈🔥
Also: thanks for having good docs!

It's great that you included static templates, but I'm a little confused about your choice to use template strings rather than just making another render function with plain old React elements. It seems to me that using template strings requires the developer to learn a second API (in addition to render), but that's not really required. If instead you made it a plain old function (called, say, `renderTemplate``), I think Rapscallion might have a more compact, learnable API.

To get a sense for what this would look like, the example in the template section would become:

import { render, renderTemplate } from "rapscallion";

// ...

app.get('/example', function(req, res){
  // ...

  const store = createStore(/* ... */);
  const componentRenderer = render(<MyComponent store={store} />);

  const responseRenderer = renderTemplate (
    <html>
    <body>
      {componentRenderer}
      <MyOtherComponent />
      <script>
        // Expose initial state to client store bootstrap code.
        window._initialState = {JSON.stringify(store.getState())};
        // Attach checksum to the component's root element.
        document.querySelector("#id-for-component-root").setAttribute("data-react-checksum", "{componentRenderer.checksum()}")
        // Bootstrap your application here...
      </script>
    </body>
    </html>
  );

  responseRenderer.toStream().pipe(res);
});

This also gets rid of the need to support callbacks in the templated strings, I think. Thoughts?

TypeError: frameIterator.patch is not a function

When using setCacheStrategy on a memcached-backed store that returns promises I'm getting the following error:

node_modules/rapscallion/lib/sequence/sequence.js:49
      delegate();
      ^
TypeError: frameIterator.patch is not a function

config:

setCacheStrategy({
  get: (key) => cacheStore.get(key),
  set: (key, val) => cacheStore.set(key, val)
});

Adapter source is here but it is relatively simple (get/set returns promises and gets are batched).

babel-plugin-server: spread attributes

babel-plugin-server throws an error on spread attributes.

A minimum test case:

$ echo '<Foo {...props} />;' | ./node_modules/.bin/babel --plugins ./src/transform/server
TypeError: unknown: Cannot read property 'name' of undefined
    at objExpr.properties.forEach.property (/Users/shuhei/work/js/rapscallion/src/transform/server.js:198:21)
    at Array.forEach (native)
    at objectExpressionToObject (/Users/shuhei/work/js/rapscallion/src/transform/server.js:197:22)
    at PluginPass.exit (/Users/shuhei/work/js/rapscallion/src/transform/server.js:27:21)
    at newFn (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/path/context.js:117:8)
    at TraversalContext.visitQueue (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/context.js:108:19)

Possibility to return undefined from template expression

I'm using rapscallion and am using helmet to render a title and meta description (see here):

        <div id="app">${appRenderer}</div>
          // ...
          // Set title and meta description
          ${() => {
            helmet = Helmet.renderStatic()
            return ''
          }}
          appendToHead('${() => helmet.title.toString()}')
          appendToHead('${() => helmet.meta.toString()}')

Now helmet needs to be instantiated after rendering the app, but since rapscallion throws an error when returning undefined from an expression* I'm just returning an empty string. This isn't really a big deal and the current solution works fine.

But, I thought it might be nice to allow expressions that evaluate to undefined, which would then just insert nothing. No idea if that's possible or even desirable, but it would allow me to omit the return ''.

*: throw new Error("Unknown value in template of type " + (typeof segment === "undefined" ? "undefined" : _typeof(segment)) + ": " + segment);

Document how to handle CSS, CSS-in-JS SSR

babel-plugin-server: prop without value

babel-plugin-server throws an error on a prop without value.

A minimum test case:

$ echo '<Foo isFoo />;' | ./node_modules/.bin/babel --plugins ./src/transform/server
TypeError: unknown: Property value of ObjectProperty expected node to be of a type ["Expression"] but instead got null
    at Object.validate (/Users/shuhei/work/js/rapscallion/node_modules/babel-types/lib/definitions/index.js:109:13)
    at validate (/Users/shuhei/work/js/rapscallion/node_modules/babel-types/lib/index.js:505:9)
    at Object.builder (/Users/shuhei/work/js/rapscallion/node_modules/babel-types/lib/index.js:466:7)
    at attributes.map.attr (/Users/shuhei/work/js/rapscallion/src/transform/server.js:97:14)
    at Array.map (native)
    at getComponentProps (/Users/shuhei/work/js/rapscallion/src/transform/server.js:91:14)
    at prerenderComponent (/Users/shuhei/work/js/rapscallion/src/transform/server.js:67:31)
    at PluginPass.enter (/Users/shuhei/work/js/rapscallion/src/transform/server.js:21:13)
    at newFn (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/shuhei/work/js/rapscallion/node_modules/babel-traverse/lib/path/context.js:76:18)

Yarn ./src directory

I have installed this library with yarn add rapscallion

Then when I try to use it I get

[0]     ERROR in ./~/rapscallion/index.js
[0]     Module not found: Error: Can't resolve './src' in '/srv/eat/node_modules/rapscallion'
[0]      @ ./~/rapscallion/index.js 5:19-35
[0]      @ ./src/middleware.tsx
[0]      @ multi ./src/middleware
[0] webpack: bundle is now VALID.

Because of thess lines
My webpack config get mad about the fact that yarn does not bring the src directory and fails because cannot find it. How can I deal with these? removing the try/catch block solves the issue module.exports = require("./lib");

README

Issue with <select> tags - <select value=""> is not moved to <option selected>

With ReactDOM, this:

let locales = Object.keys(locales).map((key) =>
      <option key={"locale-" + key} value={ key }>{ locales[key].name }</option>
);

<select className="unstyled" value={ this.props.locale} onChange={this._changeLocale}>
     { locales }
</select>

gets rendered into

<select class="unstyled" data-reactid="106">
<option value="de" data-reactid="107">Deutsch</option>
<option value="ru" data-reactid="108">Русский</option>
<option value="sv" data-reactid="109">Svenska</option>
<option selected="" value="en" data-reactid="110">English</option>
<option value="it" data-reactid="111">Italiano</option>
<option value="fr" data-reactid="112">Français</option>
<option value="es" data-reactid="113">Español</option>
<option value="uk" data-reactid="114">Українськa</option>
<option value="ro" data-reactid="115">Român</option>
<option value="nl" data-reactid="116">Nederlandse</option>
</select>

while with rapscallion the value is not moved to options:

<select class="unstyled" value="en" data-reactid="106">
<option value="de" data-reactid="107">Deutsch</option>
<option value="ru" data-reactid="108">Русский</option>
<option value="sv" data-reactid="109">Svenska</option>
<option value="en" data-reactid="110">English</option>
<option value="it" data-reactid="111">Italiano</option>
<option value="fr" data-reactid="112">Français</option>
<option value="es" data-reactid="113">Español</option>
<option value="uk" data-reactid="114">Українськa</option>
<option value="ro" data-reactid="115">Român</option>
<option value="nl" data-reactid="116">Nederlandse</option>
</select>

The React docs say we should use value on select.

This triggers the dreaded warning:

warning.js:36 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ct class="unstyled" data-reactid="82"><o
 (server) ct class="unstyled" value="en" data-reac

Add parity test suite for ReactDOMServer

It's important that rapscallion produce output consistent with ReactDOMServer.renderToString. We should add a suite of tests that renders a number of different types of components and layouts and verify that the output matches.

Getting Error: not implemented

Great library! I'm trying to use this with Express, but can't seem to get it to work.
I'm getting this error;

Error: not implemented
    at Readable._read (_stream_readable.js:470:22)
    at Readable.read (_stream_readable.js:348:10)
    at resume_ (_stream_readable.js:737:12)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

This is my render function;

const renderApp = (req, res) => {
    const context = {};

    const application = renderToStream(
        <StaticRouter location={req.url} context={context}>
            <App />
        </StaticRouter>
    );

    const html = streamTemplate`<!doctype html><html>
      <head>
        <title>Test</title>
      </head>
      <body>
        <div id="root">${application}</div>
        ${process.env.NODE_ENV === 'production' ? '<script type="text/javascript" src="/assets/vendor.js"></script>' : ''}
        <script src="/assets/app.js"></script>
      </body>
    </html>`

    if (context.url) {
        res.writeHead(302, { Location: context.url });
        res.end();
    } else {
        toNodeStream(html).pipe(res)
    }

};

Any idea as to what's going wrong here?

renderToString prints out class-name="" instead of class=""

Consider non-global cache strategies

Capturing an out-of-band conversation with @ryan-roemer:

Using a global singleton for the cache strategy is potentially undesirable. Or, inversely, it might be desirable to use different caching solutions for different components / pages in the context of a single Node.js process.

If the traversal functions in src/render/traverse.js were made to be class methods of a new Traverser class, a cacher object with methods get and set could be attached to the instance to simplify access to the custom cacher.

This could be provided as a replacement to setCacheStrategy or as a complement. If a complement, setCacheStrategy would set the global cache strategy. This value would be overrideable by passing a Cacher to the Renderer constructor.

This is probably a better design, but also a nice-to-have, since a global caching strategy is probably adequate for the vast majority of use cases.

Implement benchmarking suite using benchmark.js

Opening so I can track this, hoping to do soon

"Number nodes" should be rendered as text nodes

SFCs are not rendered correctly when untranspiled

Identified here: #17 (comment)

"TypeError: Cannot read property 'createHref' of undefined" if used with React Router

If used with React Router I'm getting

TypeError: Cannot read property 'createHref' of undefined

App.js:

import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import Home from './Home'

export default class App extends Component {
	render() {
		return (
			<div>
				<Route path="/" component={Home} />
			</div>
		)
	}
}

Home.js:

import React, {Component} from 'react'

export default class Home extends Component {
	constructor(props) {
		super(props)
	}
	render() {
		return (
			<div className="home">Test</div>
		)
	}
}

Server:

require('babel-register');
require('babel-polyfill');
import express from "express";
import path from "path";
import App from './App';
import React from 'react';
import { renderToStream, toNodeStream, streamTemplate } from "rapscallion";
import { StaticRouter } from 'react-router-dom';

const app = express();

app.use("/", (req, res) => {

    const context = {};

    const application = renderToStream(
        <StaticRouter location={req.url} context={context}>
            <App />
        </StaticRouter>
    );

    const html = streamTemplate`<!doctype html><html>
      <head>
        <title>Test</title>
      </head>
      <body>
        <div id="root">${application}</div>
      </body>
    </html>`

    if (context.url) {
        res.writeHead(302, { Location: context.url });
        res.end();
    } else {
        toNodeStream(html).pipe(res)
    }

});

app.listen(3000, () => {
    console.log("App listening on port 3000");
});

No root checksum

React internally provides a checksum here:

https://github.com/facebook/react/blob/e3131c1d55d6695c2f0966379535f88b813f912b/src/renderers/dom/stack/server/ReactMarkupChecksum.js

The client then checks this to see if it matches, and if it doesn't, it renders over it. Because we aren't providing a checksum at all, the client will always blow away what was server rendered with a fresh render, unnecessarily.

TypeError: (0 , _rapscallion.render) is not a function

Tried the new API and I'm getting TypeError: (0 , _rapscallion.render) is not a function from;

render(<App />).toPromise().then(application => {
   console.log(application)
})

Component context

Consider automatically pushing out a script tag that sets the checksum

I sent this in a tweet to @divmain but thought it was worth expanding on here.

The first version of react-dom-stream took the same checksum strategy you are using here in Rapscallion: have the checksum be an extra attribute on the stream which the API client can then read out into a script tag, and that script tag in turn sets the checksum on the react root. This strategy works, but it caused a lot of confusion with users; if my experience is any indication, you may end up spending a lot of time explaining and supporting this quirk in github issues/gitter.

I wanted to just render out the script tag that was needed at the end of the stream, but React complains when it renders into an element where there are siblings that weren't made by React. I realized later, though, that you could read out such a script tag at the end of the stream and have it set the checksum and then delete itself from the DOM before React client rendering happens. I tested this in all my supported browsers, and it worked. Its implementation is here, and you should feel free to use any part of it that is helpful in Rapscallion.

Cheers!

formidablelabs / rapscallion Goto Github PK

rapscallion's People

Contributors

Stargazers

Watchers

Forkers

rapscallion's Issues

Recommend Projects

Recommend Topics

Recommend Org