Replace gulp-soynode with Metal SSR

packages/electric-base-components/src/ElectricSearchAutocomplete.js

@@ -9,14 +9,14 @@ class ElectricSearchAutocomplete extends ElectricSearchBase {
 	attached() {
 		const {element} = this;
 
-		const {input} = this.refs;
+		const {autocompleteInput} = this.refs;
 
-		if (input) {
+		if (autocompleteInput) {
 			this.autocomplete = new Autocomplete({
 				autoBestAlign: false,
 				data: this.search_.bind(this),
 				format: this.format_.bind(this),
-				inputElement: input,
+				inputElement: autocompleteInput,
 				select: ({url}) => {
 					window.location = url;
 				}

packages/electric-marble-components/src/ElectricSearchAutocomplete.soy

@@ -12,7 +12,7 @@
 					class="form-control"
 					name="q"
 					placeholder="{$placeholder ?: ''}"
-					ref="input"
+					ref="autocompleteInput"
 					required
 					type="text"
 				>

packages/electric/lib/pipelines/base_inject.js

@@ -29,17 +29,18 @@ function baseInject(options) {
 		inject(es.merge(bundleSrc, vendorSrc), {
 			addPrefix: options.basePath,
 			addRootSlash: !options.basePath,
-			ignorePath: pathDest
+			ignorePath: pathDest,
+			removeTags: true
 		}),
 		inject(gulp.src(path.join(__dirname, '../templates/metal-render.tpl')), {
+			removeTags: true,
 			starttag: '<!-- inject:metal:js -->',
 			transform: function(filePath, file) {
-				return _.template(file.contents.toString())({
-					basePath: options.basePath
-				});
+				return file.contents.toString();
 			}
 		}),
 		inject(gulp.src(path.join(__dirname, '../templates/vendor.tpl')), {
+			removeTags: true,
 			starttag: '<!-- inject:vendor:js -->',
 			transform: function(filePath, file) {
 				const data = {

packages/electric/lib/pipelines/bundle.js

@@ -20,7 +20,7 @@ function bundle(options) {
 			}
 
 			if (file.isBuffer()) {
-				const name = path.basename(file.path, path.extname(file.path));
+				const name = require(file.path).default.name;
 
 				entries[name] = file.path;
 			}
@@ -56,14 +56,6 @@ function bundle(options) {
 							{
 								loader: path.join(__dirname, '../loader.js'),
 								test: /\.soy$/
-							},
-							{
-								exclude: [/node_modules/, /\.soy.js$/],
-								loader: require.resolve('babel-loader'),
-								options: {
-									presets: [require.resolve('babel-preset-metal')]
-								},
-								test: /\.js$/
 							}
 						]
 					},

packages/electric/lib/tasks/build.js

@@ -13,7 +13,7 @@ module.exports = function(options) {
 	});
 
 	gulp.task(taskPrefix + 'build', function(cb) {
-		const compileTasks = [taskPrefix + 'soyweb'];
+		const compileTasks = [];
 
 		if (!options.skipBundle) {
 			compileTasks.push(taskPrefix + 'metal');

packages/electric/lib/tasks/metal.js

@@ -1,14 +1,22 @@
 'use strict';
 
 const _ = require('lodash');
+const babel = require('gulp-babel');
 const compileSoy = require('metal-tools-soy/lib/pipelines/compileSoy');
 const data = require('gulp-data');
 const filter = require('gulp-filter');
 const frontMatter = require('gulp-front-matter');
 const fs = require('fs-extra');
 const globby = require('globby');
 const path = require('path');
+const {Component} = require('metal-component');
 
+// Instantiate jsdom globals
+// Note: this can be removed once the Marble components have been
+// updated to work with SSR
+require('jsdom-global')();
+
+const baseInject = require('../pipelines/base_inject');
 const bundle = require('../pipelines/bundle');
 const getTemplate = require('../get_template');
 const handleError = require('../handle_error');
@@ -34,13 +42,26 @@ module.exports = function(options) {
 	gulp.task(taskPrefix + 'metal', function(cb) {
 		runSequence(
 			[taskPrefix + 'metal:prep:partials', taskPrefix + 'metal:prep:layouts'],
+			taskPrefix + 'metal:prep:base-layout',
 			taskPrefix + 'metal:prep:pages',
 			taskPrefix + 'metal:prep:page-components',
-			taskPrefix + 'metal:render:globals',
+			taskPrefix + 'metal:render:soy',
+			taskPrefix + 'metal:prep:transpile',
+			taskPrefix + 'metal:render:bundles',
+			taskPrefix + 'metal:render:html',
 			cb
 		);
 	});
 
+	gulp.task(taskPrefix + 'metal:prep:base-layout', function() {
+		return gulp
+			.src(path.join(pathSrc, 'layouts/base.tpl'), {
+				base: pathSrc
+			})
+			.pipe(baseInject(options))
+			.pipe(gulp.dest(TEMP_DIR_SITE));
+	});
+
 	gulp.task(taskPrefix + 'metal:prep:page-components', function() {
 		return gulp
 			.src(path.join(pathSrc, 'pages/**/*.js'), {
@@ -110,7 +131,7 @@ module.exports = function(options) {
 					const componentPath = path.join(
 						TEMP_DIR_SITE,
 						path.dirname(filePath),
-						namespace + '.js'
+						path.basename(filePath, path.extname(filePath)) + '.js'
 					);
 
 					fs.outputFileSync(componentPath, componentContents);
@@ -144,9 +165,16 @@ module.exports = function(options) {
 			.pipe(gulp.dest(TEMP_DIR_SITE));
 	});
 
+	gulp.task(taskPrefix + 'metal:prep:transpile', function() {
+		return gulp.src(path.join(TEMP_DIR_SITE, '**/*.js'))
+			.pipe(babel({
+				presets: [require('babel-preset-env')]
+			}))
+			.pipe(gulp.dest(TEMP_DIR_SITE));
+	});
+
 	gulp.task(
-		taskPrefix + 'metal:render:globals',
-		[taskPrefix + 'metal:render:soy'],
+		taskPrefix + 'metal:render:bundles',
 		function() {
 			return gulp
 				.src([
@@ -164,6 +192,51 @@ module.exports = function(options) {
 		}
 	);
 
+	gulp.task(
+		taskPrefix + 'metal:render:html',
+		function() {
+			const baseTemplate = _.template(fs.readFileSync(path.join(TEMP_DIR_SITE, 'layouts/base.tpl')));
+			const siteData = util.getSiteData(pathDest);
+
+			return gulp
+				.src([
+					path.join(TEMP_DIR_SITE, 'pages/**/*.js'),
+					'!' + path.join(TEMP_DIR_SITE, '**/*.soy.js')
+				], {
+					read: false
+				})
+				.pipe(
+					data(function(file) {
+						const component = require(file.path);
+						const data = getPageData(file, siteData);
+
+						data.page.componentName = component.default.name;
+
+						const content = Component.renderToString(component.default, {
+							page: data.page,
+							pageLocation: data.pageLocation,
+							site: data.site
+						});
+
+						file.contents = new Buffer(
+							baseTemplate({
+								basePath: options.basePath,
+								content: content,
+								page: data.page,
+								serialized: data.serialized,
+								site: data.site
+							})
+						);
+
+						file.path = file.path.replace(path.extname(file.path), '.html');
+
+						return file;
+					})
+				)
+				.pipe(gulp.dest(pathDest));
+		}
+	);
+
 	gulp.task(taskPrefix + 'metal:render:soy', function() {
 		let soyDeps = ['node_modules/+(metal)*/src/**/*.soy'];
 
@@ -183,4 +256,27 @@ module.exports = function(options) {
 			)
 			.pipe(gulp.dest(TEMP_DIR_SITE));
 	});
+
+	function getPageData(file, siteData) {
+		siteData = _.cloneDeep(siteData);
+
+		const url = util.getPageURL(file.path, path.join(TEMP_DIR_SITE, 'pages'));
+
+		util.setActive(siteData.index, url);
+		util.configureTopbar(siteData);
+
+		const page = _.omit(util.getPageByURL(siteData.index, url), ['content']);
+
+		const pageLocation = util.getTreeLocation(page.srcFilePath);
+
+		return {
+			page: page,
+			pageLocation: pageLocation,
+			serialized: JSON.stringify({
+				pageLocation: pageLocation,
+				site: siteData
+			}),
+			site: siteData
+		};
+	}
 };

packages/electric/lib/templates/metal-render.tpl

@@ -1,41 +1,41 @@
 <div id="pageComponent">
-	{$content}
+	<%= content %>
 </div>
 
-{if $page.componentName}
-	<script src="${basePath}/js/bundles/{$page.componentName}.js"></script>
-{/if}
+<% if (page.componentName) { %>
+	<script src="<%= basePath %>/js/bundles/<%= page.componentName %>.js"></script>
+<% } %>
 
 <script>
-	var data = JSON.parse({$serialized});
+	var data = JSON.parse(`<%= serialized %>`);
 
-	if (window.electricPageComponent) {lb}
+	if (window.electricPageComponent) {
 		window.electricPageComponent.dispose();
-	{rb}
+	}
 
-	var getByPath = function(obj, path) {lb}
+	var getByPath = function(obj, path) {
 		path = path.split('.');
 
-		for (var i = 0; i < path.length; i++) {lb}
+		for (var i = 0; i < path.length; i++) {
 			obj = obj[path[i]];
-		{rb};
+		};
 
 		return obj;
-	{rb};
+	};
 
-	if (window.pageComponent) {lb}
+	if (window.pageComponent) {
 		var page = getByPath(data.site, data.pageLocation);
 
-		if (page) {lb}
-			window.electricPageComponent = pageComponent.default.render(pageComponent.default, {lb}
+		if (page) {
+			window.electricPageComponent = pageComponent.default.render(pageComponent.default, {
 				element: '#pageComponent > *',
 				page: page,
 				site: data.site
-			{rb});
-		{rb}
+			});
+		}
 
-		if (window.runCodeMirror) {lb}
+		if (window.runCodeMirror) {
 			runCodeMirror();
-		{rb}
-	{rb}
+		}
+	}
 </script>

packages/electric/lib/templates/vendor.tpl

@@ -12,55 +12,55 @@
 
 		var REGEX_RB = /}/g;
 
-		function runCodeMirror() {lb}
+		function runCodeMirror() {
 			var code = document.querySelectorAll('.code');
 
-			for (var i = 0; i < code.length; i++) {lb}
+			for (var i = 0; i < code.length; i++) {
 				// Workaround for soy issue where namespace and template tags are
 				// rendered inside literal blocks
 				var text = code[i].innerText
-					.replace(REGEX_LB, '{lb}')
-					.replace(REGEX_RB, '{rb}');
+					.replace(REGEX_LB, '{')
+					.replace(REGEX_RB, '}');
 
-				var editor = CodeMirror(function(elt) {lb}
+				var editor = CodeMirror(function(elt) {
 					var preEl = code[i].parentNode;
 
 					preEl.parentNode.appendChild(elt);
-				{rb}, {lb}
+				}, {
 					mode: code[i].getAttribute('data-mode') || '',
 					value: text
-				{rb});
-			{rb}
+				});
+			}
 
-			if (window.ElectricCodeTabs) {lb}
+			if (window.ElectricCodeTabs) {
 				new window.ElectricCodeTabs();
-			{rb}
-		{rb}
+			}
+		}
 
 		runCodeMirror();
 	<% } %>
 
-	function runGoogleAnalytics(path) {lb}
-		if (typeof ga === 'function') {lb}
+	function runGoogleAnalytics(path) {
+		if (typeof ga === 'function') {
 			ga('set', 'page', path);
 			ga('send', 'pageview');
-		{rb}
-	{rb}
+		}
+	}
 
-	document.addEventListener('DOMContentLoaded', function() {lb}
-		if (typeof senna !== 'undefined') {lb}
+	document.addEventListener('DOMContentLoaded', function() {
+		if (typeof senna !== 'undefined') {
 			var app = senna.dataAttributeHandler.getApp();
-			app.on('endNavigate', function(event) {lb}
+			app.on('endNavigate', function(event) {
 				runGoogleAnalytics(event.path);
-			{rb});
-		{rb}
-	{rb});
+			});
+		}
+	});
 
-	<% if (googleAnalytics) { %>
-		(function(i,s,o,g,r,a,m){lb}i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){lb}
-		(i[r].q=i[r].q||[]).push(arguments){rb},i[r].l=1*new Date();a=s.createElement(o),
+	<% if (false) { %>
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-		{rb})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
 		ga('create', '<%= googleAnalytics %>', 'auto');
 		ga('send', 'pageview');