replace watch with node-wather

modestysn · modestysn · commit 398910a2a1dc · 2019-09-28T17:22:13.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,22 +40,21 @@
     "glob": "^7.1.4",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
+    "node-watch": "^0.6.3",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.10.0",
+    "react-dom": "^16.10.0",
     "sass-loader": "^8.0.0",
-    "watch": "^1.0.2",
     "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1"
+    "webpack-cli": "^3.3.9"
   },
   "scripts": {
     "clean:target": "babel-node ./tool/build.cleanup.js",
     "build:asset": "babel-node ./tool/build.asset.js",
     "build:page": "babel-node ./tool/build.page.js",
     "build:bundle": "babel-node ./tool/build.bundle.js",
     "build:water": "",
-    "build": "npm run clean:target; npm run build:asset; npm run build:bundle; npm run build:page;",    
-    "start": "webpack-dev-server --open --mode development"
+    "build": "npm run clean:target; npm run build:asset; npm run build:bundle; npm run build:page;",
+    "start": "babel-node ./tool/build.watcher.js"
   }
 }
diff --git a/src/scripts/client/main.js b/src/scripts/client/main.js
@@ -0,0 +1,7 @@
+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 {createGAScript} from './util/browser.util';
+
+window.onload = function () {
+	createGAScript();
+};
diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -14,7 +14,7 @@ const Root = ({title,description,scripts,styles,rel, gaKey}) => {
 				<Main>
 					<div className="row">
 						<aside>
-							<p>left side</p>
+							<p>Left Side</p>
 						</aside>
 						<section>
 							<p>Main content</p>
diff --git a/src/scripts/main.js b/src/scripts/main.js
diff --git a/src/scripts/pages/about.js b/src/scripts/pages/about.js
@@ -12,7 +12,6 @@ const About = ({title,description,scripts,styles,rel, gaKey}) => {
 			<body data-track={gaKey} className='container'>
 				<Header title={title} />
 				<Main>
-					<h1>About React2Html</h1>
 					<h1>About React2Html</h1>
 					<p>More details can be found at <a href="https://github.com/modesty/react2html"> GitHub </a></p>
 				</Main>
diff --git a/src/scripts/pages/contact.js b/src/scripts/pages/contact.js
@@ -12,7 +12,7 @@ const Contact = ({title,description,scripts,styles,rel, gaKey}) => {
 			<body data-track={gaKey} className='container'>
 				<Header title={title} />
 				<Main>
-					<h1>React2Html</h1>
+					<h1>Contact Me</h1>
 					<p>email the author: <a href="mailto:modestyz@hotmail.com?subject=About%20CoeProject%20Article">modestyz@hotmail.com</a></p>
 				</Main>
 				<Footer rel={rel} />
diff --git a/tool/base.config.js b/tool/base.config.js
@@ -21,7 +21,7 @@ const Config = {
 	src: {
 		path: CUR_DIR + SRC_BASE,
 		js_path: CUR_DIR + SRC_BASE + "/scripts",
-		js_entry: CUR_DIR + SRC_BASE + "/scripts/main.js",
+		js_entry: CUR_DIR + SRC_BASE + "/scripts/client/main.js",
 		sass_path: CUR_DIR + SRC_BASE + "/styles",
 		img_path: CUR_DIR + SRC_BASE + "/images",
 		vendor_css: CUR_DIR + VENDOR_BASE + "/css",
diff --git a/tool/build.page.js b/tool/build.page.js
@@ -2,8 +2,7 @@ import Conf from './base.config';
 import helper from './build.transform';
 
 function main() {
-	helper.transformOnePage('index.js', './props/index.js', Conf.src.js_path, Conf.target.path);
-	helper.transformLinkedPages('pages', 'props', Conf.src.js_path, Conf.target.path);
+	helper.transformAllPages();
 }
 
 main();
diff --git a/tool/build.transform.js b/tool/build.transform.js
@@ -82,7 +82,7 @@ function transformOnePage(pageFile, propFile, srcFolder, destFolder) {
 
     const file = path.join(srcFolder, pageFile);
 	let Component = require(file);
-	//purgeCache(file);
+	purgeCache(file);
 
 	if (!Component) {
 		console.log(`✗ Error: No component found at ${file}`);
@@ -115,7 +115,18 @@ function transformLinkedPages(dir, propDir, srcFolder, destFolder) {
 	});
 }
 
+function transformRootIndex() {
+	transformOnePage('index.js', './props/index.js', Conf.src.js_path, Conf.target.path);	
+}
+
+function transformAllPages() {
+	transformRootIndex();
+	transformLinkedPages('pages', 'props', Conf.src.js_path, Conf.target.path);
+}
+
 export default {
     transformOnePage,
-	transformLinkedPages
+	transformLinkedPages,
+	transformRootIndex,
+	transformAllPages
 };
diff --git a/tool/build.watcher.js b/tool/build.watcher.js
@@ -1,17 +1,20 @@
 import fs from 'fs';
 import path from 'path';
 
-import watch from 'watch';
+import watch from 'node-watch';
 
 import Conf from './base.config';
-import helper from './base.copier';
+import copier from './base.copier';
+import helper from './build.transform';
 import Runner from './webpack.runner';
 
 const copyFileExt = /\.(gif|jpg|jpeg|svg|png|ico|xml|txt)$/i;
 const pageFileExt = /\.(js)$/i;
-const build_all_triggers = ['components/', 'issues/', 'model/'];
+const build_all_triggers = ['components/', 'issues/', 'model/', 'props/'];
 
+const fileTypes = ['ignore', 'asset file', 'index page file', 'linked page file', 'component file'];
 // 0: ignore; 1: asset file; 2: index page file; 3: linked page file; 4: component file
+
 function _getFileType(f) {
 	let retVal = 0;
 	let extName = path.extname( path.basename(f) );
@@ -41,22 +44,25 @@ function _getRelativePath(f) {
 }
 
 function _copyOneFile(f) {
-	let relPath = _getRelativePath(f);
-	helper.streamCopy([relPath], Conf.src.path, Conf.target.path, (err, files) => {
+	const relPath = _getRelativePath(f);
+	copier.streamCopy([relPath], Conf.src.path, Conf.target.path, (err, files) => {
 	});
 }
 
 function _handleChangedFile(f) {
-	let fileType = _getFileType(f);
-	console.log("fileType", fileType, f);
+	const fileType = _getFileType(f);
+	
+	const fileName = path.basename(f);
+	const relPath = path.relative(Conf.src.js_path, f);
+	const dir = path.dirname(relPath);
+	console.log(`☯︎ ${f} => fileType=${fileType}  fileName=${fileName}  relPath=${relPath}  dir=${dir}`);
+
 	switch (fileType) {
-		case 1:	_copyOneFile(f); break;
-		case 2: helper.transformDefaultPage(); break;
-		case 3: helper.transformLinkedPage(path.basename(f)); break;
-		case 4: {
-			helper.transformDefaultPage();
-			helper.transformLinkedPages();
-		} break;
+		case 1:	_copyOneFile(f); break; //new file
+		case 2: helper.transformOnePage(fileName, `./props/${fileName}`, Conf.src.js_path, Conf.target.path); break;
+		case 3: helper.transformOnePage(fileName, `../props/${dir}/${fileName}`, `${Conf.src.js_path}/${dir}`, `${Conf.target.path}/${path.basename(fileName, '.js')}`); break;
+		case 4: helper.transformAllPages(); break;
+		default: console.error('✗ Error: unrecognized file type', fileType); break;
 	}
 }
 
@@ -89,23 +95,24 @@ function _handleRemovedFile(f) {
 	}
 }
 
-watch.watchTree(Conf.src.path, {
-	ignoreDotFiles: true,
-	ignoreUnreadableDir: true,
-	ignoreNotPermitted: true,
-	ignoreDirectoryPattern: /\/client\//i,
-	interval: 500
-}, (f, curr, prev) => {
-	if (typeof f == "object" && prev === null && curr === null) {
-		console.log("☯︎ watcher: finished walking the source tree");
-	} else if (prev === null) {
-		console.log("☯︎ watcher: new file:", path.basename(f));
-		_handleChangedFile(f);
-	} else if (curr.nlink === 0) {
-		console.log("☯︎ watcher: file removed:", path.basename(f));
-		_handleRemovedFile(f);
-	} else {
-		console.log("☯︎ watcher: file changed:", path.basename(f));
-		_handleChangedFile(f);
-	}
-});
+function startWatchNonBundle() {
+	console.log(`☯︎ start to watch ...`);
+	watch(Conf.src.path, {
+		recursive: true,
+		filter: f => !/(\/client\/|\/styles\/)/i.test(f),
+		delay: 500
+	}, (evt, f) => {
+			console.log(`☯︎ watcher evt=${evt} name=${f}`);
+			if (evt === 'update') {
+				_handleChangedFile(f);
+			}
+			else if (evt === 'remove') {
+				_handleRemovedFile(f);
+			}
+			else {
+				console.error(`✗ Error: unrecognized event`, evt);	
+			}
+	});
+}
+
+Runner.watchCompile(startWatchNonBundle);
diff --git a/tool/webpack.runner.js b/tool/webpack.runner.js
@@ -68,7 +68,7 @@ function watchCompile(callback) {
 	console.log('\n=== Watching and generating minified bundle ...');
 	_post_compile_func = callback;
 	const webpackConfigWatch = webpackConfigBuilder('development');
-	webpack(webpackConfigWatch).watch({aggregateTimeout: 10, poll: true}, compilerCallback);
+	webpack(webpackConfigWatch).watch({aggregateTimeout: 300, poll: true}, compilerCallback);
 }
 
 export default {
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,7 @@ import Conf from './base.config';`
`2`	`2`	`import helper from './build.transform';`
`3`	`3`
`4`	`4`	`function main() {`
`5`		`- helper.transformOnePage('index.js', './props/index.js', Conf.src.js_path, Conf.target.path);`
`6`		`- helper.transformLinkedPages('pages', 'props', Conf.src.js_path, Conf.target.path);`
	`5`	`+ helper.transformAllPages();`
`7`	`6`	`}`
`8`	`7`
`9`	`8`	`main();`