npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grunt-react-renderize

v0.2.0

Published

Render React components into Grunt config or files.

Downloads

3

Readme

grunt-react-renderize

Render React components into Grunt config or files.

Getting Started

This plugin requires Grunt.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-react-renderize --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-react-renderize');

The "react_renderize" task

Overview

This plugin allows you to render a React component from file into Grunt config or a file.

Rendering to a config value

Rendered value can be used with any template engine that allows providing data to templates through the config. For example let's assume you have a React module:

var React = require('react');

module.exports = React.createElement('p', null, 'I need this in my template.');

and a Jade template:

div!=prerenderedMarkup

The result, after providing 'jade.options.data.prerenderedMarkup' as a destination for the task, would be:

<div><p>I need this in my template.</p></div>

Rendering into a file

This, of course, outputs the result of the rendering to a file. The option renderToFile works best with the option banner if you are rendering a whole document - you can provide the doctype through it. So React module:

var React = require('react');

module.exports = React.createElement('body', null, 'I like to move it.');

with option renderToFile set to true and option banner set to '<!doctype html>' will result in a file with a content:

<!doctype html><body>I like to move it.</body>

Options

options.renderToFile

Type: Boolean Default value: false

When this option is set to true, the result will be rendered to a file instead of a Grunt config value. Since a config value name can be similar to a file name, this option is safer than any is-that-a-filename-or-not heuristics.

options.banner

Type: String Default: empty string

This string will be prepended to the beginning of the concatenated output. It is processed using grunt.template.process, using the default options.

(Default processing options are explained in the grunt.template.process documentation)

options.footer

Type: String Default: empty string

This string will be appended to the end of the concatenated output. It is processed using grunt.template.process, using the default options.

(Default processing options are explained in the grunt.template.process documentation)

options.removeReactAttrs

Type: Boolean Default value: true

If set to true, then data-react* attributes won't be present in the rendered markup (renderToStaticMarkup will be used instead of renderToString).

With no data-react* attributes React won't be able to reuse the rendered data in the browser and will replace innerHTML of the target container, which is not quite optimal.

The default value is set to true for backward compatibility and will be set to false in the next major release.

options.separator

Type: String Default value: empty string

Used as a separator when joining multiple rendered components.

Usage Example

This should render the component from a file into Grunt config.

grunt.initConfig({
  react_renderize: {
    files: {
      'template_engine.options.data.component': 'components/my_component.js',
    },
  },
})

The rendered component will be available through grunt.config.get('template_engine.options.data.component')).

Motivation

I wanted to prerender the React components and reuse them in Jade templates. This gives me the freedom to apply any filter to the rendered markup. The only way I knew to do this was by setting the Grunt config. Thus the plugin was born.

If you know of a better way to solve this problem, please contact me :)

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

License

Copyright (c) 2014 FatFisz. Licensed under the MIT license.