expressjs · Reshav-Paul · Oct 4, 2020 · Oct 4, 2020 · Oct 4, 2020 · Oct 4, 2020
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ This generator can also be further configured with the following command line fl
  --pug add pug engine support
  --hbs add handlebars engine support
  -H, --hogan add hogan.js engine support
- -v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+ -v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash|jsx) (defaults to jade)
  --no-view use static html instead of view engine
  -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
  --git add .gitignore

diff --git a/bin/express-cli.js b/bin/express-cli.js
@@ -52,7 +52,7 @@ program
  .option(' --pug', 'add pug engine support', renamedOption('--pug', '--view=pug'))
  .option(' --hbs', 'add handlebars engine support', renamedOption('--hbs', '--view=hbs'))
  .option('-H, --hogan', 'add hogan.js engine support', renamedOption('--hogan', '--view=hogan'))
- .option('-v, --view <engine>', 'add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)')
+ .option('-v, --view <engine>', 'add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash|jsx) (defaults to jade)')
  .option(' --no-view', 'use static html instead of view engine')
  .option('-c, --css <engine>', 'add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)')
  .option(' --git', 'add .gitignore')
@@ -238,6 +238,9 @@ function createApplication (name, dir) {
  case 'vash':
  copyTemplateMulti('views', dir + '/views', '*.vash')
  break
+ case 'jsx':
+ copyTemplateMulti('views', dir + '/views', '*.jsx')
+ break
  }
  } else {
  // Copy extra public files
@@ -314,6 +317,15 @@ function createApplication (name, dir) {
  app.locals.view = { engine: 'vash' }
  pkg.dependencies.vash = '~0.12.6'
  break
+ case 'jsx':
+ app.locals.view = {
+ engine: 'jsx',
+ render: "require('express-react-views').createEngine()"
+ }
+ pkg.dependencies['express-react-views'] = '^0.11.0'
+ pkg.dependencies.react = '^16.13.1'
+ pkg.dependencies['react-dom'] = '^16.13.1'
+ break
  default:
  app.locals.view = false
  break

diff --git a/templates/views/error.jsx b/templates/views/error.jsx
@@ -0,0 +1,14 @@
+var React = require('react');
+var Layout = require('./layout');
+
+function Index(props) {
+ return (
+ <Layout>
+ <h1>{props.message}</h1>
+ <h2>{props.error.status}</h2>
+ <pre>{props.error.stack}</pre>
+ </Layout>
+ );
+}
+
+module.exports = Index;
diff --git a/templates/views/index.jsx b/templates/views/index.jsx
@@ -0,0 +1,13 @@
+var React = require('react');
+var Layout = require('./layout');
+
+function Index(props) {
+ return (
+ <Layout title={props.title}>
+ <h1>{props.title}</h1>
+ <p>Welcome to {props.title}</p>
+ </Layout>
+ );
+}
+
+module.exports = Index;
diff --git a/templates/views/layout.jsx b/templates/views/layout.jsx
@@ -0,0 +1,14 @@
+var React = require('react');
+
+function Layout(props) {
+ return (
+ <html>
+ <head>
+ <title>{props.title}</title>
+ </head>
+ <body>{props.children}</body>
+ </html>
+ );
+}
+
+module.exports = Layout;
diff --git a/test/cmd.js b/test/cmd.js
@@ -1133,6 +1133,73 @@ describe('express(1)', function () {
  })
  })
  })
+
+ describe('jsx', function () {
+ var ctx = setupTestEnvironment(this.fullTitle())
+
+ it('should create basic app with jsx templates', function (done) {
+ run(ctx.dir, ['--view', 'jsx'], function (err, stdout) {
+ if (err) return done(err)
+ ctx.files = utils.parseCreatedFiles(stdout, ctx.dir)
+ assert.strictEqual(ctx.files.length, 16)
+ done()
+ })
+ })
+
+ it('should have basic files', function () {
+ assert.notStrictEqual(ctx.files.indexOf('bin/www'), -1)
+ assert.notStrictEqual(ctx.files.indexOf('app.js'), -1)
+ assert.notStrictEqual(ctx.files.indexOf('package.json'), -1)
+ })
+
+ it('should have express-react-views, react, react-dom in package dependencies', function () {
+ var file = path.resolve(ctx.dir, 'package.json')
+ var contents = fs.readFileSync(file, 'utf8')
+ var dependencies = JSON.parse(contents).dependencies
+ assert.ok(typeof dependencies['express-react-views'] === 'string')
+ assert.ok(typeof dependencies.react === 'string')
+ assert.ok(typeof dependencies['react-dom'] === 'string')
+ })
+
+ it('should have jsx templates', function () {
+ assert.notStrictEqual(ctx.files.indexOf('views/error.jsx'), -1)
+ assert.notStrictEqual(ctx.files.indexOf('views/index.jsx'), -1)
+ assert.notStrictEqual(ctx.files.indexOf('views/layout.jsx'), -1)
+ })
+
+ it('should have installable dependencies', function (done) {
+ this.timeout(NPM_INSTALL_TIMEOUT)
+ npmInstall(ctx.dir, done)
+ })
+
+ describe('npm start', function () {
+ before('start app', function () {
+ this.app = new AppRunner(ctx.dir)
+ })
+
+ after('stop app', function (done) {
+ this.timeout(APP_START_STOP_TIMEOUT)
+ this.app.stop(done)
+ })
+
+ it('should start app', function (done) {
+ this.timeout(APP_START_STOP_TIMEOUT)
+ this.app.start(done)
+ })
+
+ it('should respond to HTTP request', function (done) {
+ request(this.app)
+ .get('/')
+ .expect(200, /<title>Express<\/title>/, done)
+ })
+
+ it('should generate a 404 (not found)', function (done) {
+ request(this.app)
+ .get('/does_not_exist')
+ .expect(404, /<h1>Not Found<\/h1>/, done)
+ })
+ })
+ })
  })
 })