electron and chrome generator

index.js

@@ -38,41 +38,36 @@ var prompts = [{
     name: "None",
     value: "none"
   }]
-},{
-  type: "list",
-  message: "What css preprocessor will your project use?",
-  name: "css",
-  choices: [{
-    name: "SCSS",
-    value: "scss",
-    checked: true
-  },{
-    name: "LESS",
-    value: "less"
-  }]
 },{
   type: "confirm",
   name: "vendor",
   message: "Seperate common npm modules into vendor.js?",
   default: true
 },{
   type: "list",
-  message: "How would you like to implement an unsupported page redirect?",
-  name: "unsupported",
+  message: "Is your project an app?",
+  name: "app",
+  default: 'no',
   choices: [{
-    name: "PHP",
-    value: "php"
+    name: "No",
+    value: 'no'
+  },{
+    name: "Electron App",
+    value: "electron"
   }, {
-    name: "None",
-    value: "none"
+    name: "Chrome Extension",
+    value: "chrome"
   }]
-}];
+}
+];
 var globs = [
   { base: 'templates/{{framework}}/' },
   { base: 'templates/', glob: 'scripts/*' },
   { base: 'templates/base/' },
   { base: 'templates/style/', output: 'src/style/' },
-  { base: 'templates/scripts/{{css}}/', glob: '*', output: 'scripts/' },
+  { base: 'templates/{{app}}', output: 'chrome/' },
+  { base: 'templates/scripts/{{css}}/',  output: 'scripts/' },
+  { base: 'templates/scripts/{{app}}/', glob: '*', output: 'scripts/' },
   { base: 'templates/unsupported/{{unsupported}}', output: 'static/' },
   { base: 'templates/unsupported/', glob: '*', output: 'static/' },
   { base: 'templates/unsupported/images/', output: 'raw-assets/images/unsupported/' }
@@ -89,12 +84,58 @@ var gen = nyg(prompts,globs)
       message: "Would you perfer Landing/Landing.js over Landing/index.js?",
       default: false
     },function() {
-      if (gen.config.get('framework')!=='none') {
+      if (gen.config.get('framework')!=='none' && ( gen.config.get('app') !== 'electron' && gen.config.get('app') !== 'chrome')) {
         gen.prompt({
           type: "confirm",
           name: "pushState",
           message: "Use push states?",
           default: true
+        },function() {
+          gen.prompt({
+            type: "list",
+            message: "What css preprocessor will your project use?",
+            name: "css",
+            choices: [
+            {
+              name: "SCSS",
+              value: "scss",
+              checked: true
+            },
+            {
+              name: "LESS",
+              value: "less"
+            }]
+          },function() {
+            if (gen.config.get('framework')==='bigwheel') {
+              gen.prompt({
+                type: "confirm",
+                name: "useES6",
+                message: "Would you like to use ES6?",
+                default: true
+              },done);
+            } else {
+              gen.config.set('useES6',true);
+              done();
+            }  
+          });
+        });
+      } 
+      else if(gen.config.get('app') === 'chrome') {
+        gen.config.set('pushState', false);
+        gen.prompt({
+          type: "list",
+          message: "What css preprocessor will your project use?",
+          name: "css",
+          choices: [
+          {
+            name: "SCSS",
+            value: "scss",
+            checked: true
+          },
+          {
+            name: "LESS",
+            value: "less"
+          }]
         },function() {
           if (gen.config.get('framework')==='bigwheel') {
             gen.prompt({
@@ -106,8 +147,24 @@ var gen = nyg(prompts,globs)
           } else {
             gen.config.set('useES6',true);
             done();
-          }
+          }  
         });
+      }
+      else if(gen.config.get('app') === 'electron') {
+        gen.config.set('pushState', false);
+        //node-sass not supported in electron yet
+        gen.config.set('css', 'less');
+        if (gen.config.get('framework')==='bigwheel') {
+          gen.prompt({
+            type: "confirm",
+            name: "useES6",
+            message: "Would you like to use ES6?",
+            default: true
+          },done);
+        } else {
+          gen.config.set('useES6',true);
+          done();
+        }
       } else {
         done();
       }

lib/createSections.js

@@ -33,6 +33,15 @@ function createSection(cur,gen,cb) {
     count++;
     if (count>=total) cb();
   };
+  if(gen.config.get('app') === 'electron') {
+    fs.stat('app', function(err, stat) {
+      if(err) {
+        fs.mkdirSync('app');
+      }
+      fs.createReadStream(path.join(process.cwd(), '../../templates/app/electron.index.js')).pipe(fs.createWriteStream('app/electron.index.js'));
+      fs.createReadStream(path.join(process.cwd(), '../../templates/app/index.html')).pipe(fs.createWriteStream('app/index.html'));
+    });
+  } 
   fs.stat('src/sections/'+cur+'/',function(err,stat) {
     if (err) {
       gen.config.set('section',cur);

package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "nyg": "^2.0.2"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "rimraf": "^2.5.4"
+  },
   "scripts": {
     "test": "node test/"
   },

templates/app/electron.index.js

@@ -0,0 +1,19 @@
+const electron = require('electron');
+const {app} = electron;
+const {BrowserWindow} = electron;
+let mainWindow = null;
+
+app.on('window-all-closed', function() {
+  if (process.platform != 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('ready', function() {
+  mainWindow = new BrowserWindow({width: 1366, height: 768});
+  mainWindow.loadURL('file://' + __dirname + '/index.html');
+  if(process.env.NODE_ENV === 'development') mainWindow.openDevTools();
+  mainWindow.on('closed', function() {
+    mainWindow = null;
+  });
+});

templates/app/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+  <title>{{repoName}}</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
+  <link rel="apple-touch-icon" href="/assets/images/appicon57x57.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/assets/images/appicon72x72.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/assets/images/appicon57x57@2x.png">
+  <link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">
+  <meta name="description" content="">
+  {{#if pushState}}<base href="/">{{/if}}
+  <link rel="stylesheet" type="text/css" href="main.css">\{{#is NODE_ENV "production"}}\{{#if vendor}}
+  <script type="text/javascript" src="\{{vendor}}"></script>\{{/if}}\{{/is}}
+  <script type="text/javascript" src="bundle.js"></script>
+</head>
+  <body>
+  </body>
+</html>

templates/base/config.json

@@ -1,11 +1,15 @@
 {
   "development": {
     "entry": "./src/index.js",
-    "vendor": {{#if vendor}}"vendor.js"{{else}}false{{/if}},
-    "bundle": "bundle.js",
+    "vendor": {{#if vendor}}"vendor.js"{{else}}false{{/if}},{{#is app 'chrome'}}
+    "bundle": "./dev/bundle.js",{{/is}}{{#is app 'electron'}}
+    "bundle":  "bundle.js",{{/is}}{{#is app 'no'}}
+    "bundle":  "bundle.js",{{/is}}
     "static": "./static/",
-    "raw": "./raw-assets/",
-    "output": "./build/",
+    "raw": "./raw-assets/",{{#is app 'chrome'}}
+    "output": "./dev",{{/is}}{{#is app 'electron'}}
+    "output": "./build/",{{/is}}{{#is app 'no'}}
+    "output": "./build/",{{/is}}
     "style": "./src/style/main.{{css}}",
     "ASSET_PATH": "./assets/"
   },

templates/base/package.json

@@ -1,23 +1,32 @@
 {
   "name": "{{repoName}}",
   "version": "0.0.0",
-  "description": "{{description}}",
+  "description": "{{description}}",{{#is app 'electron'}}
+  "main": "app/electron.index.js", {{/is}}
   "author": {
     "name": "{{author}}",
     "email": "{{email}}",
     "url": "https://github.com/Jam3"
   },
-  "scripts": {
-    "start": "npm run copy && npm run style && npm run dev",
+  "scripts": { {{#is app 'electron'}}
+    "start": "electron ./scripts/electron.dev.js --env=development",{{/is}}{{#is app 'no'}}
+    "start": "npm run copy && npm run style && npm run dev", {{/is}}
     "copy": "node scripts/copy.js",
-    "style": "node scripts/style.js",
-    "dev": "node scripts/dev.js",
+    "style": "node scripts/style.js",{{#is app 'no'}}
+    "dev": "node scripts/dev.js", {{/is}} {{#is app 'chrome'}} 
+    "build": "npm run release && node scripts/chrome.build.js",
+    "compress": "node scripts/chrome.compress.js",
+    "compress-keygen": "crx keygen",
+    "dev": "node scripts/chrome.dev.js",
+    "dist": "npm run build; npm run compress", {{/is}} 
     "release": "npm run release-clean && npm run release-style && npm run release-browserify && npm run release-copy && npm run release-gzip",
     "release-style": "node scripts/style.js --env=production",
     "release-browserify": "node scripts/release.js --env=production",
     "release-copy": "node scripts/copy.js --env=production",
     "release-gzip": "node scripts/gzip.js --env=production",
-    "release-clean": "node scripts/clean.js --env=production",
+    "release-clean": "node scripts/clean.js --env=production", {{#is app 'electron'}}
+    "package": "npm run release && node scripts/electron.package.js --env=production",
+    "package-all": "npm run package -- --all", {{/is}}
     "lowercase": "node scripts/lowercase.js"
   },
   "license": "ISC",
@@ -66,7 +75,17 @@
     "pngquant-bin": "^3.0.0",
     "uglify-js": "^2.6.1",{{#is framework 'bigwheel'}}
     "brfs": "^1.2.0",
-    "browserify-shim": "^3.8.0",{{/is}}
+    "browserify-shim": "^3.8.0",{{/is}}{{#is app 'electron'}}
+    "electron-connect": "^0.4.2",
+    "electron-debug": "^1.0.1",
+    "electron-devtools-installer": "^2.0.0",
+    "electron-packager": "^7.4.0",
+    "electron-prebuilt": "^1.3.0",
+    "os": "^0.1.1",
+    "fs-extra": "^0.30.0",{{/is}}{{#is app 'chrome'}}
+    "crx": "^3.0.3",
+    "jade": "^1.11.0",
+    "shelljs": "^0.7.3",{{/is}}
     "browserify": "^12.0.1"{{#if useES6}},
     "babelify": "^7.2.0",
     "babel-runtime": "^5.8.34",

templates/chrome/.gitattributes

@@ -0,0 +1 @@
+assets/**/* filter=lfs diff=lfs merge=lfs -text

templates/chrome/content_script.js

@@ -0,0 +1,2 @@
+//put your content script here
+console.log('no content script yet');

templates/chrome/extension/background.js

@@ -0,0 +1,29 @@
+const bluebird = require('bluebird');
+global.Promise = bluebird;
+
+function promisifier(method) {
+  // return a function
+  return function promisified(...args) {
+    // which returns a promise
+    return new Promise(resolve => {
+      args.push(resolve);
+      method.apply(this, args);
+    });
+  };
+}
+
+function promisifyAll(obj, list) {
+  list.forEach(api => bluebird.promisifyAll(obj[api], { promisifier }));
+}
+
+promisifyAll(chrome, [
+  'windows',
+  'browserAction',
+  'tabs',
+]);
+promisifyAll(chrome.storage, [
+  'local',
+]);
+
+require('./background/inject');
+require('./background/badge');

templates/chrome/extension/background/badge.js

@@ -0,0 +1,13 @@
+chrome.storage.local.get('todos', (obj) => {
+  let todos = obj.todos;
+  if (todos) {
+    todos = JSON.parse(todos);
+    const len = todos.filter((todo) => !todo.marked).length;
+    if (len > 0) {
+     // chrome.browserAction.setBadgeText({ text: len.toString() });
+    }
+  } else {
+    // Initial
+    // chrome.browserAction.setBadgeText({ text: '1' });
+  }
+});

templates/chrome/extension/background/inject.js

@@ -0,0 +1,29 @@
+function loadScript(name, tabId, cb) {
+  manageNotify();
+  if (process.env.NODE_ENV === 'production') {
+    chrome.tabs.executeScript(tabId, { file: `/${name}.bundle.js`, runAt: 'document_end' }, cb);
+  } else {
+    // dev: async fetch bundle
+    fetch(`http://localhost:3000/${name}.bundle.js`)
+    .then(res => res.text())
+    .then(fetchRes => {
+      const request = new XMLHttpRequest();
+      chrome.tabs.executeScript(tabId, { code: fetchRes, runAt: 'document_end' }, cb);
+    });
+  }
+}
+
+chrome.tabs.onUpdated.addListener( (tabId, changeInfo, tab) => {
+  if (changeInfo.status !== 'loading') return;
+  if (chrome.runtime.lastError) return;
+});
+
+chrome.tabs.onActivated.addListener( (tab) => {
+  if(loadedTabs.indexOf(tab.tabId) === -1) {
+    loadedTabs.push(tab.tabId);
+    chrome.tabs.executeScript(tab.tabId, {
+      file: 'content_script.js',
+      runAt: 'document_end'
+    });
+  }
+});