❤
npm
Sign UpSign In

ssjsx

0.0.1 • Public • Published

ssjsx

Server Side JSX

This module enables requiring .jsx files in Node. It does this by using babel and babel-plugin-transform-react-jsx to first transform jsx into hyperscript, and then transform all h() calls in the resulting hyperscript into more efficient string concatenations.

Warning! This is a Proof of Concept

This module is still in a very early phase. Any production use should be approached with caution.

Basic Use

To be able to simply require .jsx files, you need to tell Node what to do with them. Running the following code makes you able to require('./SomeFile.jsx'):

require('ssjsx/node-require').install(options);

As you can see, you are able to pass some options. The default options are:

const defaultOptions = {
  extension: '.jsx',
  presets: [ 'es2015-node6' ],
  plugins: [
    'add-module-exports',
  ],
};

options passed to the install method are assigned/extended with defaultOptions, not (deeply) merged. If you want to add a new plugin or preset, but still use the default ones you have to explicitly send all defaults in your array.

Stateless & ES6 Components recommended

To make the the most efficient and simplest use of this library, make sure you only use stateless or ES6 class components.

For ES6 Class Modules, make sure the initial state is set in the constructor and nowhere else.

Usage With Express

server.js

'use strict';
 
// make node understand `*.jsx` files
require('ssjsx/node-require').install();
 
const chalk = require('chalk');
const express = require('express');
 
const server = express();
 
// override default response render method
server.response.render = require('./render.jsx');
 
// load routes
server.use(require('./router'));
 
// get port from env or use default
const port = process.env.PORT || 1337;
 
// start server, save reference to HTTP Server instance returned
server.http = server.listen(port, () => {
  console.info(`[${chalk.cyan('INIT')}] HTTP Server listening on port ${chalk.magenta(port)} (${chalk.yellow(server.get('env'))})`);
});
 
// export instance of server if needed by other modules
module.exports = server;

render.jsx

If all our jsx files adhere to stateless and ES6 Classes, the following code works great to override the default express rendering logic.

'use strict';
 
module.exports = function (Component, Master) {
  if (typeof Component !== 'function') throw new Error('Not a Component');
 
  const locals = Object.assign({}, this.app.locals, this.locals);
 
  if (typeof Master === 'function') {
    this.send('<!doctype html>' + (
      <Master {...locals}>
        <Component {...locals} />
      </Master>
    ));
  } else if (Component.prototype && Component.prototype.render) {
    const i = new Component(locals);
    this.send(i.render(i.props, i.state));
  } else {
    this.send(Component(this.props));
  }
};

router.js

'use strict';
 
const Contact = require('./Contact.jsx');
const Index = require('./Index.jsx');
const Master = require('./Master.jsx');
 
const router = new (require('express')).Router();
 
router.get('/', (req, res, next) => {
  res.render(Index, Master);
});
 
router.get('/contact', (req, res, next) => {
  res.render(Contact, Master);
});
 
 
module.exports = router;

TODO

  • Write tests

babel plugin

  • Escape unsafe code insert, but enable injecting of html from variables like regions
  • Use custom Component class (needs to be done in babel plugin)
  • Remove all methods on class components except constructor and render, but keep all methods used in those
  • Remove all dependencies not used in methods from above point

Readme

Keywords

none

Package Sidebar

Install

npm i ssjsx

Repository

github.com/lohfu/ssjsx

Homepage

github.com/lohfu/ssjsx#readme

Weekly Downloads

0

Version

0.0.1

License

MIT

Last publish

Collaborators

  • lohfu
Try on RunKit
Report malware