Skip to content
This is an Express view engine which renders Preact components on server.
JavaScript
Branch: master
Clone or download
Eduardo Justi
Eduardo Justi Initial commit
Latest commit 6a4ec20 Sep 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Initial commit Sep 23, 2018
.eslintrc.json Initial commit Sep 23, 2018
.gitignore Initial commit Sep 23, 2018
README.md Initial commit Sep 23, 2018
index.js Initial commit Sep 23, 2018
package-lock.json Initial commit Sep 23, 2018
package.json Initial commit Sep 23, 2018

README.md

express-preact-views

This is an Express view engine forked from express-react-views which renders Preact components on server.

This is intended to be used as a replacement for existing server-side view solutions, like jade, ejs, or handlebars.

Usage

npm install express-preact-views preact

Add it to your app.

// app.js

const app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-preact-views').createEngine());

Options

option values default
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
transformViews true: use babel to apply JSX, ESNext transforms to views.
Note: if already using babel-register in your project, you should set this to false
true
babel any object containing valid Babel options
Note: does not merge with defaults
{presets: ['preact', [ 'env', {'targets': {'node': 'current'}}]]}

The defaults are sane, but just in case you want to change something, here's how it would look:

const options = { beautify: true };
app.engine('jsx', require('express-preact-views').createEngine(options));

Views

Under the hood, Babel is used to compile your views to code compatible with your current node version, using the preact and env presets by default. Only the files in your views directory (i.e. app.set('views', __dirname + '/views')) will be compiled.

Your views should be node modules that export a preact component. Let's assume you have this file in views/index.jsx:

import { h, Component } from 'preact';

class HelloMessage extends Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

export default HelloMessage;

Routes

Your routes would look identical to the default routes Express gives you out of the box.

// app.js
import index from './routes';

app.get('/', index);
// routes/index.js

export default function(req, res){
  res.render('index', { name: 'John' });
};

That's it! Layouts follow really naturally from the idea of composition.

Layouts

Simply pass the relevant props to a layout component.

views/layouts/default.jsx:

import { h, Component } from 'preact';

class DefaultLayout extends Component {
  render() {
    return (
      <html>
        <head><title>{this.props.title}</title></head>
        <body>{this.props.children}</body>
      </html>
    );
  }
}

export default DefaultLayout;

views/index.jsx:

import { h, Component } from 'preact';
import DefaultLayout from './layouts/default';

class HelloMessage extends Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <div>Hello {this.props.name}</div>
      </DefaultLayout>
    );
  }
}

export default HelloMessage;
You can’t perform that action at this time.