koistya / gulp-render Goto Github PK

View Code? Open in Web Editor NEW

26.0 2.0 9.0 279 KB

Pre-render React components at compile time. E.g. SomePage.jsx -> some-page.html

License: MIT License

JavaScript 100.00%

gulp-render's Introduction

gulp-render

Pre-render React components at compile time.

How to Install

$ npm install gulp-render --save-dev

How to Use

Example 1:

var gulp = require('gulp');
var render = require('gulp-render');

gulp.task('default', function() {
  return gulp.src('src/pages/**/*.jsx')
    .pipe(render({template: 'src/pages/_template.html'}))
    .pipe(gulp.dest('build'));
});

Example 2:

var gulp = require('gulp');
var render = require('gulp-render');

gulp.task('default', function() {
  return gulp.src('src/pages/**/*.jsx')
    .pipe(render({
      template:
        '<!doctype html>' +
        '<html><head><title><%=title%></title></head>' +
        '<body><%=body%></body></html>',
      harmony: false,
      data: {title: 'Page Title'}
    }))
    .pipe(gulp.dest('build'));
});

React Component Sample (`src/pages/SomePage.jsx`)

var React = require('react');
var DefaultLayout = require('../layouts/DefaultLayout.jsx');

var SomePage = React.createClass({
  statics: {
    layout: DefaultLayout
  },
  render() {
    return (
      <div className="container">
        <h1>React Component Sample</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    );
  }
});

module.exports = SomePage;

API

`render(options)`

option	values	default
`template`	Lo-Dash template string or filename	`null`
`harmony`	`true`: enable ES6 features	`true`
`stripTypes`	`true`: enable Flow type annotations	`true`
`hyphenate`	`true`: SomePage.jsx -> some-page.html	`true`
`staticMarkup`	`true`: HTML output will not have `data-react-*` attributes	`false`
`data`	E.g. `{title: 'Hello'}` or `function(file) { ... }`	`object` or `function`

Related Projects

React.js Starter Kit - a skeleton for an isomorphic web application (SPA)

License

The MIT License (MIT) @ Konstantin Tarkus (@koistya)

gulp-render's People

Contributors

Stargazers

Watchers

Forkers

craigdallimore dmnd lustdante scott-cote marshallbu tybruffy joshhighland sovanyio

gulp-render's Issues

ReferenceError: window is not defined when requiring certain 3rd party libs

I get the ReferenceError: window is not defined when requiring certain libs that make use of the window object.

Heres the full stack trace:

ReferenceError: window is not defined
    at <path-to-project>/node_modules/chartist/dist/chartist.js:715:5
    at Chartist.version (<path-to-project>/node_modules/chartist/dist/chartist.js:11:22)
    at Object.<anonymous> (<path-to-project>/node_modules/chartist/dist/chartist.js:15:2)
    at Module._compile (module.js:456:26)
    at Module._extensions..js (module.js:474:10)
    at reactTransform (<path-to-project>/gulpfile.js:58:5)
    at Object.Plugin.reactTransform (<path-to-project>/node_modules/gulp-render/index.js:80:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Is there any workaround for this?

Btw Im using your react starterkit https://github.com/kriasoft/react-starter-kit

Unexpected Token '>'

Hi,
I'am currently using your react-starter-kit and trying to use material-ui with it. When i require it in a component, i get the following exception:

/home/ubuntu/workspace/windowManager/node_modules/material-ui/docs/dist/js/app-bar.jsx:29
    if (this.props.title) title = <h1 className="mui-app-bar-title">{this.prop
                                  ^
{ [SyntaxError: Unexpected token <]
  name: 'SyntaxError',
  message: 'Unexpected token <',
  stack: 'SyntaxError: Unexpected token <\n    at Module._compile (module.js:439:25)\n    at Module._extensions..js (module.js:474:10)\n    at Object.Plugin.reactTransform (/home/ubuntu/workspace/windowManager/node_modules/gulp-render/index.js:68:7)\n    at Module.load (module.js:356:32)\n    at Function.Module._load (module.js:312:12)\n    at Module.require (module.js:364:17)\n    at require (module.js:380:17)\n    at Object.<anonymous> (/home/ubuntu/workspace/windowManager/node_modules/material-ui/docs/dist/index.js:2:10)\n    at Module._compile (module.js:456:26)\n    at Module._extensions..js (module.js:474:10)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-render' }

I checked the file and found nothing wrong with it, that's why this issue is reported here and not over at meteor-ui.

Any advice?

UMD support

One of my pages is require-ing an AMD module. This works fine at runtime, when Webpack is in charge, but when pre-rendering using this plugin I'm getting an error; define is not defined.

I'm not sure I understand exactly how this plugin works, but would it be possible to add Webpack and/or UMD support?

Thanks

SyntaxError: Unexpected token <

I'm getting SyntaxError: Unexpected token < when require external modules with js extenstion and jsx syntax. How to do it properly?

webpack loaders support

I'm trying to use a webpack loader with gulp-render (Specifically, yaml-loader).

Maybe this is the same issue as #4. Things work fine via webpack, but since gulp-render gets called before webpack, when React tries to compile the file it interprets anything requireed as a Javascript file, causing a syntax error.

Is it easy to set up this plugin in a way where the React can rely on webpack loaders? I'm using this via https://github.com/kriasoft/react-starter-kit.

import React from 'react';
^^^^^^
{ [SyntaxError: Unexpected reserved word]
  name: 'SyntaxError',
  message: 'Unexpected reserved word',
  stack: 'SyntaxError: Unexpected reserved word\n    at Module._compile (module.js:439:25)\n    at DestroyableTransform._transform (/Volumes/Macintosh HD/Sites/jsp

This is the render function:

var render = $.render({
      template: './src/templates/index.html',
      data: {title: 'Page Title'},
      harmony: true
    })
    .on('error', onError);

Cheers!