use renderToStaticNodeStream rather than renderToStaticMarkup

modestysn · modestysn · commit 87d60372f183 · 2019-09-24T21:03:53.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "babel-loader": "^8.0.6",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
+    "mini-css-extract-plugin": "^0.8.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
diff --git a/src/scripts/client/util/browser.util.js b/src/scripts/client/util/browser.util.js
@@ -1,6 +1,20 @@
 /*global ga*/
 /*eslint no-undef: "error"*/
 
+function createScriptTag(src = null, scriptBody = "") {
+	if (!src && !scriptBody)
+		return;
+	
+	const s = document.createElement('script');
+	s.async = true;
+	
+	if (!!src)
+		s.src = src;
+	else if (!!scriptBody)
+		s.innerHTML = scriptBody;
+    document.body.appendChild(s);
+}
+
 function getQueryStringParamByName(name, url) {
 	if (!url)
 		url = window.location.href;
@@ -27,7 +41,17 @@ function trackEvent(evtCategory, evtAction, evtLabel, evtValue) {
 	}
 }
 
+function createGAScript() {
+	const gaKey = document.body.dataset.track;
+	if (gaKey) {
+		createScriptTag('https://www.google-analytics.com/analytics.js');
+		createScriptTag(null, `window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+			ga('create', '${gaKey}', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview');`);
+	}
+}
+
 module.exports = {
 	getQueryStringParamByName,
-	trackEvent
+	trackEvent,
+	createGAScript
 };
diff --git a/src/scripts/components/Head.js b/src/scripts/components/Head.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import processRelPath from '../model/head';
 
-const Head = ({title, description, styles, scripts, rel}) => {
+const Head = ({ title, description, styles, scripts, rel }) => {
 	const { touchHref, webMan, styleLinks, scriptLinks } = processRelPath(rel, styles, scripts);
 	return (
 		<head>
diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -5,29 +5,26 @@ import Header from './components/Header';
 import Main from './components/Main';
 import Footer from './components/Footer';
 
-import indexModel from './model/index';
-
-const Root = () => {
+const Root = ({title,description,scripts,styles,rel, gaKey}) => {
 	return (
 		<html className="no-js" lang="en">
-			<Head {...indexModel} />
-
-			<body className='container'>
-			<Header title={indexModel.title} />
-			<Main>
-				<div className="row">
-					<aside>
-						<p>left side</p>
-					</aside>
-					<section>
-						<p>Main content</p>
-					</section>
-					<aside>
-						<p>right side</p>
-					</aside>
-				</div>
-			</Main>
-			<Footer />
+			<Head title={title} description={description} scripts={scripts} styles={styles} rel={rel} />
+			<body data-track={gaKey} className='container'>
+				<Header title={title} />
+				<Main>
+					<div className="row">
+						<aside>
+							<p>left side</p>
+						</aside>
+						<section>
+							<p>Main content</p>
+						</section>
+						<aside>
+							<p>right side</p>
+						</aside>
+					</div>
+				</Main>
+				<Footer />
 			</body>
 		</html>
 	);
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1,11 +1,7 @@
-"use strict";
-
 import '../styles/main.scss'; //Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.
 
-//import * as utils from './client/util/browser.util';
+import {createGAScript} from './client/util/browser.util';
 
-$( () => {
-	$('.navbar-collapse.collapse.in > ul > li > a').on('click', () => {
-		$('.navbar-toggle').trigger('click');
-	});
-});
+window.document.onload = function () {
+	createGAScript();
+};
diff --git a/src/scripts/model/index.js b/src/scripts/model/index.js
@@ -7,5 +7,6 @@ export default {
     description: pkg.description,
     scripts: glob.sync('**/*.js', { cwd: Conf.target.js_path }),
     styles: glob.sync('**/*.css', { cwd: Conf.target.css_path }),
-    rel: './'
+    rel: './',
+    gaKey: Conf.TRACK_ID
 }
diff --git a/tool/base.config.js b/tool/base.config.js
@@ -14,7 +14,7 @@ const JS_BUNDLE_NAME = APP_NAME + "-bundle.js";
 const Config = {
 	CUR_VER: pkg.version,
 	CUR_DIR,
-	TRACK_ID: "UA-xxxxxxxx-1",
+	TRACK_ID: "UA-xxx-1111",
 	APP_NAME,
 	SRC_BASE,
 	TAR_BASE,
diff --git a/tool/build.bundle.js b/tool/build.bundle.js
@@ -1,5 +1,3 @@
-"use strict";
-
 import buildJSandSASS from './webpack.runner';
 
 buildJSandSASS.compileOnce();
diff --git a/tool/build.page.js b/tool/build.page.js
@@ -2,7 +2,7 @@ import Conf from './base.config';
 import helper from './build.transform';
 
 function transformDefaultPage() {
-	helper.transformOnePage('index.js', null, Conf.src.js_path, Conf.target.path);
+	helper.transformOnePage('index.js', './model/index.js', Conf.src.js_path, Conf.target.path);
 }
 
 function main() {
diff --git a/tool/build.transform.js b/tool/build.transform.js
@@ -8,14 +8,7 @@ import mkdirp from 'mkdirp';
 
 import Conf from './base.config';
 
-const gaCode = `<script>(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)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', '${Conf.TRACK_ID}', 'auto');ga('send', 'pageview');</script>`;
-const pageEnds = "</body></html>";
-
-function appendGATrackCode(content) {
-	return content.slice(0, content.lastIndexOf(pageEnds)) + gaCode + pageEnds;
-}
-
-function outputOnePage(content, destFolder) {
+function outputOnePage(htmlStream, destFolder) {
 	mkdirp(destFolder, err => {
 		if (err) {
 			console.log('✗ Error: outputOnePage');
@@ -25,8 +18,12 @@ function outputOnePage(content, destFolder) {
 			const outStream = fs.createWriteStream(outPath);
 			outStream.once('open', () => {
 				outStream.write('<!doctype html>');
-				outStream.write(appendGATrackCode(content));
+				htmlStream.pipe(outStream, {end: false});
+			});
+
+			htmlStream.on('end', () => {
 				outStream.end();
+				console.log(`✓ Success: transform page => ${path.relative(Conf.src.path, destFolder)}`);
 			});
 		}
 	});
@@ -59,18 +56,16 @@ function transformOnePage(pageFile, propFile, srcFolder, destFolder) {
 		return;
 	}
 
-	if (Component.default) {
-		Component = Component.default;
-	}
+	Component = Component.default ? Component.default : Component;
 
 	let props = propFile ? require(path.join(srcFolder, propFile)) : {};
+	props = props.default ? props.default : props;
 
-	let html = ReactDOMServer.renderToStaticMarkup(
+	const htmlStream = ReactDOMServer.renderToStaticNodeStream(
 		React.createElement(Component, props)
 	);
 
-    outputOnePage(html, destFolder);
-    console.log(`✓ Success: transform page => ${path.relative(Conf.src.path, destFolder)}`);	
+    outputOnePage(htmlStream, destFolder);
 }
 
 function transformLinkedPage(filename) {
diff --git a/tool/webpack.config.js b/tool/webpack.config.js
@@ -1,26 +1,19 @@
-"use strict";
-
-import path from 'path';
-
 import webpack from 'webpack';
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 import Conf from './base.config';
 
-const ENVs = {dev: 'development', prd: 'production', test: 'test'};
+const ENVs = {dev: 'development', prd: 'production', none: 'none'};
 
 const getPlugins = function(env) {
 	const GLOBALS = {
 		'process.env.NODE_ENV': env,
 		__DEV__: env === ENVs.dev
 	};
 
-	const plugins = [
-		new webpack.optimize.OccurenceOrderPlugin(),
-		new webpack.DefinePlugin(GLOBALS), //Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
-		new ExtractTextPlugin(Conf.target.css_bundle),
-		new webpack.optimize.DedupePlugin(),
-		new webpack.optimize.UglifyJsPlugin()
+	const plugins = [		
+		new webpack.DefinePlugin(GLOBALS),
+		new MiniCssExtractPlugin(Conf.target.css_bundle),
 	];
 
 	return plugins;
@@ -29,28 +22,26 @@ const getPlugins = function(env) {
 const getLoaders = function(env) {
 	const loaders = [
 		{test: /\.js$/, include: Conf.src.js_path, loaders: ['babel', 'eslint']},
-		{test: /(\.css|\.scss)$/, loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap")}
+		{test: /(\.css|\.scss)$/, loader: MiniCssExtractPlugin.loader}
 	];
 
 	return loaders;
 };
 
 function getConfig(env) {
 	return {
-		debug: false,
-		cache: true,
-		devtool: env === ENVs.prd ? 'source-map' : 'eval', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
-		noInfo: true, // set to false to see a list of every file being bundled.
+		mode: env,
 		entry: Conf.src.js_entry,
-		target: env === ENVs.test ? 'node' : 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
 		output: {
-			path: Conf.target.js_path, // Note: Physical files are only output by the production build task `npm run build`.
+			path: Conf.target.js_path,
 			publicPath: '/',
 			filename: Conf.target.js_bundle
 		},
+		devtool: env === ENVs.prd ? 'cheap-module-source-map' : 'eval', 
+		target: 'web',
 		plugins: getPlugins(env),
 		module: {
-			loaders: getLoaders(env)
+			loader: getLoaders(env)
 		}
 	};
 }
diff --git a/tool/webpack.runner.js b/tool/webpack.runner.js
@@ -1,12 +1,8 @@
-"use strict";
 // More info on Webpack's Node API here: https://webpack.github.io/docs/node.js-api.html
 // Allowing console calls below since this is a build file.
 
 import webpack from 'webpack';
-import colors from 'colors';
-
 import Conf from './base.config';
-import helper from './base.copier';
 import webpackConfigBuilder from './webpack.config';
 
 process.env.NODE_ENV = 'production'; // this assures React is built in prod mode and that the Babel dev config doesn't apply.

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@ export default {`
`7`	`7`	`description: pkg.description,`
`8`	`8`	`scripts: glob.sync('*/.js', { cwd: Conf.target.js_path }),`
`9`	`9`	`styles: glob.sync('*/.css', { cwd: Conf.target.css_path }),`
`10`		`- rel: './'`
	`10`	`+ rel: './',`
	`11`	`+ gaKey: Conf.TRACK_ID`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import Conf from './base.config';`
`2`	`2`	`import helper from './build.transform';`
`3`	`3`
`4`	`4`	`function transformDefaultPage() {`
`5`		`- helper.transformOnePage('index.js', null, Conf.src.js_path, Conf.target.path);`
	`5`	`+ helper.transformOnePage('index.js', './model/index.js', Conf.src.js_path, Conf.target.path);`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`function main() {`