Merge pull request #1368 from whtsky/glob-js

Support write layouts and components in `.js` files

lib/builder/builder.js

@@ -161,14 +161,18 @@ export default class Builder extends Tapable {
 
     // -- Layouts --
     if (fs.existsSync(resolve(this.options.srcDir, 'layouts'))) {
-      const layoutsFiles = await glob('layouts/*.vue', { cwd: this.options.srcDir })
+      const layoutsFiles = await glob('layouts/*.{vue,js}', { cwd: this.options.srcDir })
+      let hasErrorLayout = false
       layoutsFiles.forEach((file) => {
-        let name = file.split('/').slice(-1)[0].replace('.vue', '')
-        if (name === 'error') return
+        let name = file.split('/').slice(-1)[0].replace(/\.(js|vue)$/, '')
+        if (name === 'error') {
+          hasErrorLayout = true
+          return
+        }
         templateVars.layouts[name] = this.relativeToBuild(this.options.srcDir, file)
       })
-      if (layoutsFiles.includes('layouts/error.vue') && !templateVars.components.ErrorPage) {
-        templateVars.components.ErrorPage = this.relativeToBuild(this.options.srcDir, 'layouts/error.vue')
+      if (!templateVars.components.ErrorPage && hasErrorLayout) {
+        templateVars.components.ErrorPage = this.relativeToBuild(this.options.srcDir, 'layouts/error')
       }
     }
     // If no default layout, create its folder and add the default folder
@@ -183,7 +187,7 @@ export default class Builder extends Tapable {
     // If user defined a custom method to create routes
     if (this._nuxtPages) {
       // Use nuxt.js createRoutes bases on pages/
-      const files = await glob('pages/**/*.vue', { cwd: this.options.srcDir })
+      const files = await glob('pages/**/*.{vue,js}', { cwd: this.options.srcDir })
       templateVars.router.routes = createRoutes(files, this.options.srcDir)
     } else {
       templateVars.router.routes = this.options.build.createRoutes(this.options.srcDir)
@@ -431,13 +435,13 @@ export default class Builder extends Tapable {
       r(this.options.srcDir, 'layouts'),
       r(this.options.srcDir, 'store'),
       r(this.options.srcDir, 'middleware'),
-      r(this.options.srcDir, 'layouts/*.vue'),
-      r(this.options.srcDir, 'layouts/**/*.vue')
+      r(this.options.srcDir, 'layouts/*.{vue,js}'),
+      r(this.options.srcDir, 'layouts/**/*.{vue,js}')
     ]
     if (this._nuxtPages) {
       patterns.push(r(this.options.srcDir, 'pages'))
-      patterns.push(r(this.options.srcDir, 'pages/*.vue'))
-      patterns.push(r(this.options.srcDir, 'pages/**/*.vue'))
+      patterns.push(r(this.options.srcDir, 'pages/*.{vue,js}'))
+      patterns.push(r(this.options.srcDir, 'pages/**/*.{vue,js}'))
     }
     const options = Object.assign({}, this.options.watchers.chokidar, {
       ignoreInitial: true

lib/common/utils.js

@@ -186,7 +186,7 @@ export function cleanChildrenRoutes (routes, isChild = false) {
 export function createRoutes (files, srcDir) {
   let routes = []
   files.forEach((file) => {
-    let keys = file.replace(/^pages/, '').replace(/\.vue$/, '').replace(/\/{2,}/g, '/').split('/').slice(1)
+    let keys = file.replace(/^pages/, '').replace(/\.(vue|js)$/, '').replace(/\/{2,}/g, '/').split('/').slice(1)
     let route = { name: '', path: '', component: r(srcDir, file) }
     let parent = routes
     keys.forEach((key, i) => {

test/basic.test.js

@@ -26,6 +26,11 @@ test('/stateless', async t => {
   t.true(html.includes('<h1>My component!</h1>'))
 })
 
+test('/jsfile', async t => {
+  const { html } = await nuxt.renderRoute('/jsfile')
+  t.true(html.includes('<span>support js pages</span>'))
+})
+
 /*
 ** Example of testing via dom checking
 */

test/fixtures/basic/pages/jsfile.js

@@ -0,0 +1,5 @@
+export default {
+  render (h) {
+    return h('span', ['support js pages'])
+  }
+}

test/fixtures/with-config/layouts/js.js

@@ -0,0 +1,10 @@
+export default {
+  render () {
+    return (
+      <div>
+        <h1>JS layout</h1>
+        <nuxt/>
+      </div>
+    )
+  }
+}

test/fixtures/with-config/pages/js.js

@@ -0,0 +1,11 @@
+export default {
+  layout: 'js',
+  render () {
+    return (
+      <div>
+        <h1>About JS page</h1>
+        <nuxt-link to="/">Home page</nuxt-link>
+      </div>
+    )
+  }
+}

test/with-config.test.js

@@ -57,6 +57,14 @@ test('/test/about (custom layout)', async t => {
   t.true(html.includes('<h1>About page</h1>'))
 })
 
+test('/test/js (custom js layout)', async t => {
+  const window = await nuxt.renderAndGetWindow(url('/test/js'))
+  const html = window.document.body.innerHTML
+  t.is(window.__NUXT__.layout, 'js')
+  t.true(html.includes('<h1>JS layout</h1>'))
+  t.true(html.includes('<h1>About JS page</h1>'))
+})
+
 test('/test/env', async t => {
   const window = await nuxt.renderAndGetWindow(url('/test/env'))
   const html = window.document.body.innerHTML
@@ -87,7 +95,7 @@ test('/test/about-bis (added with extendRoutes)', async t => {
 
 test('Check stats.json generated by build.analyze', t => {
   const stats = require(resolve(__dirname, 'fixtures/with-config/.nuxt/dist/stats.json'))
-  t.is(stats.assets.length, 27)
+  t.is(stats.assets.length, 31)
 })
 
 test('Check /test.txt with custom serve-static options', async t => {