gia-cli/templates/atom/root/gobblefile.js

Guardian US Interactive CLI tool

/*global require, module */
const path = require( 'path' );
const gobble = require( 'gobble' );
const sander = require( 'sander' );
const gia = require( './giafile' );

const timestamp = String( process.env.timestamp || Date.now() );

// ensure we're building with the correct dependencies
const safestart = require( 'safestart' );
safestart( __dirname );

const deploy = gobble.env() === 'production';
const baseUrl = deploy ? `https://interactive.guim.co.uk/atoms/${gia.path}` : '';
const version = `v/${deploy ? timestamp : 'dev'}`;

const replacements = { baseUrl, version, timestamp };

require( 'reify' );
require( 'svelte/ssr/register' );

module.exports = gobble([
	gobble([
		gobble( 'src/app' ),

		gobble( 'src/app' )
			.transform( 'rollup', {
				entry: 'main.js',
				format: 'iife',
				sourceMap: true,
				plugins: [
					require( 'rollup-plugin-json' )(),
					require( 'rollup-plugin-node-resolve' )({
						jsnext: true
					}),
					require( 'rollup-plugin-commonjs' )(),
					require( 'rollup-plugin-svelte' )({
						css: false
					}),
					require( 'rollup-plugin-buble' )()
				]
			})
			.transform( 'replace', replacements ),

		gobble( 'harness' )
	]).transform( ( inputdir, outputdir, options ) => {
		Object.keys( require.cache ).filter( x => path.extname( x ) === '.html' ).forEach( filename => {
			delete require.cache[ filename ];
		});

		let main;

		try {
			main = require( `./src/app/Main.html` );
		} catch ( err ) {
			if ( err.frame ) console.error( err.frame );
			throw err;
		}

		const read = file => sander.readFileSync( inputdir, file, { encoding: 'utf-8' });
		const harness = read( 'immersive.html' );
		const html = main.render();
		const { css } = main.renderCss();
		const js = read( 'main.js' ).replace( /^\/\/# sourceMappingURL.+/, '' );

		const atom = `<div class='gia'>${html}</div><script src='${baseUrl}/${version}/app.js'></script>`;

		const result = harness
			.replace( '__stylesheet__', `${baseUrl}/${version}/main.css` )
			.replace( '__html__', atom );

		function replace ( str ) {
			return str.replace( /<@(\w+)@>/g, ( match, word ) => {
				return word in replacements ? replacements[ word ] : match;
			});
		}

		return Promise.all([
			sander.writeFile( outputdir, version, 'main.html', replace( atom ) ),
			sander.writeFile( outputdir, version, 'main.css', `figure, figure.element { margin: 0; } a { color: #005689; } .gia { padding: 10px; background-color: white; } ${replace( css )}` ),
			sander.writeFile( outputdir, version, 'app.js', replace( js ) ),
			sander.writeFile( outputdir, 'index.html', replace( result ) )
		]);
	}),

	// files
	gobble( 'src/files' ).moveTo( path.join( version, 'files' ) )

]).transformIf( deploy, 'uglifyjs' );