Permalink
Browse files

Replace gulp-soynode with Metal SSR

  • Loading branch information...
Robert-Frampton Robert-Frampton
Robert-Frampton authored and Robert-Frampton committed Feb 15, 2018
1 parent 2e56bf5 commit 0f41ccafebad17a2a27face6f03460e4d264e52e
@@ -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;
}
@@ -12,7 +12,7 @@
class="form-control"
name="q"
placeholder="{$placeholder ?: ''}"
ref="input"
ref="autocompleteInput"
required
type="text"
>
@@ -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 = {
@@ -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$/
}
]
},
@@ -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');
@@ -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
};
}
};
@@ -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>

This file was deleted.

Oops, something went wrong.
@@ -12,55 +12,55 @@
var REGEX_RB = /&#125;/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');
Oops, something went wrong.

0 comments on commit 0f41cca

Please sign in to comment.