Merge pull request #104 from omahajs/bugfix/native-app-webpack-support

Bugfix/native app webpack support
omahajs · Apr 3, 2018 · 1fe4b5c · 1fe4b5c
2 parents 30dce42 + 3cc83cf
commit 1fe4b5c
Show file tree

Hide file tree

Showing 25 changed files with 111 additions and 61 deletions.
diff --git a/generators/app/gruntTaskConfigs.js b/generators/app/gruntTaskConfigs.js
@@ -136,9 +136,9 @@ module.exports = {
         fonts: {
             files: [{
                 expand: true,
-                flatten: true,
-                src: ['<%= folders.assets %>/<%= files.fonts %>'],
-                dest: '<%= folders.dist %>/<%= deployed.assets %>/<%= deployed.fonts %>',
+                cwd: '<%= folders.assets %>/fonts',
+                src: ['<%= files.fonts %>'],
+                dest: '<%= folders.dist %>/<%= deployed.assets %>/fonts',
                 filter: 'isFile'
             }]
         },
@@ -158,18 +158,18 @@ module.exports = {
         images: {
             files: [{
                 expand: true,
-                flatten: false,
-                src: ['<%= folders.assets %>/<%= files.images %>'],
-                dest: '<%= folders.dist %>',
+                cwd: '<%= folders.assets %>/images',
+                src: ['<%= files.images %>'],
+                dest: '<%= folders.dist %>/<%= deployed.assets %>/images',
                 filter: 'isFile'
             }]
         },
         workers: {
             files: [{
                 expand: true,
-                flatten: false,
-                src: ['<%= folders.assets %>/workers/<%= files.scripts %>'],
-                dest: '<%= folders.dist %>',
+                cwd: '<%= folders.assets %>/workers',
+                src: ['<%= files.scripts %>'],
+                dest: '<%= folders.dist %>/<%= deployed.assets %>/workers',
                 filter: 'isFile'
             }]
         }
@@ -297,7 +297,7 @@ module.exports = {
                 expand: true,
                 flatten: false,
                 cwd: './',
-                src: ['<%= folders.assets %>/<%= files.images %>'],
+                src: ['<%= folders.assets %>/images/<%= files.images %>'],
                 dest: '<%= folders.dist %>'
             }]
         }

diff --git a/generators/native/index.js b/generators/native/index.js
@@ -1,4 +1,7 @@
+
+
 const { set } = require('lodash');
+
 const Generator = require('yeoman-generator');
 const banner = require('../app/banner');
 const footer = require('../app/doneMessage');
@@ -18,7 +21,8 @@ const COMMAND_LINE_OPTIONS = {
 
 module.exports = class extends Generator {
     initializing() {
-        this.log(banner);
+        const generator = this;
+        generator.log(banner);
     }
     constructor(args, opts) {
         super(args, opts);
@@ -42,24 +46,26 @@ module.exports = class extends Generator {
     writing() {
         const generator = this;
         const { config } = generator;
-        const isWebapp = config.get('isWebapp');
+        const { isWebapp, moduleFormat } = config.getAll();
         const rendererIndexPath = isWebapp ? 'app/index.html' : 'index.html';
+        generator.moduleFormat = moduleFormat;
         copy('bin/preload.js', 'bin/preload.js', generator);
         copyTpl('_index.html', config.get('sourceDirectory') + rendererIndexPath, generator);
         copyTpl('_index.js', 'index.js', set(generator, 'rendererIndexPath', rendererIndexPath));
     }
     install() {
+        const generator = this;
         //
         // Install dependencies
         //
         const dependencies = ['electron', 'electron-context-menu', 'electron-debug', 'electron-is-dev'];
         const devDependencies = ['spectron', 'electron-reloader'].concat();
-        this.npmInstall(dependencies, { save: true });
-        this.npmInstall(devDependencies, { saveDev: true });
+        generator.npmInstall(dependencies, { save: true });
+        generator.npmInstall(devDependencies, { saveDev: true });
         //
         // Configure package.json
         //
-        extend(this.destinationPath('package.json'), {
+        extend(generator.destinationPath('package.json'), {
             main: './index.js',
             scripts: {
                 start: 'electron index',
@@ -68,6 +74,7 @@ module.exports = class extends Generator {
         });
     }
     end() {
-        this.log(footer(this));
+        const generator = this;
+        generator.log(footer(generator));
     }
 };
diff --git a/generators/native/templates/_index.js b/generators/native/templates/_index.js
@@ -42,7 +42,7 @@ const createWindow = () => {
     });
     Menu.setApplicationMenu(applicationMenu);
     ContextMenu({prepend: (params, browserWindow) => menuItems});
-    mainWindow.loadURL(`file://${__dirname}/renderer/app/index.html`);
+    mainWindow.loadURL(`file://${__dirname}/renderer/<% if (moduleFormat === 'amd') { %>app<% } else {%>dist/client<% } %>/index.html`);
     //
     // Open dev console
     //

diff --git a/generators/project/index.js b/generators/project/index.js
@@ -32,6 +32,7 @@ const getProjectVariables = generator => {
     const { projectName } = use;
     return {
         projectName,
+        isNative: generator.config.get('isNative'),
         sourceDirectory: getSourceDirectory(generator),
         useBenchmark: use.benchmark && !skipBenchmark && !slim,
         useCoveralls: use.coveralls && !skipCoveralls && !slim,

diff --git a/generators/project/templates/_Gruntfile.js b/generators/project/templates/_Gruntfile.js
@@ -8,9 +8,7 @@ module.exports = function(grunt) {
         folders: config.folders,
         files:   config.files,
         deployed: {
-            assets: config.folders.assets.split('/')[1],
-            images: config.files.images.split('/')[0],
-            fonts:  config.files.fonts.split('/')[0]
+            assets: config.folders.assets.split('/')[1]
         }
     });
     require('time-grunt')(grunt);

diff --git a/generators/project/templates/config/_default.json b/generators/project/templates/config/_default.json
@@ -26,13 +26,13 @@
             },
             "index":        "index.html",
             "scripts":      "**/*.js",
+            "fonts":        "**/*.{ttf,woff,eot,svg}",
+            "images":       "**/*.{png,jpg,gif,svg}",
             "mainScript":   "main.js",
             "configScript": "config.js",
             "models":       "models/**/*.js",
             "views":        "views/**/*.js",
             "controllers":  "controllers/**/*.js",
-            "fonts":        "fonts/*.{ttf,woff,eot,svg}",
-            "images":       "images/**/*.{png,jpg,gif,svg}",
             "templates":    "templates/**/*.hbs"
         }
     }

diff --git a/generators/project/templates/config/_webpack.config.js b/generators/project/templates/config/_webpack.config.js
@@ -6,7 +6,7 @@ module.exports = {
         app: './<%= sourceDirectory %>app/main.js'
     },
     output: {
-        path: resolve('./dist/client'),
+        path: resolve('./<% if (isNative) { %><%= sourceDirectory %><% } %>dist/client'),
         filename: 'bundle.min.js'
     },
     module: {

diff --git a/generators/webapp/index.js b/generators/webapp/index.js
@@ -209,6 +209,13 @@ module.exports = class extends Generator {
                 }
             }
         });
+        config.get('isNative') && extend(generator.destinationPath('config/default.json'), {
+            grunt: {
+                folders: {
+                    dist: `${sourceDirectory}dist`
+                }
+            }
+        });
         //
         // Configure package.json
         //

diff --git a/generators/webapp/templates/_style.css b/generators/webapp/templates/_style.css
@@ -2,7 +2,7 @@
 
 body {
     background-color: white;
-    background-image: url("../<%= sourceDirectory %>assets/images/logo.png");
+    background-image: url("../<% if (!isNative) { %><%= sourceDirectory %><% } %>assets/images/logo.png");
     background-position: 50% -50%;
     background-repeat: no-repeat;
     background-size: 250px;

diff --git a/generators/webapp/templates/_style.less b/generators/webapp/templates/_style.less
@@ -2,7 +2,7 @@
 
 body {
     background-color: white;
-    background-image: url("../<%= sourceDirectory %>assets/images/logo.png");
+    background-image: url("../<% if (!isNative) { %><%= sourceDirectory %><% } %>assets/images/logo.png");
     background-position: 50% -50%;
     background-repeat: no-repeat;
     background-size: 250px;

diff --git a/generators/webapp/templates/_style.scss b/generators/webapp/templates/_style.scss
@@ -4,7 +4,7 @@
 
 body {
     background-color: white;
-    background-image: url("../<%= sourceDirectory %>assets/images/logo.png");
+    background-image: url("../<% if (!isNative) { %><%= sourceDirectory %><% } %>assets/images/logo.png");
     background-position: 50% -50%;
     background-repeat: no-repeat;
     background-size: 250px;

diff --git a/generators/webapp/templates/tasks/webapp.js b/generators/webapp/templates/tasks/webapp.js
@@ -48,9 +48,12 @@ module.exports = function(grunt) {
         'postcss:dev',/* post-process */
         'postcss:prod'
     ]);<% if (moduleFormat !== 'amd') { %>
-    task('bundle-scripts', [
-        <% if (useBrowserify) { %>'browserify:bundle'<% } %>
-        <% if (useWebpack) { %>'webpack:bundle'<% } %>
+    task('bundle-scripts', [<% if (useBrowserify) { %>
+        'browserify:bundle'<% } %><% if (useWebpack) { %>
+        'webpack:bundle'<% } %><% if (isNative) { %>,
+        'htmlmin',
+        'copy',
+        'replace:bundle-url'<% } %>
     ]);<% } %>
     task('compile', [
         'clean:compile',

diff --git a/src/app/gruntTaskConfigs.js b/src/app/gruntTaskConfigs.js
@@ -136,9 +136,9 @@ module.exports = {
         fonts: {
             files: [{
                 expand: true,
-                flatten: true,
-                src: ['<%= folders.assets %>/<%= files.fonts %>'],
-                dest: '<%= folders.dist %>/<%= deployed.assets %>/<%= deployed.fonts %>',
+                cwd: '<%= folders.assets %>/fonts',
+                src: ['<%= files.fonts %>'],
+                dest: '<%= folders.dist %>/<%= deployed.assets %>/fonts',
                 filter: 'isFile'
             }]
         },
@@ -158,18 +158,18 @@ module.exports = {
         images: {
             files: [{
                 expand: true,
-                flatten: false,
-                src: ['<%= folders.assets %>/<%= files.images %>'],
-                dest: '<%= folders.dist %>',
+                cwd: '<%= folders.assets %>/images',
+                src: ['<%= files.images %>'],
+                dest: '<%= folders.dist %>/<%= deployed.assets %>/images',
                 filter: 'isFile'
             }]
         },
         workers: {
             files: [{
                 expand: true,
-                flatten: false,
-                src: ['<%= folders.assets %>/workers/<%= files.scripts %>'],
-                dest: '<%= folders.dist %>',
+                cwd: '<%= folders.assets %>/workers',
+                src: ['<%= files.scripts %>'],
+                dest: '<%= folders.dist %>/<%= deployed.assets %>/workers',
                 filter: 'isFile'
             }]
         }
@@ -297,7 +297,7 @@ module.exports = {
                 expand: true,
                 flatten: false,
                 cwd: './',
-                src: ['<%= folders.assets %>/<%= files.images %>'],
+                src: ['<%= folders.assets %>/images/<%= files.images %>'],
                 dest: '<%= folders.dist %>'
             }]
         }

diff --git a/src/native/index.js b/src/native/index.js
@@ -1,4 +1,6 @@
 /* @flow */
+import type {NativeGenerator} from '../types';
+
 const {set}     = require('lodash');
 const Generator = require('yeoman-generator');
 const banner    = require('../app/banner');
@@ -19,11 +21,12 @@ const COMMAND_LINE_OPTIONS = {
 
 module.exports = class extends Generator {
     initializing() {
-        this.log(banner);
+        const generator: NativeGenerator = this;
+        generator.log(banner);
     }
     constructor(args: any, opts: any) {
         super(args, opts);
-        const generator = this;
+        const generator: NativeGenerator = this;
         const {config, options} = generator;
         Object.keys(COMMAND_LINE_OPTIONS).forEach(option => {
             generator.option(option, COMMAND_LINE_OPTIONS[option]);
@@ -41,15 +44,17 @@ module.exports = class extends Generator {
         }
     }
     writing() {
-        const generator = this;
+        const generator: NativeGenerator = this;
         const {config} = generator;
-        const isWebapp = config.get('isWebapp');
+        const {isWebapp, moduleFormat} = config.getAll();
         const rendererIndexPath = isWebapp ? 'app/index.html' : 'index.html';
+        generator.moduleFormat = moduleFormat;
         copy('bin/preload.js', 'bin/preload.js', generator);
         copyTpl('_index.html', config.get('sourceDirectory') + rendererIndexPath, generator);
         copyTpl('_index.js', 'index.js', set(generator, 'rendererIndexPath', rendererIndexPath));
     }
     install() {
+        const generator: NativeGenerator = this;
         //
         // Install dependencies
         //
@@ -67,12 +72,12 @@ module.exports = class extends Generator {
             // 'electron-builder',// https://github.com/electron-userland/electron-builder
             // 'electron-packager'// https://github.com/electron-userland/electron-packager
         );
-        this.npmInstall(dependencies, {save: true});
-        this.npmInstall(devDependencies, {saveDev: true});
+        generator.npmInstall(dependencies, {save: true});
+        generator.npmInstall(devDependencies, {saveDev: true});
         //
         // Configure package.json
         //
-        extend(this.destinationPath('package.json'), {
+        extend(generator.destinationPath('package.json'), {
             main: './index.js',
             scripts: {
                 start: 'electron index',
@@ -81,6 +86,7 @@ module.exports = class extends Generator {
         });
     }
     end() {
-        this.log(footer(this));
+        const generator: NativeGenerator = this;
+        generator.log(footer(generator));
     }
 };
diff --git a/src/native/templates/_index.js b/src/native/templates/_index.js
@@ -42,7 +42,7 @@ const createWindow = () => {
     });
     Menu.setApplicationMenu(applicationMenu);
     ContextMenu({prepend: (params, browserWindow) => menuItems});
-    mainWindow.loadURL(`file://${__dirname}/renderer/app/index.html`);
+    mainWindow.loadURL(`file://${__dirname}/renderer/<% if (moduleFormat === 'amd') { %>app<% } else {%>dist/client<% } %>/index.html`);
     //
     // Open dev console
     //

diff --git a/src/project/index.js b/src/project/index.js
@@ -32,6 +32,7 @@ const getProjectVariables = (generator: ProjectGenerator) => {
     const {projectName} = use;
     return {
         projectName,
+        isNative:        generator.config.get('isNative'),
         sourceDirectory: getSourceDirectory(generator),
         useBenchmark:    use.benchmark && !skipBenchmark && !slim,
         useCoveralls:    use.coveralls && !skipCoveralls && !slim,

diff --git a/src/project/templates/_Gruntfile.js b/src/project/templates/_Gruntfile.js
@@ -8,9 +8,7 @@ module.exports = function(grunt) {
         folders: config.folders,
         files:   config.files,
         deployed: {
-            assets: config.folders.assets.split('/')[1],
-            images: config.files.images.split('/')[0],
-            fonts:  config.files.fonts.split('/')[0]
+            assets: config.folders.assets.split('/')[1]
         }
     });
     require('time-grunt')(grunt);

diff --git a/src/project/templates/config/_default.json b/src/project/templates/config/_default.json
@@ -26,13 +26,13 @@
             },
             "index":        "index.html",
             "scripts":      "**/*.js",
+            "fonts":        "**/*.{ttf,woff,eot,svg}",
+            "images":       "**/*.{png,jpg,gif,svg}",
             "mainScript":   "main.js",
             "configScript": "config.js",
             "models":       "models/**/*.js",
             "views":        "views/**/*.js",
             "controllers":  "controllers/**/*.js",
-            "fonts":        "fonts/*.{ttf,woff,eot,svg}",
-            "images":       "images/**/*.{png,jpg,gif,svg}",
             "templates":    "templates/**/*.hbs"
         }
     }

diff --git a/src/project/templates/config/_webpack.config.js b/src/project/templates/config/_webpack.config.js
@@ -6,7 +6,7 @@ module.exports = {
         app: './<%= sourceDirectory %>app/main.js'
     },
     output: {
-        path: resolve('./dist/client'),
+        path: resolve('./<% if (isNative) { %><%= sourceDirectory %><% } %>dist/client'),
         filename: 'bundle.min.js'
     },
     module: {