Release 4.1.0

benm071 · benm071 · commit 4f38f565062b · 2017-11-17T12:18:49.000-08:00
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
-# @oracle/oraclejet-tooling 4.0.0
+# @oracle/oraclejet-tooling 4.1.0
 
 ## About the tooling API
 This tooling API contains methods to build and serve Oracle JET web and hybrid mobile apps. It is intended to be used with task running tools such as grunt or gulp. The APIs can also be invoked directly. 
 
 This is an open source project maintained by Oracle Corp.
 
 ## Installation
-This module will be automatically installed when you scaffold a web or hybrid mobile app following the [Oracle JET Developers Guide](http://docs.oracle.com/middleware/jet400/jet/).
+This module will be automatically installed when you scaffold a web or hybrid mobile app following the [Oracle JET Developers Guide](http://docs.oracle.com/middleware/jet410/jet/).
 
 ## [Contributing](https://github.com/oracle/oraclejet-tooling/tree/master/CONTRIBUTING.md)
 Oracle JET is an open source project.  Pull Requests are currently not being accepted. See 
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -1,5 +1,8 @@
 ## Release Notes for oraclejet-tooling ##
 
+### 4.1.0
+* No changes
+
 ### 4.0.0
 * Moved module into @oracle scope, changing the name to @oracle/oraclejet-tooling
 
diff --git a/lib/buildCommon.js b/lib/buildCommon.js
@@ -16,6 +16,7 @@ const npmCopy = require('./npmCopyConfig');
 const mainJsInjector = require('./mainJsInjector');
 const indexHtmlInjector = require('./indexHtmlInjector');
 const CONSTANTS = require('./constants');
+const svg = require('./svg');
 
 function _getUglyCode(file, uglifyOptions) {
   const code = fs.readFileSync(file, 'utf-8');
@@ -44,7 +45,11 @@ function _copyFileToStaging(fileList) {
       for (let i = 0; i < fileList.length; i++) {
         const destDir = fileList[i].dest;
         const srcDir = fileList[i].src;
-        fs.copySync(srcDir, destDir, { clobber: true });
+        if (_isSvgFile(srcDir)) {
+          fs.copySync(srcDir, destDir, { overwrite: false, errorOnExist: false });
+        } else {
+          fs.copySync(srcDir, destDir, { overwrite: true });
+        }
       }
       resolve();
     } catch (error) {
@@ -53,6 +58,10 @@ function _copyFileToStaging(fileList) {
   });
 }
 
+function _isSvgFile(fileName) {
+  return path.extname(fileName) === '.svg';
+}
+
 function _getThemeSrcPath(theme) {
   return `${config('paths').staging.themes}/${theme.name}/${theme.platform}`;
 }
@@ -369,4 +378,15 @@ module.exports = {
       resolve(context);
     });
   },
+
+  spriteSvg: function _spriteSvg(context) {
+    console.log('optimizing svg into SVG sprites.....');
+    return new Promise((resolve, reject) => {
+      svg.spriteSvg(context, (err) => {
+        if (err) reject(err);
+      });
+      console.log('svg task finished...');
+      resolve(context);
+    });
+  },
 };
diff --git a/lib/buildHybrid.js b/lib/buildHybrid.js
@@ -115,6 +115,7 @@ function _runCommonBuildTasks(context) {
     buildCommon.clean(context)
       .then(buildCommon.copy)
       .then(buildCommon.copyLibs)
+      .then(buildCommon.spriteSvg)
       .then(buildCommon.sass)
       .then(buildCommon.copyThemes)
       .then(buildCommon.injectTheme)
diff --git a/lib/buildWeb.js b/lib/buildWeb.js
@@ -26,6 +26,7 @@ function _runCommonBuildTasks(context) {
     buildCommon.clean(context)
       .then(buildCommon.copy)
       .then(buildCommon.copyLibs)
+      .then(buildCommon.spriteSvg)
       .then(buildCommon.sass)
       .then(buildCommon.injectTheme)
       .then(buildCommon.copyThemes)
diff --git a/lib/constants.js b/lib/constants.js
@@ -15,6 +15,7 @@ module.exports = {
   DEFAULT_BROWSER: 'chrome',
   COMMON_THEME_DIRECTORY: 'common',
   JET_COMPOSITE_DIRECTORY: 'jet-composites',
+  SUPPORTED_THEME_PLATFORMS: ['android', 'ios', 'web', 'windows', 'common'],
   SUPPORTED_PLATFORMS: ['android', 'ios', 'web', 'windows'],
   SUPPORTED_HYBRID_PLATFORMS: ['android', 'ios', 'windows'],
   SUPPORTED_BROWSERS: ['chrome', 'firefox', 'edge', 'ie', 'opera', 'safari'],
@@ -35,5 +36,6 @@ module.exports = {
   SUPPORTED_SERVE_WEB_DESTINATIONS: ['server-only'],
   DEFAULT_BUILD_DESTINATION: 'emulator',
   RESERVED_Key_ALL_THEME: 'all',
-  ORACLE_JET_CONFIG_JSON: 'oraclejetconfig.json'
+  ORACLE_JET_CONFIG_JSON: 'oraclejetconfig.json',
+  PATH_TO_ORACLEJET: 'node_modules/@oracle/oraclejet/dist'
 };
diff --git a/lib/defaultconfig.js b/lib/defaultconfig.js
@@ -60,6 +60,41 @@ module.exports = {
       }
     }),
 
+    svgMin: paths => ({
+      fileList: [
+        {
+          cwd: `${paths.staging.themes}`,
+          src: ['**/*.svg'],
+          dest: `${paths.staging.themes}`
+        }
+      ],
+      options: {
+        plugins: [
+          { removeXMLNS: false },
+          { removeViewBox: false },
+          { removeUselessStrokeAndFill: false },
+          { convertStyleToAttrs: false },
+          { removeEmptyAttrs: true },
+          {
+            removeAttrs: {
+              attrs: ['xmlnsX']
+            }
+          }
+        ]
+      }
+    }),
+
+    svgSprite: {
+      options: {
+        shape: {
+          spacing: { // Add padding
+            padding: 2, // 0 would sometimes have nearby sprites bleeding in (see "layout")
+            box: 'content' // I was hoping this would exclude the padding but doesn't, so have to include the padding in the background-position
+          }
+        }
+      }
+    },
+
     copySrcToStaging: paths => ({
       fileList: [
         {
diff --git a/lib/svg.js b/lib/svg.js
@@ -0,0 +1,153 @@
+/**
+  Copyright (c) 2015, 2017, Oracle and/or its affiliates.
+  The Universal Permissive License (UPL), Version 1.0
+*/
+'use strict';
+
+const fs = require('fs-extra');
+const util = require('./util');
+const path = require('path');
+const SVGO = require('svgo');
+const glob = require('glob');
+const config = require('./config');
+const CONSTANTS = require('./constants');
+const SVGSpriter = require('svg-sprite');
+
+/**
+ * Return the promise to optimize user provided svg files, remove redundant content
+ * @param  {Object} Running context that contains all options
+ * @returns {Promise} return the promise
+ */
+
+function _svgMin(context) {
+  const opts = context.opts.svgMin;
+  const fileResult = util.getFileList(context.buildType, opts.fileList);
+  const svgo = new SVGO(opts.options);
+  return new Promise((resolve, reject) => {
+    try {
+      fileResult.forEach((file) => {
+        const src = fs.readFileSync(file.src);
+        svgo.optimize(src, (result) => {
+          if (result.error) reject(result.error);
+          fs.outputFileSync(path.resolve(file.dest), result.data);
+        });
+      });
+      resolve(context);
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+
+/**
+ * Return the promise to combine user provided svg files into a sprite.svg
+ * and update the _oj.common.sprite.scss
+ * @param  {Object} Running context that contains all options
+ * @returns {Promise} return the promise
+ */
+function _svgSprite(context) {
+  const opts = context.opts.svgSprite;
+  const padding = opts.options.shape.spacing.padding || 2;
+  const themePath = path.join(`${config('paths').staging.themes}`, CONSTANTS.DEFAULT_THEME);
+  return new Promise((resolve, reject) => {
+    try {
+      fs.readdirSync(themePath).forEach((dir) => {
+        if (CONSTANTS.SUPPORTED_THEME_PLATFORMS.indexOf(dir) !== -1) {
+          opts.options.mode = _svgSpriteMode(_mapToSourceSkinName(dir));
+          const fileList = glob.sync('**/*.svg', { cwd: path.join(themePath, dir) });
+          if (opts.options.shape.spacing.padding) opts.options.shape.spacing.padding = padding;
+          const spriter = new SVGSpriter(opts.options);
+          fileList.forEach((file) => {
+            if (path.basename(file) !== 'sprite.svg') {
+              const fileBase = path.join(themePath, dir);
+              spriter.add(path.resolve(file), path.basename(file), fs.readFileSync(path.resolve(fileBase, file), { encoding: 'utf-8' }));
+            }
+          });
+          spriter.compile((error, result) => {
+            Object.keys(result).forEach((mode) => {
+              Object.keys(result[mode]).forEach((resource) => {
+                const output = result[mode][resource];
+                const svgDestSuffix = 'images/sprites/sprite.svg';
+                let dest = path.join(config('paths').staging.themes, CONSTANTS.DEFAULT_THEME, dir, svgDestSuffix);
+                dest = path.extname(output.path) === '.svg' ? dest : output.path;
+                const filePrefix = _mapToSourceSkinName(dir).replace('-', '.');
+                fs.outputFileSync(dest, output.contents);
+                const content = fs.readFileSync(dest, 'utf-8').replace(/_(?!.+\.svg)/g, '-');
+                if (filePrefix !== 'common') {
+                  fs.outputFileSync(dest, content.replace(/common\.sprite/g, `${filePrefix}.sprite`));
+                } else {
+                  fs.outputFileSync(dest, content.replace(/oj-image-url/g, 'oj-common-image-url'));
+                }
+              });
+            });
+          });
+        }
+      });
+      resolve(context);
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+
+/**
+ * Return the mode configuration for svg spriter
+ * @param  {String} Skin name
+ * @returns {Object} return the object configuration
+ */
+function _svgSpriteMode(skin) {
+  const filePrefix = skin.replace('-', '.');
+  return {
+    css: {
+      render: {
+        scss: {
+          template: `${CONSTANTS.PATH_TO_ORACLEJET}/scss/templates/svg-sprite-template.scss.txt`,
+          dest: `${CONSTANTS.PATH_TO_ORACLEJET}/scss/${skin}/widgets/_oj.${filePrefix}.sprite.scss`
+        }
+      },
+      layout: 'horizontal',
+      dest: '.',
+      sprite: 'sprite.svg',
+      bust: false,
+      example: false
+    }
+  };
+}
+
+/**
+ * Map the tooling theme skin to JET distribution
+ * @param  {String} skin name
+ * @returns {String} skin name
+ */
+function _mapToSourceSkinName(skin) {
+  switch (skin) {
+    case 'web':
+      return 'alta';
+    case 'ios':
+      return 'alta-ios';
+    case 'android':
+      return 'alta-android';
+    case 'windows':
+      return 'alta-windows';
+    case 'common':
+      return 'common';
+    default:
+      return skin;
+  }
+}
+
+module.exports = {
+  spriteSvg: function _spriteSvg(context) {
+    return new Promise((resolve, reject) => {
+      try {
+        _svgMin(context)
+        .then(_svgSprite)
+        .then(() => {
+          resolve(context);
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oracle/oraclejet-tooling",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "license": "UPL-1.0",
   "description": "Programmatic API to build and serve Oracle JET web and mobile applications",
   "keywords": [
@@ -13,7 +13,7 @@
     "lib"
   ],
   "dependencies": {
-    "fs-extra": "^1.0.0",
+    "fs-extra": "^4.0.0",
     "glob": "^7.1.1",
     "lodash.difference": "^4.5.0",
     "lodash.escaperegexp": "^4.1.2",
@@ -30,13 +30,15 @@
     "tiny-lr": "^1.0.3",
     "serve-static": "^1.11.1",
     "serve-index": "^1.8.0",
-    "opn": "^4.0.2"
+    "opn": "^4.0.2",
+    "svgo": "^0.7.0",
+    "svg-sprite": "^1.3.7"
   },
   "engines": {
     "node": ">=4.0.0"
   },
   "devDependencies": {
     "eslint": "~3.19.0"
   },
-  "jetdocversion": "400"    
+  "jetdocversion": "410"
 }
