Merge pull request #128 from 720kb/npm-shrinkwrap

npm shrinkwrap

lib/js/assets.js

@@ -3,6 +3,7 @@ import angular from 'angular';
 
 const moduleName = 'npm-ui.assets'
   , fs = require('fs')
+  , path = require('path')
   , storage = require('electron-storage');
 
 angular.module(moduleName, [])
@@ -17,28 +18,43 @@ angular.module(moduleName, [])
           data.length) {
 
           data.forEach(item => {
-            let isPath;
+            let isPath
+              , isShrinkwrap;
 
             if (item &&
               item.path) {
 
                 try {
-
+                  //is a directory?
                   if (fs.lstatSync(item.path).isDirectory()) {
-
                     isPath = true;
                   } else {
-
                     isPath = false;
                   }
                 } catch (excp) {
-
                   isPath = false;
                   console.warn(`Unable to read project path: ${excp}`);
                 }
 
-                if (isPath) {
+                try {
+                  //is shrinkwrapped -> has npm-shrinkwrap.json inside?
+                  if (fs.existsSync(path.join(item.path, 'npm-shrinkwrap.json'))) {
+                    isShrinkwrap = true;
+                  } else {
+                    isShrinkwrap = false;
+                  }
+                } catch (excp) {
+                  isShrinkwrap = false;
+                  console.warn(`No npm-shrinkwrap.json found in project path: ${excp}`);
+                }
 
+                if (isShrinkwrap) {
+                  item.shrinkwrap = true;
+                } else {
+                  item.shrinkwrap = false;
+                }
+
+                if (isPath) {
                   projects.push(item);
                 }
               }

lib/js/interface/left.js

@@ -26,6 +26,51 @@ angular.module(moduleName, [])
           this.showHistoryPrompt = false;
         });
       })
+    , unregisterLeftBarSelectedProjectNpmUnshrinkwrap = $rootScope.$on('left-bar:selected-project-npm-unshrinkwrap', (eventInformation, data) => {
+        const folder = data.path.path
+          , projectName = data.path.dirName;
+
+        //delete old node_modules
+        rmRf(Path.join(folder, 'npm-shrinkwrap.json'), errRm => {
+          if (errRm) {
+            return errorsService.showErrorBox('Warning', `Error deleting npm-shrinkwrap.json in folder ${folder}: \n${errRm}`);
+          }
+
+          $rootScope.$emit('left-bar:unshrinkwrap-project', {'project': data.path});
+          $log.info(`Removed npm-shrinkwrap.json in project ${folder}`);
+          notificationFactory.notify(`Removed npm-shrinkwrap.json in project ${projectName}`);
+        });
+      })
+    , unregisterLeftBarSelectedProjectNpmShrinkwrap = $rootScope.$on('left-bar:selected-project-npm-shrinkwrap', (eventInformation, data) => {
+        const folder = data.path.path
+          , projectName = data.path.dirName
+          , deleteProjectName = item => {
+            $scope.$apply(() => {
+              this.deleteShrinkwrappingProjects(item);
+            });
+          };
+
+        $scope.$apply(() => {
+          this.npmShrinkwrappingProjects[projectName] = true;
+        });
+
+        npm.npmInFolder(folder).catch(error => {
+          deleteProjectName(projectName);
+          $log.error(`Configuring npm for $ npm shrinkwrap,  in ${folder}...`, error);
+          errorsService.handleError('Error', `Error configuring npm for shrinkwrap in folder ${folder}: ${error}`);
+        }).then(npmInFolder => {
+          npmInFolder.shrinkwrap().then(() => {
+            $rootScope.$emit('left-bar:shrinkwrap-project', {'project': data.path});
+            $log.info(`Finished npm shrinkwrap in project ${folder}`);
+            notificationFactory.notify(`Finished $ npm shrinkwrap in project ${projectName}`);
+            deleteProjectName(projectName);
+          }).catch(err => {
+            deleteProjectName(projectName);
+            $log.error(err);
+            errorsService.showErrorBox('Error', `Error running $ npm shrinkwrap in folder ${folder}: ${err}`);
+          });
+        });
+      })
     , unregisterLeftBarSelectedProjectNpmReinstall = $rootScope.$on('left-bar:selected-project-npm-reinstall', (eventInformation, data) => {
         const folder = data.path.path
           , projectName = data.path.dirName
@@ -266,6 +311,10 @@ angular.module(moduleName, [])
       delete this.npmBuildingProjects[item];
     };
 
+    this.deleteShrinkwrappingProjects = item => {
+      delete this.npmShrinkwrappingProjects[item];
+    };
+
     this.deleteRebuildingProjects = item => {
       delete this.npmRebuildingProjects[item];
     };
@@ -550,6 +599,24 @@ angular.module(moduleName, [])
           });
         }
       }));
+
+      projectsContextMenu.append(new MenuItem({
+        'label': 'Shrinkwrap',
+        click() {
+          $rootScope.$emit('left-bar:selected-project-npm-shrinkwrap', {
+            'path': item
+          });
+        }
+      }));
+
+      projectsContextMenu.append(new MenuItem({
+        'label': 'Unshrinkwrap',
+        click() {
+          $rootScope.$emit('left-bar:selected-project-npm-unshrinkwrap', {
+            'path': item
+          });
+        }
+      }));
       //append scripts if any in project package.json
       if (item.scripts) {
 
@@ -599,11 +666,14 @@ angular.module(moduleName, [])
 
       projectsContextMenu.append(new MenuItem({
         'label': 'Edit',
-        click() {
-          $rootScope.$emit('left-bar:edit-project', {
-            'dirName': Path.join(item.path, 'package.json')
-          });
-        }
+        'submenu': [{
+          'label': 'package.json',
+          click() {
+            $rootScope.$emit('left-bar:edit-project', {
+              'dirName': Path.join(item.path, 'package.json')
+            });
+          }
+        }]
       }));
 
       projectsContextMenu.append(new MenuItem({
@@ -673,16 +743,19 @@ angular.module(moduleName, [])
       event.stopPropagation();//prevent project selection
     };
 
+    //show loading/progress commands under project folders
     this.npmInstallingProjects = [];
     this.npmReinstallingProjects = [];
     this.npmBuildingProjects = [];
     this.npmRebuildingProjects = [];
     this.npmPruningProjects = [];
     this.npmDedupingProjects = [];
     this.npmRunningScriptsProject = [];
+    this.npmShrinkwrappingProjects = [];
 
     $scope.$on('$destroy', () => {
-
+      unregisterLeftBarSelectedProjectNpmShrinkwrap();
+      unregisterLeftBarSelectedProjectNpmUnshrinkwrap();
       unregisterLeftBarSelectedProjectNpmInstall();
       unregisterLeftBarSelectedProjectNpmReinstall();
       unregisterLeftBarSelectedProjectNpmPrune();

lib/js/interface/shell.js

@@ -136,6 +136,52 @@ angular.module(moduleName, [
         this.globalSelected = false;
       }
     })
+    , unregisterLeftBarShrinkwrapProjectListener = $rootScope.$on('left-bar:shrinkwrap-project', (eventInfo, data) => {
+      const allProjects = this.projects;
+
+      if (data &&
+        data.project &&
+        data.project.path &&
+        this.projects.length > 0) {
+
+        allProjects.forEach((item, key) => {
+          if (item.path === data.project.path) {
+
+            this.projects[key].shrinkwrap = true;
+          }
+        });
+
+        assets.projects.save(this.projects);
+        $log.info('Shrinkwrapped project saved', data);
+      } else {
+
+        $log.warn('Shrinkwrap saving project event fired BUT projects array is empty!');
+      }
+    })
+    , unregisterLeftBarUnshrinkwrapProjectListener = $rootScope.$on('left-bar:unshrinkwrap-project', (eventInfo, data) => {
+
+      const allProjects = this.projects;
+
+      if (data &&
+        data.project &&
+        data.project.path &&
+        this.projects.length > 0) {
+
+        allProjects.forEach((item, key) => {
+          if (item.path === data.project.path) {
+            $scope.$apply(() => {
+              this.projects[key].shrinkwrap = false;
+            });
+          }
+        });
+
+        assets.projects.save(this.projects);
+        $log.info('Unshrinkwrapped project saved', data);
+      } else {
+
+        $log.warn('UnShrinkwrap saving project event fired BUT projects array is empty!');
+      }
+    })
     , unregisterLeftBarDeleteProjectListener = $rootScope.$on('left-bar:delete-project', (eventInfo, data) => {
 
       const allProjects = this.projects;
@@ -280,6 +326,8 @@ angular.module(moduleName, [
     unregisterNpmGlobalPrivilegeCheckResult();
     unregisterLeftBarSelectProjectListener();
     unregisterLeftBarDeleteProjectListener();
+    unregisterLeftBarUnshrinkwrapProjectListener();
+    unregisterLeftBarShrinkwrapProjectListener();
     unregisterDragAndDropListener();
   });
 });

lib/js/npm/npm-operations.js

@@ -342,6 +342,21 @@ class NpmOperations {
     });
   }
 
+  shrinkwrap() {
+    return new Promise((resolveShrink, rejectShrink) => {
+
+      this[npmSym].commands.shrinkwrap([], (shrinkError, infos) => {
+
+        if (shrinkError) {
+
+          return rejectShrink(shrinkError);
+        }
+
+        return resolveShrink(infos);
+      });
+    });
+  }
+
   root() {
     return new Promise((resolveRoot, rejectRoot) => {
 

lib/left.pug

@@ -12,7 +12,7 @@ div(ng-controller='LeftBarController as leftBar')
       h6.col-xs-12(ng-if='shell.projects.length > 0')
         | Projects
       div(ng-repeat='item in shell.projects track by $index')
-        a.row.project(title="{{item.path}}", ng-right-click="leftBar.rightClickMenu(item, $event)", ng-class="{'active': leftBar.selectedProject === item && !leftBar.global}", ng-if="leftBar.removedProject !== item", ng-click='leftBar.selectProject(item, $event)')
+        a.row.project(title="{{ item.shrinkwrap ? 'Shrinkwrap enabled' : item.path }}", ng-right-click="leftBar.rightClickMenu(item, $event)", ng-class="{'active': leftBar.selectedProject === item && !leftBar.global, 'shrinkwrapped': item.shrinkwrap}", ng-if="leftBar.removedProject !== item", ng-click='leftBar.selectProject(item, $event)')
           i.fa.fa-folder-o
           div
             b {{item.dirName}}
@@ -67,5 +67,12 @@ div(ng-controller='LeftBarController as leftBar')
             small.running-end(ng-click="leftBar.deleteDedupingProjects(item.dirName)")
               i.fa.fa-times-circle-o
               | dismiss
-            .left-progress-loading
+          .left-progress-loading
+            .left-progress.color-white(ng-show="leftBar.npmShrinkwrappingProjects[item.dirName]")
+              small.running-name
+                | ↳ Shrinkwrapping
+              small.running-end(ng-click="leftBar.deleteShrinkwrappingProjects(item.dirName)")
+                i.fa.fa-times-circle-o
+                | dismiss
+              .left-progress-loading
     br

lib/scss/layout.scss

@@ -25,6 +25,23 @@
     line-height: 23px;
     height: 25px;
 
+    //for when project has npm-shrinkwrap.json inside
+    &.shrinkwrapped {
+      &::before {
+        position: absolute;
+        background-image: url('../img/lock.svg');
+        background-position: center center;
+        background-size: 11px 11px;
+        background-repeat: no-repeat;
+        width: 15px;
+        height: 14px;
+        z-index: 99;
+        border-radius: 10px;
+        margin-top: 9px;
+        margin-left: 8px;
+      }
+    }
+
     i {
       font-size: 16.5px;
       margin-right: 2px;

lib/scss/progress.scss

@@ -4,7 +4,11 @@
   font-size: 11px;
   margin: 0 auto;
   line-height: 11px;
-  margin-top: 5px;
+  margin-bottom: 5px;
+
+  &:first-child {
+    margin-top: 3px;
+  }
 
   small {
     font-size: 11px;
@@ -30,10 +34,6 @@
     }
   }
 
-  &:last-child {
-    margin-bottom: 9px;
-  }
-
   .left-progress-loading {
     height: 6px;
     margin-top: 6px;