express-coffee-react-views
Advanced tools
Readme
This is an Express view engine which renders React components written in CoffeeScript on the server. It renders static markup and does not support mounting those views on the client.
This was derived from express-react-views
This is intended to be used as a replacement for existing server-side view solutions, like jade, ejs, or handlebars.
npm install express-coffee-react-views react
Note: You must explicitly install react as a dependency. react is a peer dependency here. This is to avoid issues that may come when using incompatible versions.
# app.coffee
app = express()
app.set 'view engine', 'cjsx'
app.engine 'cjsx', require('express-coffee-react-views').createEngine()
You can pass options in when creating your engine.
| option | values | default |
|---|---|---|
extension | any file extension with leading . | ".cjsx" |
doctype | any string that can be used as a doctype, this will be prepended to your document | "<!DOCTYPE html>" |
beautify | true: beautify markup before outputting (note, this can affect rendering due to additional whitespace) | false |
The defaults are sane, but just in case you want to change something, here's how it would look:
options = extension: '.csx'
app.engine 'cjsx', require('express-coffee-react-views').createEngine options
Your views should be node modules that export a React component. Let's assume you have this file in views/index.cjsx:
/** @cjsx React.DOM */
HelloMessage = React.createClass
render: ->
<div>Hello {this.props.name}</div>
module.exports = HelloMessage
Your routes would look identical to the default routes Express gives you out of the box.
# app.coffee
app.get '/', require('./routes').index
# routes/index.coffee
exports.index = (req, res) ->
res.render 'index', { name: 'John' }
That's it! Layouts follow really naturally from the idea of composition.
Simply pass the relevant props to a layout component.
views/layouts/default.cjsx:
/** @cjsx React.DOM */
DefaultLayout = React.createClass
render: ->
<html>
<head><title>{this.props.title}</title></head>
<body>{this.props.children}</body>
</html>
module.exports = DefaultLayout
views/index.cjsx:
/** @cjsx React.DOM */
DefaultLayout = require './layouts/default'
HelloMessage = React.createClass
render: ->
<DefaultLayout title={this.props.title}>
<div>Hello {this.props.name}</div>
</DefaultLayout>
module.exports = HelloMessage
These ideas don't really apply. But since they are familiar ideas to people coming from more traditional "templating" solutions, let's address it. Most of these can be solved by packaging up another component that encapsulates that piece of functionality.
I know you're used to registering helpers with your view helper (hbs.registerHelper('something', ...))) and operating on strings. But you don't need to do that here.
require('moment') and use directly in your view. You can bundle up other helpers as you please.All "locals" are exposed to your view in this.props. These should work identically to other view engines.
Using this.props follows the pattern of passing data into a React component, which is why we do it that way.
Remember, as with other engines, rendering is synchronous. If you have database access or other async operations, they should be done in your routes.
require to access your views. This means that the plugin caches the contents for the lifetime of the server process. You need to restart your server when making changes to your views. In development, we clear your view files from the cache so you can refresh your browser to see changes.<script>s and <style>s will need to use dangerouslySetInnerHTML={{__html: 'script content'}}.<script dangerouslySetInnerHTML={{__html: """
# google analtyics
# is a common use
"""}} />
FAQs
This is an Express view engine which renders CoffeeScript React components on the server. It renders static markup and *does not* support mounting those views on the client.
The npm package express-coffee-react-views receives a total of 0 weekly downloads. As such, express-coffee-react-views popularity was classified as not popular.
We found that express-coffee-react-views demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.
Security News
The NVD is facing a significant backlog with over 12,500 CVEs awaiting analysis, and more than 50% of known exploited vulnerabilities (KEVs) left unenriched since mid-February.