bundle server code

.eslintignore

@@ -1,3 +1,3 @@
 server/components
 server/routes
-shared/routes/Repl/examples.js
+universal/routes/Repl/examples.js

.gitignore

@@ -11,7 +11,7 @@ public/blog
 public/codemirror*
 public/rollup.browser.js
 public/svelte*
-shared/components/guide-summary.json
-shared/routes/Repl/examples.js
+universal/components/guide-summary.json
+universal/routes/Repl/examples.js
 server/components
 server/routes

client/rollup.config.codemirror.js

@@ -2,7 +2,7 @@ import nodeResolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import uglify from 'rollup-plugin-uglify';
 
-const dev = !!process.env.DEV;
+const dev = !!process.env.ROLLUP_WATCH;
 
 export default {
 	entry: 'client/src/codemirror.js',

client/rollup.config.js

@@ -10,10 +10,10 @@ import uglify from 'rollup-plugin-uglify';
 import buble from 'rollup-plugin-buble';
 const CleanCSS = require( 'clean-css' );
 
-const dev = !!process.env.DEV;
+const dev = !!process.env.ROLLUP_WATCH;
 const root = path.resolve( '.' );
 
-console.log( `creating ${dev ? 'development' : 'production'} bundle` );
+console.log( `creating ${dev ? 'development' : 'production'} client bundle` );
 
 export default {
 	entry: 'client/src/main.js',
@@ -25,7 +25,7 @@ export default {
 		commonjs(),
 		svelte({
 			css ( css ) {
-				let styles = fs.readFileSync( `${root}/server/templates/main.css`, 'utf-8' )
+				let styles = fs.readFileSync( `${root}/templates/main.css`, 'utf-8' )
 					.replace( '__components__', css );
 
 				if ( dev ) {

client/src/main.js

@@ -1,10 +1,10 @@
 import roadtrip from 'roadtrip';
-import Index from '../../shared/routes/Index.html';
-import BlogIndex from '../../shared/routes/BlogIndex.html';
-import BlogPost from '../../shared/routes/BlogPost.html';
-import Guide from '../../shared/routes/Guide.html';
-import Repl from '../../shared/routes/Repl/index.html';
-import Nav from '../../shared/components/Nav.html';
+import Index from '../../universal/routes/Index.html';
+import BlogIndex from '../../universal/routes/BlogIndex.html';
+import BlogPost from '../../universal/routes/BlogPost.html';
+import Guide from '../../universal/routes/Guide.html';
+import Repl from '../../universal/routes/Repl/index.html';
+import Nav from '../../universal/components/Nav.html';
 import * as store from './store.js';
 
 const header = document.querySelector( 'header' );

package.json

@@ -3,10 +3,10 @@
   "version": "1.0.0",
   "description": "Docs and examples for Svelte",
   "scripts": {
-    "start": "node server",
+    "start": "node server/dist",
     "bundle": "rollup -c",
     "prebundle": "rm -rf client/dist && mkdir -p client/dist && rm -rf service-worker/dist && mkdir -p service-worker/dist",
-    "dev": "export DEV=true && rollup -c -w & node scripts/prep && node server",
+    "dev": "rollup -c -w & node scripts/prep && npm start",
     "prep": "npm run zip && node scripts/prep && npm run bundle",
     "zip": "sh scripts/zip.sh",
     "prestage": "npm run prep",
@@ -33,11 +33,9 @@
   "devDependencies": {
     "chalk": "^1.1.3",
     "clean-css": "^4.0.12",
-    "compression": "^1.6.2",
     "eslint": "^4.0.0",
     "eslint-plugin-html": "^3.0.0",
     "eslint-plugin-import": "^2.2.0",
-    "express": "^4.15.2",
     "glob": "^7.1.1",
     "highlight.js": "^9.11.0",
     "html-entities": "^1.2.1",
@@ -50,19 +48,21 @@
     "rollup-plugin-json": "^2.1.1",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^1.1.1",
-    "rollup-plugin-svelte": "^2.0.0",
+    "rollup-plugin-svelte": "^2.0.1",
     "rollup-plugin-uglify": "^2.0.1",
     "rollup-watch": "^4.0.0",
     "uglify-js": "^3.0.0"
   },
   "dependencies": {
     "codemirror": "^5.25.2",
     "curl-amd": "^0.8.12",
+    "compression": "^1.6.2",
+    "express": "^4.15.2",
     "file-saver": "^1.3.3",
     "jszip": "^3.1.3",
     "locate-character": "^2.0.0",
     "roadtrip": "^0.5.1",
-    "rollup": "^0.42.0",
+    "rollup": "^0.43.0",
     "sourcemap-codec": "^1.3.1",
     "svelte": "^1.21.0"
   },

rollup.config.js

@@ -1,9 +1,11 @@
 import client from './client/rollup.config.js';
 import codemirror from './client/rollup.config.codemirror.js';
 import serviceWorker from './service-worker/rollup.config.js';
+import server from './server/rollup.config.js';
 
 export default [
 	client,
 	codemirror,
-	serviceWorker
+	serviceWorker,
+	server
 ];

scripts/prep/build-examples.js

@@ -53,7 +53,7 @@ manifest.forEach( group => {
 	});
 });
 
-fs.writeFileSync( `${root}/shared/routes/Repl/examples.js`, `
+fs.writeFileSync( `${root}/universal/routes/Repl/examples.js`, `
 // this file is auto-generated, don't edit it
 export const exampleGroups = ${JSON.stringify( summary )};
 export const redirects = ${JSON.stringify( redirects )};

scripts/prep/build-guide.js

@@ -132,4 +132,4 @@ const sections = fs.readdirSync( `${root}/guide` )
 	});
 
 fs.writeFileSync( `${root}/public/guide.json`, JSON.stringify( sections ) );
-fs.writeFileSync( `${root}/shared/components/guide-summary.json`, JSON.stringify( sections ) );
+fs.writeFileSync( `${root}/universal/components/guide-summary.json`, JSON.stringify( sections ) );

scripts/prep/index.js

@@ -1,4 +1,3 @@
-require( './build-components.js' );
 require( './build-examples.js' );
 require( './build-repl.js' );
 require( './build-blog.js' );

server/rollup.config.js

@@ -0,0 +1,25 @@
+import json from 'rollup-plugin-json';
+import svelte from 'rollup-plugin-svelte';
+import replace from 'rollup-plugin-replace';
+import pkg from '../package.json';
+
+const dev = !!process.env.ROLLUP_WATCH;
+
+export default {
+	entry: 'server/src/index.js',
+	dest: 'server/dist/index.js',
+	format: 'cjs',
+	external: Object.keys(pkg.dependencies).concat([
+		'path', 'fs'	
+	]),
+	plugins: [
+		json(),
+		svelte({
+			generate: 'ssr',
+			css: false
+		}),
+		replace({
+			__dev__: !!dev
+		})
+	]
+};

server/index.js → server/src/index.js

@@ -1,53 +1,28 @@
-const path = require( 'path' );
-const express = require( 'express' );
-const compression = require( 'compression' );
-const servePage = require( './servePage.js' );
+import path from 'path';
+import express from 'express';
+import compression from 'compression';
+import servePage from './servePage.js';
+
+import Nav from '../../universal/components/Nav.html';
+import Index from '../../universal/routes/Index.html';
+import BlogIndex from '../../universal/routes/BlogIndex.html';
+import BlogPost from '../../universal/routes/BlogPost.html';
+import Guide from '../../universal/routes/Guide.html';
+import Repl from '../../universal/routes/Repl/index.html';
 
 const dev = !!process.env.DEV;
 
 const app = express();
 
-const root = path.resolve( __dirname, '..' );
+const root = path.resolve( '.' );
 
 app.use( compression({ threshold: 0 }) );
 
-function renderComponent ( file, data ) {
-	if ( dev ) {
-		const rollup = require( 'rollup' );
-		const json = require( 'rollup-plugin-json' );
-		const svelte = require( 'rollup-plugin-svelte' );
-		const resolve = require( 'rollup-plugin-node-resolve' );
-
-		return rollup.rollup({
-			entry: `${root}/shared/${file}.html`,
-			plugins: [
-				resolve(),
-				json(),
-				svelte({
-					generate: 'ssr',
-					css: false
-				})
-			]
-		}).then( bundle => {
-			const { code } = bundle.generate({
-				format: 'iife',
-				moduleName: 'SvelteComponent'
-			});
-
-			const SvelteComponent = eval( `(function () { ${code}; return SvelteComponent; })()` );
-
-			return SvelteComponent.render( data );
-		});
-	}
-
-	return require( `./${file}.js` ).render( data );
-}
-
 app.get( '/', ( req, res ) => {
 	servePage( res, {
 		title: 'Svelte • The magical disappearing UI framework',
-		nav: renderComponent( 'components/Nav', { route: 'index' }),
-		route: renderComponent( 'routes/Index' )
+		nav: Nav.render({ route: 'index' }),
+		route: Index.render()
 	}).catch( err => {
 		console.log( err.stack ); // eslint-disable-line no-console
 	});
@@ -66,8 +41,8 @@ app.get( '/blog', ( req, res ) => {
 
 	servePage( res, {
 		title: 'Svelte • The magical disappearing UI framework',
-		nav: renderComponent( 'components/Nav', { route: 'blog' }),
-		route: renderComponent( 'routes/BlogIndex', { posts })
+		nav: Nav.render({ route: 'blog' }),
+		route: BlogIndex.render({ posts })
 	}).catch( err => {
 		console.log( err.stack ); // eslint-disable-line no-console
 	});
@@ -89,8 +64,8 @@ app.get( '/blog/:slug', ( req, res ) => {
 
 	servePage( res, {
 		title: `${post.metadata.title} • Svelte`,
-		nav: renderComponent( 'components/Nav', { route: 'blog' }),
-		route: renderComponent( 'routes/BlogPost', { post })
+		nav: Nav.render({ route: 'blog' }),
+		route: BlogPost.render({ post })
 	}).catch( err => {
 		console.log( err.stack ); // eslint-disable-line no-console
 	});
@@ -101,8 +76,8 @@ app.get( '/guide', ( req, res ) => {
 
 	servePage( res, {
 		title: 'Learn Svelte',
-		nav: renderComponent( 'components/Nav', { route: 'guide' }),
-		route: renderComponent( 'routes/Guide', { sections })
+		nav: Nav.render({ route: 'guide' }),
+		route: Guide.render({ sections })
 	}).catch( err => {
 		console.log( err.stack ); // eslint-disable-line no-console
 	});
@@ -111,8 +86,8 @@ app.get( '/guide', ( req, res ) => {
 app.get( '/repl', ( req, res ) => {
 	servePage( res, {
 		title: 'Svelte REPL',
-		nav: renderComponent( 'components/Nav', { route: 'repl' }),
-		route: renderComponent( 'routes/Repl/index' ) // TODO is there any point? just render an empty box instead?
+		nav: Nav.render({ route: 'repl' }),
+		route: Repl.render() // TODO is there any point? just render an empty box instead?
 	}).catch( err => {
 		console.log( err.stack ); // eslint-disable-line no-console
 	});

server/servePage.js → server/src/servePage.js

@@ -1,18 +1,16 @@
-const fs = require( 'fs' );
-
-const dev = process.env.DEV;
+import fs from 'fs';
 
 // TODO this is unfortunate... would be nice to have a neater solution
-const hashed = dev ? {
+const hashed = __dev__ ? {
 	bundle: '/bundle.js',
 	css: '/main.css'
 } : {
-	bundle: require( './manifests/bundle.json' )[ 'bundle.js' ].replace( 'client/dist', '' ),
-	css: require( './manifests/css.json' )[ 'main.css' ].replace( 'client/dist', '' )
+	bundle: require( '../manifests/bundle.json' )[ 'bundle.js' ].replace( 'client/dist', '' ),
+	css: require( '../manifests/css.json' )[ 'main.css' ].replace( 'client/dist', '' )
 };
 
-let template = fs.readFileSync( `${__dirname}/templates/index.html`, 'utf-8' );
-if ( !dev ) {
+let template = fs.readFileSync( `templates/index.html`, 'utf-8' );
+if ( !__dev__ ) {
 	// TODO come up with a better approach than this massive hack...
 	template = template
 		.replace( '/bundle.js', hashed.bundle )
@@ -52,7 +50,7 @@ const preload = [
 	`</fonts/roboto-regular.woff2>; rel=preload; as=font; type='font/woff2'`
 ].join( ', ' );
 
-module.exports = function servePage ( res, data ) {
+export default function servePage ( res, data ) {
 	res.writeHead( 200, {
 		'Content-Type': 'text/html',
 		Link: preload
@@ -76,4 +74,4 @@ module.exports = function servePage ( res, data ) {
 	return promise.then( () => {
 		res.end();
 	});
-};
+}

service-worker/rollup.config.js

@@ -3,7 +3,7 @@ import buble from 'rollup-plugin-buble';
 import uglify from 'rollup-plugin-uglify';
 import glob from 'glob';
 
-const dev = !!process.env.DEV;
+const dev = !!process.env.ROLLUP_WATCH;
 
 console.log( `creating ${dev ? 'development' : 'production'} service worker` );