adding a version getter to each component (#453)

kylebuch8 · mwcz · commit 7d5e78ff11a7 · 2019-07-17T14:50:36.000-04:00
* adding a version getter to each component Reads the version in the package.json file and adds it as a getter during the build process Fixes #428 * add element versions to license comments * add 'PatternFly Elements' to the version comment
diff --git a/elements/pfe-accordion/gulpfile.js b/elements/pfe-accordion/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-autocomplete/gulpfile.js b/elements/pfe-autocomplete/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-avatar/gulpfile.js b/elements/pfe-avatar/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-band/gulpfile.js b/elements/pfe-band/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-card/gulpfile.js b/elements/pfe-card/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-content-set/gulpfile.js b/elements/pfe-content-set/gulpfile.js
@@ -1,4 +1,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-cta/gulpfile.js b/elements/pfe-cta/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-datetime/gulpfile.js b/elements/pfe-datetime/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-health-index/gulpfile.js b/elements/pfe-health-index/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-icon-panel/gulpfile.js b/elements/pfe-icon-panel/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-icon/gulpfile.js b/elements/pfe-icon/gulpfile.js
@@ -46,6 +46,6 @@ gulp.task("combineAndStuff", gulp.series("svgSprite", "stuffSprite"));
 
 // call the central gulp build, and pass in the custom tasks to be run pre-bundle
 gulpFactory({
-  ...pfelementPackage.pfelement,
+  ...pfelementPackage,
   prebundle: ["combineAndStuff"]
 });
diff --git a/elements/pfe-markdown/gulpfile.js b/elements/pfe-markdown/gulpfile.js
@@ -1,4 +1,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-number/gulpfile.js b/elements/pfe-number/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-page-status/gulpfile.js b/elements/pfe-page-status/gulpfile.js
@@ -1,4 +1,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfe-tabs/gulpfile.js b/elements/pfe-tabs/gulpfile.js
@@ -2,4 +2,4 @@
 const gulpFactory = require("../../scripts/gulpfile.factory.js");
 const pfelementPackage = require("./package.json");
 
-gulpFactory(pfelementPackage.pfelement);
+gulpFactory(pfelementPackage);
diff --git a/elements/pfelement/gulpfile.js b/elements/pfelement/gulpfile.js
@@ -9,6 +9,7 @@ const replace = require("gulp-replace");
 const cleanCSS = require("gulp-clean-css");
 const trim = require("gulp-trim");
 const banner = require("gulp-banner");
+const package = require("./package.json");
 
 gulp.task("clean", () => {
   return del(["pfelement.js", "./**/*.umd.*", "./*.css", "./*.js.map"]);
@@ -36,11 +37,14 @@ gulp.task("copy", () => {
     .src(["./src/*"])
     .pipe(
       banner(
-        `/*\n${fs
-          .readFileSync("LICENSE.txt", "utf8")
-          .split("\n")
-          .map(line => ` * ${line}\n`)
-          .join("")}*/\n\n`
+        `/*!
+ * PatternFly Elements: ${package.pfelement.className} ${package.version}
+ * @license
+${fs
+  .readFileSync("LICENSE.txt", "utf8")
+  .split("\n")
+  .map(line => ` * ${line}\n`)
+  .join("")}*/\n\n`
       )
     )
     .pipe(gulp.dest("./"));
@@ -58,6 +62,13 @@ gulp.task("minify-css", () => {
     .pipe(gulp.dest("./"));
 });
 
+gulp.task("replace-version", () => {
+  return gulp
+    .src("./pfelement.js")
+    .pipe(replace("{{version}}", package.version))
+    .pipe(gulp.dest("./"));
+});
+
 gulp.task("watch", () => {
   return gulp.watch("./src/**/*", gulp.series("build"));
 });
@@ -66,7 +77,14 @@ gulp.task("bundle", shell.task("../../node_modules/.bin/rollup -c"));
 
 gulp.task(
   "build",
-  gulp.series("clean", "copy", "compile", "minify-css", "bundle")
+  gulp.series(
+    "clean",
+    "copy",
+    "replace-version",
+    "compile",
+    "minify-css",
+    "bundle"
+  )
 );
 
 gulp.task("default", gulp.series("build"));
diff --git a/elements/pfelement/src/pfelement.js b/elements/pfelement/src/pfelement.js
diff --git a/scripts/gulpfile.factory.js b/scripts/gulpfile.factory.js
@@ -1,6 +1,6 @@
 module.exports = function factory({
-  elementName,
-  className,
+  version,
+  pfelement: { elementName, className },
   prebundle = []
 } = {}) {
   const { task, src, dest, watch, parallel, series } = require("gulp");
@@ -118,11 +118,7 @@ module.exports = function factory({
 
   // Delete the temp directory
   task("clean", () => {
-    return src([
-      "*.{js,css,map}",
-      "!gulpfile.js",
-      "!rollup.config.js"
-    ], {
+    return src(["*.{js,css,map}", "!gulpfile.js", "!rollup.config.js"], {
       cwd: paths.compiled,
       read: false,
       allowEmpty: true
@@ -233,6 +229,10 @@ module.exports = function factory({
             }
 
             let template = classStatement;
+            template += `
+  static get version() {
+    return "${version}";
+  }`;
             if (cssResult || html) {
               template += `
 
@@ -261,24 +261,23 @@ module.exports = function factory({
       )
       .pipe(
         banner(
-          `/*\n * @license\n${fs
-            .readFileSync("LICENSE.txt", "utf8")
-            .split("\n")
-            .map(line => ` * ${line}\n`)
-            .join("")}*/\n\n`
+          `/*!
+ * PatternFly Elements: ${className} ${version}
+ * @license
+${fs
+  .readFileSync("LICENSE.txt", "utf8")
+  .split("\n")
+  .map(line => ` * ${line}\n`)
+  .join("")}*/\n\n`
         )
       )
       .pipe(dest(paths.compiled));
   });
 
   task("copy", () => {
-    return src([
-      "*.js",
-      `!${elementName}.js`
-    ], {
+    return src(["*.js", `!${elementName}.js`], {
       cwd: paths.source
-    })
-      .pipe(dest(paths.compiled));
+    }).pipe(dest(paths.compiled));
   });
 
   task("compile", () => {
