merge main

gulpfile.js

@@ -1,5 +1,9 @@
 var { execSync } = require('child_process');
-var { writeFileSync, readdirSync, readFileSync } = require('fs');
+var {
+  writeFileSync, readdirSync, readFileSync,
+  existsSync, statSync, mkdirSync, copyFileSync,
+} = require('fs');
+var path = require('path');
 
 var glob = require('glob');
 var _ = require('underscore');
@@ -48,6 +52,22 @@ const lintStrings = (done) => {
 
 var destDir = './build/';
 
+var copyRecursiveSync = (src, dest) => {
+  var exists = existsSync(src);
+  var stats = exists && statSync(src);
+  var isDirectory = exists && stats.isDirectory();
+  if (isDirectory) {
+    mkdirSync(dest);
+    readdirSync(src).forEach((childItemName) => {
+      copyRecursiveSync(
+        path.join(src, childItemName),
+        path.join(dest, childItemName));
+    });
+  } else {
+    copyFileSync(src, dest);
+  }
+};
+
 var buildIndex = function(done) {
   log('Building index...');
 
@@ -72,8 +92,11 @@ var buildIndex = function(done) {
   }
   log('Found hashed style file: ' + styleFile);
 
+  var buildDir = process.env.CI ? '.' : 'build';
+
   // output these filenames to our index template
   var outputIndex = indexTemplate({
+    buildDir,
     jsFile,
     styleFile,
   });
@@ -86,7 +109,14 @@ var buildIndex = function(done) {
       removeComments: true,
     });
   }
-  writeFileSync('index.html', outputIndex);
+
+  if (process.env.CI) {
+    writeFileSync('build/index.html', outputIndex);
+    copyRecursiveSync('assets', 'build/assets');
+    copyRecursiveSync('lib', 'build/lib');
+  } else {
+    writeFileSync('index.html', outputIndex);
+  }
   done();
 };
 

package.json

@@ -13,13 +13,12 @@
     "url": "https://github.com/pcottle/learnGitBranching"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.8",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-react": "^7.16.7",
     "babelify": "^10.0.0",
-    "browserify": "^16.5.0",
-    "contributor-faces": "^1.0.2",
+    "browserify": "^17.0.0",
     "fancy-log": "^1.3.3",
-    "glob": "^7.1.6",
+    "glob": "^7.2.0",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
@@ -27,26 +26,26 @@
     "gulp-hash": "^4.2.2",
     "gulp-jasmine": "^4.0.0",
     "gulp-jshint": "^2.1.0",
-    "gulp-terser": "^1.2.0",
+    "gulp-terser": "^2.1.0",
     "gulp-uglify": "^3.0.2",
     "html-minifier": "^4.0.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "jshint": "^2.11.0",
-    "prompt": "^1.0.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "jshint": "^2.13.4",
+    "prompt": "^1.2.2",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"
   },
   "dependencies": {
     "backbone": "^1.4.0",
-    "flux": "^3.1.3",
+    "flux": "^4.0.3",
     "jquery": "^3.4.0",
-    "jquery-ui": "^1.13.0",
+    "jquery-ui": "^1.13.1",
     "marked": "^4.0.12",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "q": "^1.5.1",
     "raphael": "^2.1.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "underscore": "~1.4.3"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "underscore": "^1.13.2"
   }
 }

src/js/intl/index.js

@@ -16,7 +16,7 @@ var fallbackMap = {
 var templateSettings = Object.assign({}, _.templateSettings);
 templateSettings.interpolate = /\{(.+?)\}/g;
 var template = exports.template = function(str, params) {
-  return _.template(str, params, templateSettings);
+  return _.template(str, templateSettings)(params);
 };
 
 var str = exports.str = function(key, params) {

src/js/views/commandViews.js

@@ -70,12 +70,17 @@ var CommandPromptView = Backbone.View.extend({
     var el = e.target;
 
     const shadowEl = document.querySelector('#shadow');
-    const uc = el.value.replace(/ {2,}/g, ' ');
+
+    const currentValue = el.value;
+    const allCommand = currentValue.split(';');
+    const lastCommand = allCommand[allCommand.length - 1]
+      .replace(/\s\s+/g, ' ').replace(/^\s/, '');
+
     shadowEl.innerHTML = '';
-    if(uc.length){
-      for(const c of allCommandsSorted){
-        if(c.indexOf(uc) === 0){
-          shadowEl.innerHTML = c;
+    if (lastCommand.length) {
+      for (const c of allCommandsSorted) {
+        if (c.startsWith(lastCommand)) {
+          shadowEl.innerHTML = (currentValue + c.replace(lastCommand, '')).replace(/ /g, ' ');
           break;
         }
       }
@@ -83,7 +88,9 @@ var CommandPromptView = Backbone.View.extend({
 
     if (e.keyCode === 9) {
       e.preventDefault();
-      el.value = shadowEl.innerHTML;
+      if (shadowEl.innerHTML) {
+        el.value = shadowEl.innerHTML.replace(/ /g, ' ');
+      }
     }
 
     this.updatePrompt(el);

src/template.index.html

@@ -14,7 +14,7 @@
   <meta property="og:description" content="An interactive Git visualization tool to educate and challenge!"/>
   <meta http-equiv="content-language" content="en">
 
-  <link rel="stylesheet" href="build/{{styleFile}}" type="text/css" charset="utf-8">
+  <link rel="stylesheet" href="{{buildDir}}/{{styleFile}}" type="text/css" charset="utf-8">
   <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
 
 
@@ -357,7 +357,7 @@
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching
   -->
-  <script defer src="build/{{jsFile}}"></script>
+  <script defer src="{{buildDir}}/{{jsFile}}"></script>
 </head>
 <body>
   <!-- lol noscript. I did not write 9k+ lines of JS just for you to bounce off my website -->