Express View Engine with Inferno JSX and support for KrakenJS
Install and Configuration
Install express-engine-inferno-jsx
$ npm i express-engine-inferno-jsx --save
Module express-engine-inferno-jsx
does not come with inferno packages to make sure you always can install/upgrade and use latest inferno's version.
$ npm i babel-plugin-inferno inferno inferno-component inferno-create-element inferno-dev-utils inferno-devtools --save
Configuration with Express
var express = ;var app = ; ;
That's it, you no need to do app.set('views', 'views')
and so on, attachTo
will do that for you
Kraken JS integration
You can use express-engine-inferno-jsx with KrakenJs framework (https://github.com/krakenjs/kraken-js)
example of develpment config ./config/development.json
"express": , "view engines":
example of production config ./config/production.json
"express": , "view engines":
module express-engine-inferno-jsx
has build script with method to convert JSX to Js from command line, useful for building with grunt
or your own build tools for production.
build script usage example: ./build-jsx-views.js
processenvNODE_ENV = 'production';const chalk = ;const path = ;const buildJSXView = ;// source path for JSX viewsconst devViewPath = path;// destination path for JS viewsconst productionViewPath = path; ; { console; } { console; console; errors;}
to build views for production run script : node ./build-jsx-views.js
Usage
Example of users.jsx
view file
var Layout = ; <Layout> <ul ="users"> propsusers </ul></Layout>
Example of layout.jsx
view file
<html><head> <meta ="UTF-8"/></head><body>propschildren</body></html>
Example of router
app;
Output html
MaxSergeyBob
How it works
When you render some view, this engine takes jsx
file like this
var Layout = ; <Layout> <ul ="users"> propsusers </ul></Layout>
and compiles it to js
file like this
var Inferno = ;var requireJSX = ; module { var __components; var Layout = ; __components = Inferno; return __components;};
and now this component can be rendered to html with Inferno.renderToStaticMarkup()
.
As you can see, each jsx view file returns array of components and standard html attributes are converted to inferno attributes
API
engine
var engine = ;
It's a function which takes three arguments:
path
- path to jsx filelocals
- object with properties which will be local variables in jsx filecallback
- Node style callback which will receive html string as second argument
Also it has method attachTo
which takes two arguments:
server
- Express instanceoptions
- object which will be merged to options
options
var options = ;
Object which has three properties:
-
cache
- absolute path to cache directory -
views
- absolute path to views directory -
viewCache
-true
||false
defaultfalse
-
requireAlias
- alias map for require in views{}
-
appSrc
- relative path to inferno client apps source folder'apps-inferno/src'
-
appRoot
: absolute path to inferno client app source folder__dirname + '/apps-inferno/src'
-
serverRoot
- absolute path server root folder__dirname
-
babelOptions
- object of babel tranform options, -
doctype
- string which will be prepended to output html, default value is"<!DOCTYPE html>\n"
-
template
- string wrapper of compiled jsx, default value isvar Component = ;var AppSharedData = ;var requireJSX = ;module {var __components;BODYreturn __components;};Where
BODY
will be replaced with your compiled jsx code
This options used by require
require
var requireJSX = ;
This is a function which you can use as regular require
but this one can run jsx files. It checks if path is jsx file and if it is then requireJSX
will convert this file to js file and put in cache dir and then run it.
convert
var convert = ;
It is a function which can convert jsx view files to js files. It takes only two arguments:
jsxPath
- path to jsx filejsPath
- path where js file should be saved
License
MIT, see LICENSE
file