File system routes

app/create-app-template.js

@@ -16,6 +16,14 @@ const pathToId = file => {
 }
 
 module.exports = api => {
+  let entryExists = false
+  if (api.options.entry) {
+    try {
+      require.resolve(api.resolveBaseDir(api.options.entry))
+      entryExists = true
+    } catch (err) {}
+  }
+
   const enhanceAppFiles = [...api.enhanceAppFiles].map((filepath, index) => ({
     id: `${pathToId(filepath)}_${index}`,
     filepath: slash(filepath)
@@ -25,8 +33,6 @@ module.exports = api => {
   import Vue from 'vue'
   import Meta from 'vue-meta'
   import Router from 'vue-router'
-  // eslint-disable-next-line import/no-unresolved
-  import _entry from '#app-entry'
   import { getRequireDefault } from '#app/utils'
 
   Vue.config.productionTip = false
@@ -40,6 +46,10 @@ module.exports = api => {
     tagIDKeyName: 'rhid'
   })
 
+  const _entry = ${
+    entryExists ? `getRequireDefault(require('#app-entry'))` : `{}`
+  }
+
   const enhanceApp = getRequireDefault(require('#app/enhance-app'))
 
   ${[...enhanceAppFiles]
@@ -52,19 +62,13 @@ module.exports = api => {
 
   export default context => {
     const entry = typeof _entry === 'function' ? _entry() : _entry
-    let { router, extendRootOptions } = entry
     if (context) {
       context.entry = entry
     }
 
-    if (__DEV__) {
-      if (!router) {
-        throw new Error('You must export "router" in entry file!')
-      }
-    }
-
     const rootOptions = {
-      _isReamRoot: true
+      _isReamRoot: true,
+      router: entry.router
     }
     const getInitialDataContextFns = [
       entry.getInitialDataContext
@@ -75,7 +79,6 @@ module.exports = api => {
 
     const event = new Vue()
     const enhanceContext = {
-      router,
       rootOptions,
       entry,
       ssrContext: context,
@@ -90,10 +93,6 @@ module.exports = api => {
 
     enhanceApp(enhanceContext, context)
 
-    if (extendRootOptions) {
-      extendRootOptions(rootOptions)
-    }
-
     ${[...enhanceAppFiles]
       .map(file =>
         `
@@ -104,6 +103,24 @@ module.exports = api => {
       )
       .join('\n')}
 
+    if (entry.extendRootOptions) {
+      entry.extendRootOptions(rootOptions)
+    }
+
+    const { router } = rootOptions
+
+    if (__DEV__) {
+      if (!router) {
+        throw new Error(${JSON.stringify(
+          `You must ${
+            api.options.fsRoutes
+              ? `create ${api.options.fsRoutes.path}/*.vue or `
+              : ``
+          }export "router" in ${api.options.entry || `entry file`}!`
+        )})
+      }
+    }
+
     const app = new Vue(rootOptions)
 
     return {

app/enhance-app.js

@@ -58,10 +58,9 @@ const Error = {
 }
 
 export default ({ rootOptions, entry }, context) => {
-  const { router, root = Root, error = Error } = entry
+  const { root = Root, error = Error } = entry
 
   const App = {
-    router,
     dataStore: createDataStore(),
     data() {
       return {

examples/fs-routes/README.md

@@ -0,0 +1,24 @@
+# Auto generates routes
+
+## How to use
+
+```bash
+git clone https://github.com/ream/ream.git
+```
+
+Install dependencies:
+
+```bash
+cd examples/fs-routes
+yarn
+```
+
+Run it:
+
+```bash
+# Start development server
+yarn dev
+
+# Start production server
+yarn build && yarn start
+```

examples/fs-routes/package.json

@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "fs-routes",
+  "scripts": {
+    "dev": "ream dev",
+    "start": "ream start",
+    "build": "ream build"
+  },
+  "dependencies": {
+    "ream": "latest"
+  }
+}

examples/fs-routes/pages/about.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>fs-routes example app.</div>
+</template>

examples/fs-routes/pages/catalog/_item_id.vue

@@ -0,0 +1,6 @@
+<template>
+<div>
+  <h1>Item: {{ $route.params.item_id }}</h1>
+  <router-view />
+</div>
+</template>

examples/fs-routes/pages/catalog/_item_id/images.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Images</div>
+</template>

examples/fs-routes/pages/catalog/_item_id/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Info</div>
+</template>

examples/fs-routes/pages/catalog/index.vue

@@ -0,0 +1,20 @@
+<template>
+<ul>
+  <li><router-link to="/catalog/specials">Specials</router-link></li>
+  <li v-for="item in items" :key="item">
+    Item: {{ item }}
+    <router-link :to="`/catalog/${item}`">Info</router-link>
+    <router-link :to="`/catalog/${item}/images`">Images</router-link>
+  </li>
+</ul>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      items: [10, 20, 30]
+    }
+  }
+}
+</script>

examples/fs-routes/pages/catalog/specials.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Special offers!</div>
+</template>

examples/fs-routes/pages/index.vue

@@ -0,0 +1,7 @@
+<template>
+<ul>
+  <li><router-link to="/about">About</router-link></li>
+  <li><router-link to="/catalog">Catalog</router-link></li>
+  <li><router-link to="/user">User</router-link></li>
+</ul>
+</template>

examples/fs-routes/pages/user.vue

@@ -0,0 +1,9 @@
+<template>
+<div>
+  <h1>User</h1>
+  <router-link to="/user">Profile</router-link>
+  <router-link to="/user/friends">Friends</router-link>
+  <hr>
+  <router-view />
+</div>
+</template>

examples/fs-routes/pages/user/friends.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Friends</div>
+</template>

examples/fs-routes/pages/user/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Profile</div>
+</template>

lib/index.js

@@ -49,6 +49,9 @@ class Ream extends Event {
     this.options = merge(
       {
         entry: 'index.js',
+        fsRoutes: {
+          path: 'pages'
+        },
         plugins: [],
         server: {
           host: process.env.HOST || '0.0.0.0',
@@ -118,7 +121,8 @@ class Ream extends Event {
       basePlugin,
       require('./plugins/vuex'),
       require('./plugins/apollo'),
-      require('./plugins/pwa')
+      require('./plugins/pwa'),
+      require('./plugins/fs-routes')
     ]
       .concat(this.options.plugins)
       .filter(Boolean)
@@ -234,6 +238,7 @@ class Ream extends Event {
       createAppFile,
       require('../app/create-app-template')(this)
     )
+    await this.hooks.run('onPrepareFiles')
   }
 
   async getServer() {

lib/plugins/fs-routes/index.js

@@ -0,0 +1,21 @@
+const path = require('path')
+const fs = require('fs-extra')
+
+module.exports = {
+  name: 'builtin:fs-routes',
+  apply(api) {
+    if (
+      api.options.fsRoutes &&
+      fs.existsSync(api.resolveBaseDir(api.options.fsRoutes.path))
+    ) {
+      api.enhanceAppFiles.add(path.join(__dirname, 'inject.js'))
+
+      api.hooks.add('onPrepareFiles', async () => {
+        await fs.writeFile(
+          api.resolveOutDir('router.js'),
+          await require('./router-template')(api, api.options.fsRoutes.path)
+        )
+      })
+    }
+  }
+}

lib/plugins/fs-routes/inject.js

@@ -0,0 +1,7 @@
+import createRouter from '#out/router' // eslint-disable-line import/no-unresolved
+
+export default ({ rootOptions, ssrContext }) => {
+  if (rootOptions.router) return
+
+  rootOptions.router = createRouter(ssrContext)
+}