├── .babelrc ├── .eslintrc ├── .gitignore ├── .maintainerd ├── COC.md ├── CONTRIBUTE.md ├── LICENSE ├── README.md ├── babel-plugin-client.js ├── babel-plugin-server.js ├── benchmark ├── _util.js ├── benchmark.js ├── concurrency.js ├── prerendered-component │ ├── .babelrc │ └── index.js ├── test-html-output-with-context.js ├── test-html-output.js └── test-templated-output.js ├── circle.yml ├── deploy.sh ├── index.js ├── package-lock.json ├── package.json ├── spec ├── _util.js ├── adler32.js ├── attributes.js ├── cache.js ├── children.js ├── context │ ├── helper-classes.js │ └── index.js ├── deep-hierarchies.js ├── elements.js ├── escape-html.js ├── exec.js ├── lifecycle-methods.js ├── render-attrs.js ├── render-error.js ├── set-state.js ├── special-cases.js ├── styles.js └── template.js └── src ├── adler32.js ├── consumers ├── common.js ├── node-stream.js └── promise.js ├── index.js ├── render ├── attrs.js ├── context.js ├── escape-html.js ├── index.js ├── state.js ├── traverse.js └── util.js ├── renderer.js ├── sequence ├── cache │ ├── frame-cache.js │ ├── index.js │ └── strategies │ │ ├── async.js │ │ └── default.js ├── common.js ├── compress.js ├── index.js └── sequence.js ├── symbols.js ├── template.js └── transform ├── client.js └── server.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-react-jsx" 4 | ], 5 | "presets": [ 6 | ["env", { 7 | "targets": { 8 | "node": 4 9 | } 10 | }] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | --- 2 | extends: 3 | - formidable/configurations/es6-react-test 4 | 5 | globals: 6 | sinon: true 7 | expect: true 8 | global: true 9 | 10 | rules: 11 | arrow-parens: off 12 | 13 | func-style: 14 | - error 15 | - declaration 16 | - allowArrowFunctions: true 17 | 18 | space-before-function-paren: 19 | - error 20 | - always 21 | 22 | no-return-assign: off 23 | 24 | no-use-before-define: off 25 | 26 | no-sequences: off 27 | 28 | react/prop-types: off 29 | 30 | react/no-multi-comp: off 31 | 32 | no-unused-expressions: off 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /yarn.lock 3 | /npm-debug.log 4 | /lib/ 5 | -------------------------------------------------------------------------------- /.maintainerd: -------------------------------------------------------------------------------- 1 | log: true 2 | pullRequest: 3 | preamble: > 4 | The maintainers of this repo require that all pull request submitters adhere to the following: 5 | items: 6 | - prompt: > 7 | I have read and will comply with the 8 | [contribution guidelines](https://github.com/FormidableLabs/rapscallion/blob/master/CONTRIBUTE.md). 9 | default: false 10 | required: true 11 | - prompt: > 12 | I have read and will comply with the 13 | [code of conduct](https://github.com/FormidableLabs/rapscallion/blob/master/CONTRIBUTE.md). 14 | default: false 15 | required: true 16 | - prompt: All related documentation has been updated to reflect the changes made. 17 | default: false 18 | required: true 19 | - prompt: My commit messages are cleaned up and ready to merge. 20 | default: false 21 | required: true 22 | semver: 23 | enabled: true 24 | commit: 25 | subject: 26 | mustHaveLengthBetween: [8, 100] 27 | mustMatch: !!js/regexp /^(Fix|Enhancement|Feature|Docs|Internal|Other):\s.*/ 28 | mustNotMatch: !!js/regexp /^fixup!/ 29 | message: 30 | enforceEmptySecondLine: false 31 | linesMustHaveLengthBetween: [0, 100] 32 | issue: 33 | onLabelAdded: 34 | not-enough-information: 35 | action: comment 36 | data: | 37 | This issue has been tagged with the `not-enough-information` label. In order for us to help you, 38 | please respond with the following information: 39 | 40 | - A description of the problem, including any relevant error output that can find. 41 | - A full repro, if possible. Otherwise, steps to reproduce. 42 | - The versions of the packages that you are using. 43 | - The operating system that you are using. 44 | - The browser or environment where the issue occurs. 45 | 46 | If we receive no response to this issue within 2 weeks, the issue will be closed. If that happens, 47 | feel free to re-open with the requested information. Thank you! 48 | -------------------------------------------------------------------------------- /COC.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Aggresive and/or demanding language 32 | * Other conduct which could reasonably be considered inappropriate in a 33 | professional setting 34 | 35 | ## Our Responsibilities 36 | 37 | Project maintainers are responsible for clarifying the standards of acceptable 38 | behavior and are expected to take appropriate and fair corrective action in 39 | response to any instances of unacceptable behavior. 40 | 41 | Project maintainers have the right and responsibility to remove, edit, or 42 | reject comments, commits, code, wiki edits, issues, and other contributions 43 | that are not aligned to this Code of Conduct, or to ban temporarily or 44 | permanently any contributor for other behaviors that they deem inappropriate, 45 | threatening, offensive, or harmful. 46 | 47 | ## Scope 48 | 49 | This Code of Conduct applies both within project spaces and in public spaces 50 | when an individual is representing the project or its community. Examples of 51 | representing a project or community include using an official project e-mail 52 | address, posting via an official social media account, or acting as an appointed 53 | representative at an online or offline event. Representation of a project may be 54 | further defined and clarified by project maintainers. 55 | 56 | ## Enforcement 57 | 58 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 59 | reported by contacting the author at . All 60 | complaints will be reviewed and investigated and will result in a response that 61 | is deemed necessary and appropriate to the circumstances. The maintainers are 62 | obligated to protect confidentiality with regard to the reporter of an incident. 63 | Further details of specific enforcement policies may be posted separately. 64 | 65 | Project maintainers who do not follow or enforce the Code of Conduct in good 66 | faith may face temporary or permanent repercussions as determined by other 67 | members of the project's leadership. 68 | 69 | ## Attribution 70 | 71 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 72 | available at [http://contributor-covenant.org/version/1/4][version] 73 | 74 | [homepage]: http://contributor-covenant.org 75 | [version]: http://contributor-covenant.org/version/1/4/ 76 | -------------------------------------------------------------------------------- /CONTRIBUTE.md: -------------------------------------------------------------------------------- 1 | # Contribute 2 | 3 | If you're interested in adding features, reporting/fixing bugs, or just discussing the future of rapscallion, this is the place to start. Please feel free to reach out if you have questions or comments by opening an [issue](https://github.com/FormidableLabs/rapscallion/issues). 4 | 5 | 6 | ## Adding new features 7 | 8 | If there's a feature you'd like to see that isn't already in-progress or documented, there are two ways you can go about it: 9 | 10 | - open an issue for discussion; or 11 | - fork and submit a PR. 12 | 13 | Either way is fine, so long as you remember your PR may not be accepted as-is or at all. If a feature request is reasonable, though, it'll most likely be included one way or another. 14 | 15 | Some other things to remember: 16 | 17 | - Please respect the project layout and hierarchy, to keep things organized. 18 | - All code is linted. Outside of that, please try to conform to the code style and idioms that are used throughout the project. 19 | - Include descriptions for issues and PRs. 20 | - Please comply with the project's [code of conduct](./COC.md). 21 | 22 | I'm busy and travel sometimes for work - so if I don't respond immediately, please be patient. I promise to reply! 23 | 24 | ## Commit message structure 25 | 26 | Please follow the following commit message structure when submitting your pull request: 27 | 28 | TYPE: Short commit message 29 | 30 | Detailed 31 | commit 32 | info 33 | 34 | For the value of **`TYPE`**, please use one of **`Feature`**, **`Enhancement`**, or **`Fix`**. 35 | 36 | This is required in order to help us automate tasks such as changelog generation. 37 | 38 | 39 | # Bugs 40 | 41 | If you encounter a bug, please check for an open issue that already captures the problem you've run into. If it doesn't exist yet, create it! 42 | 43 | Please include as much information as possible, including: 44 | 45 | - A full repro, if possible. 46 | - The versions of the packages that you're using. 47 | - The browser or environment where the issue occurs. 48 | - Any error messages or debug output that seems relevant. 49 | 50 | If you're interested in tackling a bug, please say so. 51 | 52 | 53 | # Documentation 54 | 55 | If you make changes, please remember to update the documentation to reflect the new behavior. 56 | 57 | # Publishing 58 | 59 | All changes are published automatically whenever a pull request is merged. As part of the PR process, you will be asked to provide the information necessary to make that happen. 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Dale Bustad 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rapscallion 2 | 3 | [![CircleCI](https://circleci.com/gh/FormidableLabs/rapscallion.svg?style=svg)](https://circleci.com/gh/FormidableLabs/rapscallion) [![Join the chat at https://gitter.im/FormidableLabs/rapscallion](https://badges.gitter.im/FormidableLabs/rapscallion.svg)](https://gitter.im/FormidableLabs/rapscallion?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | ## Overview 6 | 7 | Rapscallion is a React VirtualDOM renderer for the server. Its notable features are as follows: 8 | 9 | - Rendering is **asynchronous and non-blocking**. 10 | - Rapscallion is roughly **30% faster** than `renderToString`. 11 | - It provides a streaming interface so that you can **start sending content to the client immediately**. 12 | - It provides a templating feature, so that you can **wrap your component's HTML in boilerplate** without giving up benefits of streaming. 13 | - It provides a **component caching** API to further speed-up your rendering. 14 | 15 | 16 | ## Table of Contents 17 | 18 | 19 | 20 | 21 | 22 | - [Installation](#installation) 23 | - [API](#api) 24 | - [`render`](#render) 25 | - [`Renderer#toPromise`](#renderertopromise) 26 | - [`Renderer#toStream`](#renderertostream) 27 | - [`Renderer#includeDataReactAttrs`](#rendererincludedatareactattrs) 28 | - [`Renderer#tuneAsynchronicity`](#renderertuneasynchronicity) 29 | - [`Renderer#checksum`](#rendererchecksum) 30 | - [`setCacheStrategy`](#setcachestrategy) 31 | - [`template`](#template) 32 | - [Valid expressions](#valid-expressions) 33 | - [Behavior](#behavior) 34 | - [Example](#example) 35 | - [Caching](#caching) 36 | - [Babel Plugins](#babel-plugins) 37 | - [`babel-plugin-client`](#babel-plugin-client) 38 | - [`babel-plugin-server`](#babel-plugin-server) 39 | - [Benchmarks](#benchmarks) 40 | - [License](#license) 41 | 42 | 43 | 44 | ## Installation 45 | 46 | Using npm: 47 | ```shell 48 | $ npm install --save rapscallion 49 | ``` 50 | 51 | In Node.js: 52 | ```javascript 53 | const { 54 | render, 55 | template 56 | } = require("rapscallion"); 57 | 58 | // ... 59 | ``` 60 | 61 | 62 | ## API 63 | 64 | 65 | ### `render` 66 | 67 | `render(VirtualDomNode) -> Renderer` 68 | 69 | This function returns a Renderer, an interface for rendering your VirtualDOM element. Methods are enumerated below. 70 | 71 | ----- 72 | 73 | ### `Renderer#toPromise` 74 | 75 | `renderer.toPromise() -> Promise` 76 | 77 | This function evaluates the React VirtualDOM Element originally provided to the renderer, and returns a Promise that resolves to the component's evaluated HTML string. 78 | 79 | **Example:** 80 | 81 | ```javascript 82 | render() 83 | .toPromise() 84 | .then(htmlString => console.log(htmlString)); 85 | ``` 86 | 87 | 88 | ----- 89 | 90 | ### `Renderer#toStream` 91 | 92 | `renderer.toStream() -> NodeStream` 93 | 94 | This function evaluates a React VirtualDOM Element, and returns a Node stream. This stream will emit string segments of HTML as the DOM tree is asynchronously traversed and evaluated. 95 | 96 | In addition to the normal API for Node streams, the returned stream object has a `checksum` method. When invoked, this will return the checksum that has been calculated up to this point for the stream. If the stream has ended, the checksum will be the same as would be included by `React.renderToString`. 97 | 98 | **Example:** 99 | 100 | ```javascript 101 | app.get('/example', function(req, res){ 102 | render() 103 | .toStream() 104 | .pipe(res); 105 | }); 106 | ``` 107 | 108 | 109 | ----- 110 | 111 | ### `Renderer#includeDataReactAttrs` 112 | 113 | `renderer.includeDataReactAttrs(Boolean) -> undefined` 114 | 115 | This allows you to set whether you'd like to include properties like `data-reactid` in your rendered markup. 116 | 117 | 118 | ----- 119 | 120 | ### `Renderer#tuneAsynchronicity` 121 | 122 | `renderer.tuneAsynchronicity(PositiveInteger) -> undefined` 123 | 124 | Rapscallion allows you to tune the asynchronicity of your renders. By default, rapscallion batches events in your stream of HTML segments. These batches are processed in a synchronous-like way. This gives you the benefits of asynchronous rendering without losing too much synchronous rendering performance. 125 | 126 | The default value is `100`, which means the Rapscallion will process one hundred segments of HTML text before giving control back to the event loop. 127 | 128 | You may want to change this number if your server is under heavy load. Possible values are the set of all positive integers. Lower numbers will be "more asynchronous" (shorter periods between I/O processing) and higher numbers will be "more synchronous" (higher performance). 129 | 130 | 131 | ----- 132 | 133 | ### `Renderer#checksum` 134 | 135 | `renderer.checksum() -> Integer` 136 | 137 | In a synchronous rendering environment, the generated markup's checksum would be calculated after all generation has completed. It would then be attached to the start of the HTML string before being sent to the client. 138 | 139 | However, in the case of a stream, the checksum is only known once all markup is generated, and the first bits of HTML are already on their way to the client by then. 140 | 141 | The renderer's `checksum` method will give you access to the checksum that has been calculated up to this point. If the rendered has completed generating all markup for the provided component, this value will be identical to that provided by React's `renderToString` function. 142 | 143 | For an example of how to attach this value to the DOM on the client side, see the example in the [template](#template) section below. 144 | 145 | 146 | ----- 147 | 148 | ### `setCacheStrategy` 149 | 150 | `setCacheStrategy({ get: ..., set: ... */ }) -> undefined` 151 | 152 | The default cache strategy provided by Rapscallion is a naive one. It is synchronous and in-memory, with no cache invalidation or TTL for cache entries. 153 | 154 | However, `setCacheStrategy` is provided to allow you to integrate your own caching solutions. The function expects an options argument with two keys: 155 | 156 | - `get` should accept a single argument, the key, and return a Promise resolving to a cached value. If no cached value is found, the Promise should resolve to `null`. 157 | - `set` should accept two arguments, a key and its value, and return a Promise that resolves when the `set` operation has completed. 158 | 159 | All values, both those returned from `get` and passed to `set`, will be Arrays with both string and integer elements. Keep that in mind if you need to serialize the data for your cache backend. 160 | 161 | **Example:** 162 | 163 | ```javascript 164 | const { setCacheStrategy } = require("rapscallion"); 165 | const redis = require("redis"); 166 | 167 | const client = redis.createClient(); 168 | const redisGet = Promise.promisify(redisClient.get, { context: redisClient }); 169 | const redisSet = Promise.promisify(redisClient.set, { context: redisClient }); 170 | setCacheStrategy({ 171 | get: key => redisGet(key).then(val => val && JSON.parse(val) || null), 172 | set: (key, val) => redisSet(key, JSON.stringify(val)) 173 | }); 174 | ``` 175 | 176 | For more information on how to cache your component HTML, read through the [caching section](#caching) below. 177 | 178 | 179 | ----- 180 | 181 | ### `template` 182 | 183 | ``template`TEMPLATE LITERAL` -> Renderer`` 184 | 185 | With React's default `renderToString`, it is a common pattern to define a function that takes the rendered output and inserts it into some HTML boilerplate; `` tags and the like. 186 | 187 | Rapscallion allows you to stream the rendered content of your components as they are generated. However, this makes it somewhat less simple to wrap that component in your HTML boilerplate. 188 | 189 | Fortunately, Rapscallion provides _rendering templates_. They look very similar to normal template strings, except that you'll prepend it with `template` as a [template-literal tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals). 190 | 191 | #### Valid expressions 192 | 193 | Like string templates, rendering templates allow you to insert expressions of various types. The following expression types are allowed: 194 | 195 | - **string:** any expression that evaluates to a string, i.e. `` template`${ "my string" }` `` 196 | - **vdom:** any React VirtualDOM object, i.e. `` template`${ }`` 197 | - **Renderer:** any `Renderer` instance, i.e. `` template `${ render(
) }` `` 198 | - **function:** any function that, when invoked, evaluates to one of the other valid expression types, i.e. `` template`${ () => "my string" }` `` 199 | 200 | One important thing to note is that a rendering template returns a `Renderer` instance when evaluated. This means that templates can be composed like so: 201 | 202 | ```javascript 203 | const myComponent = template` 204 |
205 | ${ } 206 |
207 | `; 208 | 209 | const html = template` 210 | 211 | ${ } 212 | 213 | ${ myComponent } 214 | 215 | 216 | `; 217 | ``` 218 | 219 | #### Behavior 220 | 221 | To utilize rendering templates effectively, it will be important to understand their following three properties: 222 | 223 | 1. template segments are evaluated _asynchronously_; 224 | 2. template segments are evaluated _in order_; and 225 | 3. template segments are evaluated _lazily_, as they are consumed. 226 | 227 | These properties are actually true of all `Renderer`s. However, they present potential pitfalls in the more complex situations that templates often represent. The asynchronicity is the easiest of the three properties to understand, so not much time will be spent on that. It is the lazy orderedness that can introduce interesting ramifications. 228 | 229 | Here are a handful of consequences of these properties that might not be readily apparent: 230 | 231 | - You cannot instantiate a component, pass it a store, and immediately pull out an updated state from the store. You have to wait until after the component is fully rendered before any side-effects of that rendering occur. 232 | - The same is true of checksums. You can't get a checksum of a component that hasn't been rendered yet. 233 | - If an error occurs half-way through a render, and you are streaming content to the user, it is too late to send a `404` - because you've already sent a `200`. You'll have to find other ways to present error conditions to the client. 234 | 235 | However, these properties also allow the computation cost to be spread across the lifetime of the render, and ultimately make things like asynchronous rendering possible. 236 | 237 | 238 | #### Example 239 | 240 | All of this may be somewhat unclear in the abstract, so here's a fuller example: 241 | 242 | ```javascript 243 | import { render, template } from "rapscallion"; 244 | 245 | // ... 246 | 247 | app.get('/example', function(req, res){ 248 | // ... 249 | 250 | const store = createStore(/* ... */); 251 | const componentRenderer = render(); 252 | 253 | const responseRenderer = template` 254 | 255 | 256 | ${componentRenderer} 257 | ${ 258 | 259 | } 260 | 267 | 268 | 269 | `; 270 | 271 | responseRenderer.toStream().pipe(res); 272 | }); 273 | ``` 274 | 275 | Note that the template comprises a stream of HTML text (`componentRenderer`), the HTML from a second component (`MyOtherComponent`), and a function that evaluates to the store's state - something you'll often want to do with SSR. 276 | 277 | Additionally, we attach the checksum to the rendered component's DOM element on the client side. 278 | 279 | 280 | ----- 281 | 282 | ## Caching 283 | 284 | Caching is performed on a per-component level, is completely opt-in, and should be used judiciously. The gist is this: you define a `cacheKey` prop on your component, and that component will only be rendered once for that particular key. `cacheKey` can be set on both React components and html React elements. 285 | 286 | If you cache components that change often, this will result in slower performance. But if you're careful to cache only those components for which 1) a `cacheKey` is easy to compute, and 2) will have a small set of keys (i.e. the props don't change often), you can see considerable performance improvements. 287 | 288 | **Example:** 289 | 290 | ```javascript 291 | const Child = ({ val }) => ( 292 |
293 | ComponentA 294 |
295 | ); 296 | 297 | const Parent = ({ toVal }) => ( 298 |
299 | { 300 | _.range(toVal).map(val => ( 301 | 302 | )) 303 | } 304 |
305 | ); 306 | 307 | Promise.resolve() 308 | // The first render will take the expected duration. 309 | .then(() => render().toPromise()) 310 | // The second render will be much faster, due to multiple cache hits. 311 | .then(() => render().toPromise()) 312 | // The third render will be near-instantaneous, due to a top-level cache hit. 313 | .then(() => render().toPromise()); 314 | ``` 315 | 316 | 317 | ----- 318 | 319 | ## Babel Plugins 320 | 321 | Rapscallion ships with two Babel plugins, one intended for your server build and one for your client build. Each serves a different purpose. 322 | 323 | ### `babel-plugin-client` 324 | 325 | When running in development mode, `ReactDOM.render` checks the DOM elements you define for any invalid HTML attributes. When found, a warning is issued in the console. 326 | 327 | If you're utilizing Rapscallion's caching mechanisms, you will see warnings for the `cacheKey` props that you define on your elements. Additionally, these properties are completely useless on the client, since they're only utilized during SSR. 328 | 329 | Rapscallion's client plugin will strip `cacheKey` props from your build, avoiding the errors and removing unnecessary bits from your client build. 330 | 331 | To use, add the following to your `.babelrc`: 332 | 333 | ```json 334 | { 335 | "plugins": [ 336 | "rapscallion/babel-plugin-client", 337 | // ... 338 | ] 339 | } 340 | ``` 341 | 342 | ### `babel-plugin-server` 343 | 344 | In typical scenarios, developers will use the `babel-plugin-transform-react-jsx` plugin to transform their JSX into `React.createElement` calls. However, these `createElement` function calls involve run-time overhead that is ultimately unnecessary for SSR. 345 | 346 | Rapscallion's server plugin is provided as a more efficient alternative. It provides two primary benefits: 347 | 348 | **Efficient VDOM data-structure:** Instead of transforming JSX into `React.createElement` calls, Rapscallion's server plugin transforms JSX into a simple object/array data-structure. This data-structure is more efficient to traverse and avoids extraneous function invocations. 349 | 350 | **Pre-rendering:** Rapscallion's server plugin also attempts to pre-render as much content as possible. For example, if your component always starts with a `
`, that fact can be determined at build-time. Transforming JSX into these pre-computed string segments avoids computation cost at run-time, and in some cases can make for a more shallow VDOM tree. 351 | 352 | To be clear, `rapscallion/babel-plugin-server` should be used _in place of_ `babel-plugin-transform-react-jsx`. 353 | 354 | To use, add the following to your `.babelrc`: 355 | 356 | ```json 357 | { 358 | "plugins": [ 359 | "rapscallion/babel-plugin-server", 360 | // ... 361 | ] 362 | } 363 | ``` 364 | 365 | The plugin also supports Rapscallion-aware JSX hoisting. This may improve performance, but may also hurt. We recommend you profile your application's rendering behavior to determine whether to enable hoisting. To use: 366 | 367 | ```json 368 | { 369 | "plugins": [ 370 | ["rapscallion/babel-plugin-server", { 371 | "hoist": true 372 | }] 373 | ] 374 | } 375 | ``` 376 | 377 | 378 | ----- 379 | 380 | ## Benchmarks 381 | 382 | The below benchmarks _do not_ represent a typical use-case. Instead, they represent the absolute _best case scenario_ for component caching. 383 | 384 | However, you'll note that even without caching, a concurrent workload will be processed almost 50% faster, without any of the blocking! 385 | 386 | ``` 387 | Starting benchmark for 10 concurrent render operations... 388 | renderToString took 9.639041541 seconds 389 | rapscallion, no caching took 9.168861890 seconds; ~1.05x faster 390 | rapscallion, caching DIVs took 3.830723252 seconds; ~2.51x faster 391 | rapscallion, caching DIVs (second time) took 3.004709954 seconds; ~3.2x faster 392 | rapscallion, caching Components took 3.088687965 seconds; ~3.12x faster 393 | rapscallion, caching Components (second time) took 2.484650701 seconds; ~3.87x faster 394 | rapscallion (pre-rendered), no caching took 7.423578183 seconds; ~1.29x faster 395 | rapscallion (pre-rendered), caching DIVs took 3.202458180 seconds; ~3x faster 396 | rapscallion (pre-rendered), caching DIVs (second time) took 2.671346947 seconds; ~3.6x faster 397 | rapscallion (pre-rendered), caching Components took 2.578935599 seconds; ~3.73x faster 398 | rapscallion (pre-rendered), caching Components (second time) took 2.470472298 seconds; ~3.9x faster 399 | ``` 400 | 401 | 402 | ----- 403 | 404 | ## License 405 | 406 | [MIT License](http://opensource.org/licenses/MIT) 407 | 408 | 409 | ## Maintenance Status 410 | 411 | **Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own! 412 | -------------------------------------------------------------------------------- /babel-plugin-client.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./lib/transform/client"); 2 | -------------------------------------------------------------------------------- /babel-plugin-server.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./lib/transform/server"); 2 | -------------------------------------------------------------------------------- /benchmark/_util.js: -------------------------------------------------------------------------------- 1 | const { isFunction, isUndefined } = require("lodash"); 2 | 3 | 4 | const RED = "\x1b[31m"; 5 | const GREEN = "\x1b[32m"; 6 | const NORMAL = "\x1b[0m"; 7 | 8 | const color = (color, text) => `${color}${text}${NORMAL}`; 9 | const red = text => color(RED, text); 10 | const green = text => color(GREEN, text); 11 | 12 | let _color = green; 13 | const alternateColor = text => { 14 | _color = _color === red ? green : red; 15 | return _color(text); 16 | }; 17 | 18 | 19 | const time = (description, fn, baseTimeOrFn) => { 20 | let baseTime; 21 | let setBaseTime; 22 | if (isFunction(baseTimeOrFn)) { 23 | setBaseTime = baseTimeOrFn; 24 | } else if (!isUndefined(baseTimeOrFn)) { 25 | baseTime = baseTimeOrFn; 26 | } 27 | 28 | const start = process.hrtime(); 29 | return Promise.resolve(fn()).then(resolution => { 30 | const [ seconds, nanoseconds ] = process.hrtime(start); 31 | const nsToDecimal = (nanoseconds + 1000000000).toString().slice(1); 32 | 33 | let relativeSpeed; 34 | if (setBaseTime) { setBaseTime({ seconds, nanoseconds }); } 35 | if (baseTime) { 36 | const { seconds: baseSeconds, nanoseconds: baseNanoseconds } = baseTime; 37 | const baseTotal = 1000000000 * baseSeconds + baseNanoseconds; 38 | const myTotal = 1000000000 * seconds + nanoseconds; 39 | relativeSpeed = Math.floor(baseTotal / myTotal * 100) / 100; 40 | } 41 | 42 | console.log(`${description} took ${seconds}.${nsToDecimal} seconds${ 43 | relativeSpeed && `; ~${relativeSpeed}x faster` || "" 44 | }`); 45 | return resolution; 46 | }); 47 | }; 48 | 49 | 50 | module.exports = { 51 | time, 52 | alternateColor 53 | }; 54 | -------------------------------------------------------------------------------- /benchmark/benchmark.js: -------------------------------------------------------------------------------- 1 | import { default as React } from "react"; 2 | import { renderToString } from "react-dom/server"; 3 | import { range } from "lodash"; 4 | 5 | import { render } from ".."; 6 | import { time } from "./_util"; 7 | import PrerenderedComponent from "./prerendered-component"; 8 | 9 | // Accessing process.env.NODE_ENV is expensive. 10 | // Replace process.env to equivalent plain JS objects. 11 | process.env = Object.assign({}, process.env); 12 | 13 | // Make sure React is in production mode. 14 | process.env.NODE_ENV = "production"; 15 | 16 | 17 | const CONCURRENCY = 10; 18 | const DEPTH = 8; 19 | const CACHE_DIVS = "CACHE_DIVS"; 20 | const CACHE_COMPONENT = "CACHE_COMPONENT"; 21 | 22 | 23 | const Component = ({ depth, leafText, cacheMe }) => { 24 | if (depth === 1) { 25 | return ( 26 |
27 | This is static leaf content. 28 |
29 | {leafText} 30 |
31 |
32 | ); 33 | } 34 | 35 | const newDepth = depth - 1; 36 | return ( 37 |
44 | This is static sibling content. 45 | { 46 | range(depth).map(idx => ( 47 | 57 | )) 58 | } 59 |
60 | ); 61 | }; 62 | 63 | 64 | console.log(`Starting benchmark for ${CONCURRENCY} concurrent render operations...`); 65 | 66 | let baseTime; 67 | Promise.resolve() 68 | .then(() => 69 | time( 70 | "renderToString", 71 | () => range(CONCURRENCY).forEach(() => 72 | renderToString( 73 | 77 | ) 78 | ), 79 | _baseTime => baseTime = _baseTime 80 | ) 81 | ) 82 | .then(() => 83 | time( 84 | "rapscallion, no caching", 85 | () => Promise.all( 86 | range(CONCURRENCY).map(() => 87 | render( 88 | 92 | ).toPromise() 93 | ) 94 | ), 95 | baseTime 96 | ) 97 | ) 98 | .then(() => 99 | time( 100 | "rapscallion, caching DIVs", 101 | () => Promise.all( 102 | range(CONCURRENCY).map(() => 103 | render( 104 | 109 | ).toPromise() 110 | ) 111 | ), 112 | baseTime 113 | ) 114 | ) 115 | .then(() => 116 | time( 117 | "rapscallion, caching DIVs (second time)", 118 | () => Promise.all( 119 | range(CONCURRENCY).map(() => 120 | render( 121 | 126 | ).toPromise() 127 | ) 128 | ), 129 | baseTime 130 | ) 131 | ) 132 | .then(() => 133 | time( 134 | "rapscallion, caching Components", 135 | () => Promise.all( 136 | range(CONCURRENCY).map(() => 137 | render( 138 | 143 | ).toPromise() 144 | ) 145 | ), 146 | baseTime 147 | ) 148 | ) 149 | .then(() => 150 | time( 151 | "rapscallion, caching Components (second time)", 152 | () => Promise.all( 153 | range(CONCURRENCY).map(() => 154 | render( 155 | 160 | ).toPromise() 161 | ) 162 | ), 163 | baseTime 164 | ) 165 | ) 166 | .then(() => 167 | time( 168 | "rapscallion (pre-rendered), no caching", 169 | () => Promise.all( 170 | range(CONCURRENCY).map(() => 171 | render( 172 | 176 | ).toPromise() 177 | ) 178 | ), 179 | baseTime 180 | ) 181 | ) 182 | .then(() => 183 | time( 184 | "rapscallion (pre-rendered), caching DIVs", 185 | () => Promise.all( 186 | range(CONCURRENCY).map(() => 187 | render( 188 | 193 | ).toPromise() 194 | ) 195 | ), 196 | baseTime 197 | ) 198 | ) 199 | .then(() => 200 | time( 201 | "rapscallion (pre-rendered), caching DIVs (second time)", 202 | () => Promise.all( 203 | range(CONCURRENCY).map(() => 204 | render( 205 | 210 | ).toPromise() 211 | ) 212 | ), 213 | baseTime 214 | ) 215 | ) 216 | .then(() => 217 | time( 218 | "rapscallion (pre-rendered), caching Components", 219 | () => Promise.all( 220 | range(CONCURRENCY).map(() => 221 | render( 222 | 227 | ).toPromise() 228 | ) 229 | ), 230 | baseTime 231 | ) 232 | ) 233 | .then(() => 234 | time( 235 | "rapscallion (pre-rendered), caching Components (second time)", 236 | () => Promise.all( 237 | range(CONCURRENCY).map(() => 238 | render( 239 | 244 | ).toPromise() 245 | ) 246 | ), 247 | baseTime 248 | ) 249 | ); 250 | -------------------------------------------------------------------------------- /benchmark/concurrency.js: -------------------------------------------------------------------------------- 1 | import { default as React } from "react"; 2 | import { range } from "lodash"; 3 | import { Throttle } from "stream-throttle"; 4 | 5 | import { render } from "../src"; 6 | 7 | 8 | const Component = ({ depth, leafText }) => { 9 | if (depth === 1) { 10 | return ( 11 |
12 | {leafText} 13 |
14 | ); 15 | } 16 | 17 | const newDepth = depth - 1; 18 | return ( 19 |
20 | { 21 | range(depth).map(idx => ( 22 | 27 | )) 28 | } 29 |
30 | ); 31 | }; 32 | 33 | 34 | const padLeft = str => ` ${str}`.slice(-6); 35 | 36 | range(5).forEach(idx => { 37 | const bigComponent = ( 38 | 42 | ); 43 | 44 | render(bigComponent) 45 | .tuneAsynchronicity(2) 46 | .toStream() 47 | .pipe(new Throttle({ rate: 300 })) 48 | .on("data", segment => console.log(`${padLeft(idx)} --> ${segment}`)); 49 | }); 50 | -------------------------------------------------------------------------------- /benchmark/prerendered-component/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "babelrc": false, 3 | "plugins": [ 4 | "../../src/transform/server", 5 | "transform-object-rest-spread", 6 | "transform-es2015-modules-commonjs", 7 | "transform-es2015-arrow-functions" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /benchmark/prerendered-component/index.js: -------------------------------------------------------------------------------- 1 | import { default as React } from "react"; 2 | import { range } from "lodash"; 3 | 4 | 5 | const CACHE_DIVS = "CACHE_DIVS"; 6 | const CACHE_COMPONENT = "CACHE_COMPONENT"; 7 | 8 | 9 | const Component = module.exports = ({ depth, leafText, cacheMe }) => { 10 | if (depth === 1) { 11 | return ( 12 |
13 | This is static leaf content. 14 |
15 | {leafText} 16 |
17 |
18 | ); 19 | } 20 | 21 | const newDepth = depth - 1; 22 | return ( 23 |
30 | This is static sibling content. 31 | { 32 | range(depth).map(idx => ( 33 | 43 | )) 44 | } 45 |
46 | ); 47 | }; 48 | -------------------------------------------------------------------------------- /benchmark/test-html-output-with-context.js: -------------------------------------------------------------------------------- 1 | import { default as React, Component, PropTypes } from "react"; 2 | import { render } from "../src"; 3 | 4 | 5 | class Grandparent extends Component { 6 | getChildContext () { 7 | return { grandparent: "grandparent" }; 8 | } 9 | 10 | render () { 11 | return ; 12 | } 13 | } 14 | 15 | Grandparent.childContextTypes = { 16 | grandparent: PropTypes.string 17 | }; 18 | 19 | class Parent extends Component { 20 | getChildContext () { 21 | return { parent: "parent" }; 22 | } 23 | 24 | render () { 25 | return ; 26 | } 27 | } 28 | 29 | Parent.childContextTypes = { 30 | parent: PropTypes.string 31 | }; 32 | 33 | const Child = (props, context) => { 34 | return ( 35 |
36 | {context.grandparent} 37 | {context.parent} 38 |
39 | ); 40 | }; 41 | 42 | Child.contextTypes = { 43 | grandparent: PropTypes.string, 44 | parent: PropTypes.string 45 | }; 46 | 47 | 48 | render().toPromise() 49 | .then(html => console.log(html)); 50 | -------------------------------------------------------------------------------- /benchmark/test-html-output.js: -------------------------------------------------------------------------------- 1 | import { default as React } from "react"; 2 | import { render } from "../src"; 3 | 4 | 5 | const A = ({ prop }) => { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | }; 12 | 13 | const B = ({ a }) => { 14 | return ( 15 | 16 | { a } 17 | 18 | hi there! © 19 | { "stuff <" } 20 | 21 | 22 | ); 23 | }; 24 | 25 | const C = ({ a, children }) => { 26 | return ( 27 |
28 | {a} 29 | { children } 30 |
31 | ); 32 | }; 33 | 34 | render().toPromise() 35 | .then(html => console.log(html)); 36 | -------------------------------------------------------------------------------- /benchmark/test-templated-output.js: -------------------------------------------------------------------------------- 1 | import { default as React } from "react"; 2 | 3 | import { template, render } from "../src"; 4 | import { alternateColor } from "./_util"; 5 | 6 | 7 | let someState = "STATE BEFORE RENDERING"; 8 | const getSomeState = () => someState; 9 | 10 | 11 | const MyComponent = ({ prop }) => { 12 | return ( 13 |
14 | 15 | { "other things" } 16 | 17 |
18 | ); 19 | }; 20 | 21 | const Child = () => { 22 | someState = "STATE AFTER RENDERING"; 23 | return
; 24 | }; 25 | 26 | const getTemplateRenderer = componentRenderer => template` 27 | 28 | 29 | ${ getSomeState } 30 | ${ componentRenderer } 31 | ${ getSomeState } 32 | 33 | 34 | `; 35 | 36 | const componentRenderer = render(); 37 | const htmlRenderer = getTemplateRenderer(componentRenderer); 38 | htmlRenderer 39 | .toStream() 40 | .on("data", segment => process.stdout.write(alternateColor(segment))); 41 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | test: 4 | working_directory: ~/FormidableLabs/rapscallion 5 | environment: 6 | CIRCLE_TEST_REPORTS: /tmp/circleci-test-results 7 | docker: 8 | - image: circleci/node:8.11.1 9 | steps: 10 | - checkout 11 | - run: mkdir -p $CIRCLE_TEST_REPORTS 12 | - run: npm install 13 | - run: npm run check 14 | - store_test_results: 15 | path: /tmp/circleci-test-results 16 | build: 17 | working_directory: ~/FormidableLabs/rapscallion 18 | docker: 19 | - image: circleci/node:8.11.1 20 | steps: 21 | - checkout 22 | - run: npm install 23 | - run: npm run build 24 | # Deployment coming soon... 25 | workflows: 26 | version: 2 27 | test_and_build: 28 | jobs: 29 | - test 30 | - build -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | PULL_REQUEST_NUMBER=$(git show HEAD --format=format:%s | sed -nE 's/Merge pull request #([0-9]+).*/\1/p') 4 | 5 | if [ -z "$PULL_REQUEST_NUMBER" ]; then 6 | echo "No pull request number found; aborting publish." 7 | exit 0 8 | fi 9 | 10 | echo "Detected pull request #$PULL_REQUEST_NUMBER." 11 | SEMVER_CHANGE=$(curl "https://maintainerd.divmain.com/api/semver?repoPath=FormidableLabs/rapscallion&installationId=37499&prNumber=$PULL_REQUEST_NUMBER") 12 | if [ -z "$SEMVER_CHANGE" ]; then 13 | echo "No semver selection found; aborting publish." 14 | exit 0 15 | fi 16 | 17 | echo "Detected semantic version change of $SEMVER_CHANGE." 18 | 19 | # CI might leave the working directory in an unclean state. 20 | git reset --hard 21 | 22 | git config --global user.name "Dale Bustad (bot)" 23 | git config --global user.email "dale@divmain.com" 24 | 25 | eval npm version "$SEMVER_CHANGE" 26 | npm publish 27 | 28 | git remote add origin-deploy https://${GH_TOKEN}@github.com/FormidableLabs/rapscallion.git > /dev/null 2>&1 29 | git push --quiet --tags origin-deploy master 30 | 31 | echo "Done!" 32 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./lib"); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rapscallion", 3 | "version": "2.1.16", 4 | "description": "Asynchronous React VirtualDOM renderer for SSR.", 5 | "keywords": [ 6 | "react", 7 | "ssr", 8 | "asynchronous", 9 | "render", 10 | "html", 11 | "stream" 12 | ], 13 | "main": "index.js", 14 | "scripts": { 15 | "build": "rm -rf lib/ && babel -d lib/ src/", 16 | "check": "npm run lint && npm run test", 17 | "test": "mocha spec/exec.js", 18 | "lint": "eslint src spec", 19 | "benchmark": "babel-node benchmark/benchmark.js", 20 | "concurrency": "babel-node benchmark/concurrency.js", 21 | "check-output": "babel-node benchmark/test-html-output.js", 22 | "check-context-output": "babel-node benchmark/test-html-output-with-context.js", 23 | "check-templated-output": "babel-node benchmark/test-templated-output.js", 24 | "prepublish": "npm run check && npm run build" 25 | }, 26 | "files": [ 27 | "lib", 28 | "babel-plugin-client.js", 29 | "babel-plugin-server.js" 30 | ], 31 | "repository": { 32 | "type": "git", 33 | "url": "git://github.com/FormidableLabs/rapscallion.git" 34 | }, 35 | "author": "Dale Bustad ", 36 | "license": "MIT", 37 | "devDependencies": { 38 | "babel-cli": "^6.26.0", 39 | "babel-core": "^6.26.3", 40 | "babel-eslint": "^7.1.1", 41 | "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", 42 | "babel-plugin-transform-es2015-modules-commonjs": "^6.22.0", 43 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 44 | "babel-plugin-transform-react-jsx": "^6.22.0", 45 | "babel-preset-env": "^1.6.0", 46 | "chai": "^3.5.0", 47 | "eslint": "2.13.1", 48 | "eslint-config-formidable": "^2.0.1", 49 | "eslint-plugin-filenames": "^1.1.0", 50 | "eslint-plugin-import": "^2.6.0", 51 | "eslint-plugin-react": "^6.9.0", 52 | "mocha": "^3.5.3", 53 | "react": "^15.4.2", 54 | "react-dom": "^15.4.2", 55 | "sinon": "^1.17.7", 56 | "sinon-chai": "^2.8.0", 57 | "stream-throttle": "^0.1.3" 58 | }, 59 | "engines": { 60 | "node": ">=6.0.0" 61 | }, 62 | "dependencies": { 63 | "bluebird": "^3.4.7", 64 | "lodash": "^4.17.11" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /spec/_util.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable filenames/match-regex */ 2 | import { default as React } from "react"; 3 | 4 | import { 5 | renderToString as reactRenderToString, 6 | renderToStaticMarkup as reactRenderToStaticMarkup 7 | } from "react-dom/server"; 8 | 9 | import { transform } from "babel-core"; 10 | 11 | import { render } from "../src"; 12 | 13 | 14 | const TAG_END = /\/?>/; 15 | 16 | function resolveStreamOnDone (stream, cb) { 17 | return new Promise(resolve => { 18 | stream 19 | .on("data", cb) 20 | .on("end", resolve); 21 | }); 22 | } 23 | 24 | 25 | export const checkParity = (Component, props = {}) => { 26 | describe("via React.createElement", () => { 27 | it("has parity with React#renderToString via Render#toPromise", () => { 28 | return render() 29 | .toPromise() 30 | .then(htmlString => { 31 | expect(htmlString).to.equal(reactRenderToString()); 32 | }); 33 | }); 34 | it("has parity with React#renderToString via Render#toStream", () => { 35 | const renderer = render(); 36 | const stream = renderer.toStream(); 37 | 38 | let output = ""; 39 | return resolveStreamOnDone(stream, segment => output += segment) 40 | .then(() => { 41 | const checksum = renderer.checksum(); 42 | output = output.replace(TAG_END, ` data-react-checksum="${checksum}"$&`); 43 | 44 | expect(output).to.equal(reactRenderToString()); 45 | }); 46 | }); 47 | it("has parity with React#renderToStaticMarkup via Render#toPromise", () => { 48 | return render() 49 | .includeDataReactAttrs(false) 50 | .toPromise() 51 | .then(htmlString => { 52 | expect(htmlString).to.equal(reactRenderToStaticMarkup()); 53 | }); 54 | }); 55 | it("has parity with React#renderToStaticMarkup via Render#toStream", () => { 56 | const stream = render() 57 | .includeDataReactAttrs(false) 58 | .toStream(); 59 | 60 | let output = ""; 61 | return resolveStreamOnDone(stream, segment => output += segment) 62 | .then(() => { 63 | expect(output).to.equal(reactRenderToStaticMarkup()); 64 | }); 65 | }); 66 | }); 67 | 68 | if (!Component.preVDOM) { return; } 69 | 70 | describe("via pre-rendered VDOM", () => { 71 | const prerenderedRootNode = { 72 | __prerendered__: "component", 73 | type: Component.preVDOM, 74 | props, 75 | children: [] 76 | }; 77 | it("has parity with React#renderToString via Render#toPromise", () => { 78 | return render(prerenderedRootNode) 79 | .toPromise() 80 | .then(htmlString => { 81 | expect(htmlString).to.equal(reactRenderToString()); 82 | }); 83 | }); 84 | it("has parity with React#renderToString via Render#toStream", () => { 85 | const renderer = render(prerenderedRootNode); 86 | const stream = renderer.toStream(); 87 | 88 | let output = ""; 89 | return resolveStreamOnDone(stream, segment => output += segment) 90 | .then(() => { 91 | const checksum = renderer.checksum(); 92 | output = output.replace(TAG_END, ` data-react-checksum="${checksum}"$&`); 93 | 94 | expect(output).to.equal(reactRenderToString()); 95 | }); 96 | }); 97 | }); 98 | }; 99 | 100 | export const checkElementParity = (element) => { 101 | return checkParity(() => element); 102 | }; 103 | 104 | const serverPluginPath = require.resolve("../src/transform/server"); 105 | 106 | const getBabelConfig = forPrerendered => ({ 107 | ast: false, 108 | babelrc: false, 109 | parserOpts: { 110 | allowImportExportEverywhere: true, 111 | allowReturnOutsideFunction: true 112 | }, 113 | plugins: [ 114 | forPrerendered ? serverPluginPath : null, 115 | forPrerendered ? "transform-object-rest-spread" : null, 116 | !forPrerendered ? "transform-react-jsx" : null, 117 | "transform-es2015-modules-commonjs", 118 | "transform-es2015-arrow-functions" 119 | ].filter(x => x) 120 | }); 121 | // eslint-disable-next-line no-new-func 122 | const evalCode = code => (new Function("React", "require", code))(React, require); 123 | 124 | export const getRootNode = code => { 125 | const createElementCode = transform(code, getBabelConfig(false)).code; 126 | const prerenderedCode = transform(code, getBabelConfig(true)).code; 127 | const el = evalCode(createElementCode); 128 | el.preVDOM = evalCode(prerenderedCode); 129 | return el; 130 | }; 131 | -------------------------------------------------------------------------------- /spec/adler32.js: -------------------------------------------------------------------------------- 1 | const adler32 = require("../src/adler32"); 2 | const reactAdler32 = require("react-dom/lib/adler32"); 3 | 4 | describe("adler32", () => { 5 | it("generates same checksum", () => { 6 | expect(adler32("foo")).to.equal(reactAdler32("foo")); 7 | }); 8 | it("generates same checksum with seed", () => { 9 | const data = ["foo", "bar", "baz"]; 10 | 11 | const checksum = data.reduce((seed, chunk) => { 12 | return adler32(chunk, seed); 13 | }, null); 14 | 15 | expect(checksum).to.equal(reactAdler32(data.join(""))); 16 | }); 17 | it("with large inputs", () => { 18 | const repeat = 100000; 19 | let str = ""; 20 | for (let i = 0; i < repeat; i++) { 21 | str += "This will be repeated to be very large indeed. "; 22 | } 23 | expect(adler32(str)).to.equal(reactAdler32(str)); 24 | }); 25 | it("with international inputs", () => { 26 | const str = "Линукс 是一個真棒操作系統!"; 27 | 28 | // this will fail with adler-32 package 29 | expect(adler32(str)).to.equal(reactAdler32(str)); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /spec/attributes.js: -------------------------------------------------------------------------------- 1 | import { default as React } from "react"; 2 | 3 | import { checkElementParity } from "./_util"; 4 | 5 | describe("property to attribute mapping", () => { 6 | describe("string properties", () => { 7 | describe("simple numbers", () => { 8 | checkElementParity(
); 9 | }); 10 | 11 | describe("simple strings", () => { 12 | checkElementParity(
); 13 | }); 14 | 15 | // this seems like it might mask programmer error, but it's existing behavior. 16 | describe("string prop with true value", () => { 17 | checkElementParity(); // eslint-disable-line react/jsx-boolean-value 18 | }); 19 | 20 | // this seems like it might mask programmer error, but it's existing behavior. 21 | describe("string prop with false value", () => { 22 | checkElementParity(); 23 | }); 24 | 25 | // this seems like somewhat odd behavior, as it isn't how works 26 | // in HTML, but it's existing behavior. 27 | describe("string prop with true value", () => { 28 | checkElementParity(); // eslint-disable-line react/jsx-boolean-value 29 | }); 30 | }); 31 | 32 | describe("boolean properties", () => { 33 | describe("boolean prop with true value", () => { 34 | checkElementParity(