generating the js bundle and standalone bundles for each page.

extract.js

@@ -2,10 +2,24 @@ const fs = require('fs')
 const path = require('path')
 const child_process = require('child_process')
 
-const paths = require('./paths')
+function url_pathname (filepath) {
+  var target = filepath.replace(/\.\w+$/, '.html')
+
+  let basename = path.basename(target)
+  if (basename !== 'index.html') {
+    target = path.join(
+      path.dirname(target),
+      basename.split('.')[0],
+      'index.html'
+    )
+  }
+
+  let pathname = '/' + target.slice(0, -('index.html').length)
+  return pathname
+}
 
 module.exports = function (filepath) {
-  let {targetpath, pathname} = paths(filepath)
+  let pathname = url_pathname(filepath)
 
   var raw = fs.readFileSync(filepath, 'utf-8')
   var stat = fs.statSync(filepath)
@@ -18,7 +32,6 @@ module.exports = function (filepath) {
 
   var data = {
     ext: path.extname(filepath),
-    targetpath,
     filepath,
     pathname,
     raw,

index.js

@@ -11,6 +11,7 @@ const renderToString = require('react-dom/server').renderToString
 const browserify = require('browserify')
 
 const extract = require('./extract')
+const {standaloneURL} = require('./utils')
 
 const targetdir = path.join(process.cwd(), '_site')
 const defaultIgnore = [
@@ -21,8 +22,10 @@ const defaultIgnore = [
   yargs.argv.helmet,
   yargs.argv.body
 ]
+var usedComponents = []
 
 module.exports.init = function (options) {
+  // cleanup and prepare the _site directory
   options = options || {}
   rimraf.sync(path.join(targetdir, '*'))
   mkdirp.sync(targetdir)
@@ -40,16 +43,28 @@ module.exports.listFiles = function (options) {
     .map(extract)
 }
 
-module.exports.generatePage = function (targetpath, componentpath, props) {
-  console.log(`generating page at ${path.relative(process.cwd(), targetpath)} with ${componentpath} and props`)
+module.exports.generatePage = function (pathname, componentpath, props) {
+  console.log(`  > generating pages at ${pathname}`)
+  console.log(`    - component: ${componentpath}`)
+  console.log(`    - props: ${Object.keys(props)}`)
+  usedComponents.push(componentpath)
+  let targetpath = path.join(process.cwd(), '_site', pathname, 'index.html')
 
+  let staticprops = Object.assign({
+    location: {
+      pathname,
+      search: ''
+    }
+  }, props)
+
+  /* generating static HTML */
   let Helmet = require(yargs.argv.helmet)
   let Body = require(yargs.argv.body)
   let Component = require(componentpath)
 
-  let page = React.createElement(Body, props,
-    React.createElement(Helmet, props),
-    React.createElement(Component, props)
+  let page = React.createElement(Body, staticprops,
+    React.createElement(Helmet, staticprops),
+    React.createElement(Component, staticprops)
   )
 
   let output = renderToString(page)
@@ -69,6 +84,28 @@ module.exports.generatePage = function (targetpath, componentpath, props) {
 
   mkdirp.sync(path.dirname(targetpath))
   fs.writeFileSync(targetpath, html, {encoding: 'utf-8'})
+  /* --- */
+
+  /* generating standalone JS file */
+  let b = browserify(path.join(__dirname, '/templates/standalone.js'), {
+    standalone: 'doesntmatter',
+    ignoreMissing: true,
+    bundleExternal: false
+  })
+  b.exclude(componentpath)
+  b.transform(
+    path.join(__dirname, 'node_modules', 'envify'),
+    {props, componentpath}
+  )
+  let br = b.bundle()
+
+  let targetjs = path.join(targetdir, standaloneURL(pathname, true))
+  let w = fs.createWriteStream(targetjs, {encoding: 'utf-8'})
+  br.pipe(w)
+  br.on('end', () =>
+    w.end(process.exit)
+  )
+  /* --- */
 }
 
 module.exports.copyStatic = function (patterns) {
@@ -78,11 +115,50 @@ module.exports.copyStatic = function (patterns) {
     )
     .map(staticFiles =>
       staticFiles.map(filepath => {
-        console.log(`copying static file ${filepath}.`)
+        console.log(`  > copying static file ${filepath}.`)
         copy.sync(
           path.join(process.cwd(), filepath),
           path.join(process.cwd(), '_site', filepath)
         )
       })
     )
 }
+
+module.exports.end = function () {
+  console.log('generating the JS bundle that puts everything together')
+
+  let pageExternalPackages = Object.keys(
+    require(path.join(process.cwd(), 'package.json'))
+      .dependencies
+  )
+
+  let b = browserify(path.join(__dirname, '/templates/main.js'))
+  b.transform(
+    path.join(__dirname, 'node_modules', 'envify'),
+    {
+      utils: path.join(__dirname, 'utils'),
+      body: yargs.argv.body,
+      helmet: yargs.argv.helmet
+    }
+  )
+  b.require([
+    'react',
+    'react-dom',
+    'react-helmet',
+    'history',
+    'catch-links',
+    'micro-amd',
+    path.join(__dirname, 'utils')
+  ])
+  b.require(pageExternalPackages)
+  b.require(yargs.argv.helmet)
+  b.require(yargs.argv.body)
+  b.require(usedComponents)
+  let br = b.bundle()
+
+  let w = fs.createWriteStream(path.join(targetdir, 'bundle.js'), {encoding: 'utf-8'})
+  br.pipe(w)
+  br.on('end', () =>
+    w.end(process.exit)
+  )
+}

package.json

@@ -22,8 +22,12 @@
   "license": "MIT",
   "dependencies": {
     "browserify": "^14.4.0",
+    "catch-links": "^2.0.1",
     "cp-file": "^4.2.0",
+    "envify": "^4.1.0",
     "glob": "^7.1.2",
+    "history": "^4.6.3",
+    "micro-amd": "^1.2.3",
     "mkdirp": "^0.5.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",

templates/main.js

@@ -0,0 +1,73 @@
+var React = require('react')
+var render = require('react-dom').render
+var createClass = require('create-react-class')
+var createHistory = require('history').createBrowserHistory
+var amd = require('micro-amd')()
+var catchLinks = require('catch-links')
+
+const {standaloneURL} = require(process.env.utils)
+
+window.define = amd.define.bind(amd)
+window.define.amd = true
+
+const helmet = process.env.helmet
+const body = process.env.body
+
+var history = createHistory({
+  basename: ''
+})
+
+var Main = createClass({
+  displayName: 'ReactSiteMain',
+
+  getInitialState: function () {
+    return {
+      component: this.props.component,
+      props: this.props.props
+    }
+  },
+
+  componentDidMount: function () {
+    var self = this
+
+    history.listen(function (location) {
+      console.log('> navigating', location.pathname)
+      amd.require([standaloneURL(location.pathname)], function (page) {
+        var props = page.props
+        props.location = location
+
+        self.setState({
+          component: page.component,
+          props: props
+        })
+      })
+    })
+
+    catchLinks(document.body, function (href) {
+      history.push(href)
+    })
+  },
+
+  render: function () {
+    var Body = require(body)
+    var Helmet = require(helmet)
+
+    return React.createElement(Body, this.state.props,
+      React.createElement(Helmet, this.state.props),
+      React.createElement(this.state.component, this.state.props)
+    )
+  }
+})
+
+amd.require([standaloneURL(window.location.pathname)], function (page) {
+  var props = page.props
+  props.location = {
+    pathname: window.location.pathname,
+    search: ''
+  }
+
+  render(React.createElement(Main, {
+    component: page.component,
+    props: props
+  }), document.body)
+})

templates/standalone.js

@@ -0,0 +1,2 @@
+module.exports.props = process.env.props
+module.exports.component = require(process.env.componentpath)

utils.js

@@ -0,0 +1,16 @@
+module.exports.standaloneURL = standaloneURL
+
+function standaloneURL (pathname, isStatic) {
+  var url
+  if (pathname === '/') {
+    url = '/index.js'
+  } else {
+    url = pathname + pathname.split('/').slice(-2)[0] + '.js'
+  }
+
+  if (!isStatic && process.env.NODE_ENV !== 'production') {
+    url += '?t=' + Date.now()
+  }
+
+  return url
+}