@openeuropa/bcl-builder 0.16.0 → 0.17.0

package/README.md

@@ -0,0 +1,42 @@
+## BCL builder
+
+The `@openeuropa/bcl-builder` is a package providing scripts to be executed via
+the command line, `styles`, `scripts`, `copy`, `rename` and `sprite`.
+They can be used respectively to compile SASS files and minify css
+files, compile and minify js files, to copy files or rename files and to generate
+svg sprites.
+It comes with a `bin` file that is available when the package is installed and
+can be run as `npm run ecl-builder scriptName`.
+It supports a configuration file `bcl-builder.config.js` where each script can
+be configured to perform specific operations in the enviroment where they are
+used.
+
+### Api
+
+The builder uses by default a bcl-builder.config.js in the same folder where the
+builder script is executed.
+This file will define the different operations you want to perform via the builder.
+The config file is basically an export of the configuration for the different
+commands which all supports multiple operations as items in an array.
+
+`module.exports = { scripts: [{ entry, dest, options } ...], styles: [{ entry, dest, options } ...], rename: [{ entry, dest, options } ...], copy: [{ from, to, options } ...], sprite: [[{ entry, dest, options } ...], };`
+
+#### Styles
+
+`styles: [ { entry (string), dest (string), options (object) [plugins for postcss] https://github.com/postcss/postcss/blob/main/docs/plugins.md { minify (includes css nano for minification) } }, ],`
+
+#### Scripts
+
+`scripts: [ { entry (string), dest (string), options: (object) [rollup js configuration https://rollupjs.org/guide/en/#javascript-api] }, }, ],`
+
+#### Copy
+
+`copy: [ { from: (string), to: (string), options: (object) [copyfiles api conf https://www.npmjs.com/package/copyfiles], }, ],`
+
+#### Reaname
+
+`rename: [ { from: (string), to: (string), options: (object) { search: (glob), operation: [prefix|suffix|rewrite|extension], }, }, ],`
+
+#### Sprite
+
+`sprite: [ { entry: (string), dest: (string), options: (object) { file: (string) (defaut: bcl-icons.svg), list: (array of file names) (optional), }, }, ],`

package/bin/build.js

@@ -7,6 +7,7 @@ const browserslist = require("browserslist");
 const { buildStyles } = require("../scripts/styles");
 const rename = require("../scripts/rename");
 const copyFiles = require("../scripts/copy");
+const makeSprite = require("../scripts/sprite");
 const pkg = require("../package.json");
 
 const loadConfig = (configFile) => {
@@ -56,6 +57,16 @@ program
     );
   });
 
+program
+  .command("sprite")
+  .description("make svg sprites")
+  .action(() => {
+    const config = loadConfig(program.config);
+    config.sprite.forEach((conf) =>
+      makeSprite(conf.entry || "**", conf.dest, conf.options)
+    );
+  });
+
 program
   .command("copy")
   .description("copy static files")
@@ -66,15 +77,13 @@ program
     );
   });
 
-  program
-    .command("rename")
-    .description("rename files")
-    .action(() => {
-      const config = loadConfig(program.config);
-      config.rename.forEach((conf) =>
-        rename(conf.from, conf.to, conf.options)
-      );
-    });
+program
+  .command("rename")
+  .description("rename files")
+  .action(() => {
+    const config = loadConfig(program.config);
+    config.rename.forEach((conf) => rename(conf.from, conf.to, conf.options));
+  });
 
 // If no arguments provided, display help menu.
 if (process.argv.slice(2).length <= 0) {

package/conf/svgoDefaultPlugins.js

@@ -0,0 +1,118 @@
+module.exports = [
+  {
+    cleanupAttrs: true,
+  },
+  {
+    cleanupEnableBackground: true,
+  },
+  {
+    cleanupIDs: true,
+  },
+  {
+    cleanupListOfValues: true,
+  },
+  {
+    cleanupNumericValues: true,
+  },
+  {
+    collapseGroups: true,
+  },
+  {
+    convertColors: true,
+  },
+  {
+    convertPathData: {
+      noSpaceAfterFlags: false,
+    },
+  },
+  {
+    convertShapeToPath: true,
+  },
+  {
+    convertStyleToAttrs: true,
+  },
+  {
+    convertTransform: true,
+  },
+  {
+    inlineStyles: true,
+  },
+  {
+    mergePaths: {
+      noSpaceAfterFlags: false,
+    },
+  },
+  {
+    minifyStyles: true,
+  },
+  {
+    moveElemsAttrsToGroup: true,
+  },
+  {
+    moveGroupAttrsToElems: true,
+  },
+  {
+    removeAttrs: {
+      attrs: ["data-name", "fill", "clip-rule"],
+    },
+  },
+  {
+    removeComments: true,
+  },
+  {
+    removeDesc: true,
+  },
+  {
+    removeDoctype: true,
+  },
+  {
+    removeEditorsNSData: true,
+  },
+  {
+    removeEmptyAttrs: true,
+  },
+  {
+    removeEmptyContainers: true,
+  },
+  {
+    removeEmptyText: true,
+  },
+  {
+    removeHiddenElems: true,
+  },
+  {
+    removeMetadata: true,
+  },
+  {
+    removeNonInheritableGroupAttrs: true,
+  },
+  {
+    removeTitle: true,
+  },
+  {
+    removeUnknownsAndDefaults: {
+      keepRoleAttr: true,
+    },
+  },
+  {
+    removeUnusedNS: true,
+  },
+  {
+    removeUselessDefs: true,
+  },
+  {
+    removeUselessStrokeAndFill: true,
+  },
+  {
+    removeViewBox: false,
+  },
+  {
+    removeXMLNS: true,
+  },
+  {
+    removeXMLProcInst: true,
+  },
+  {
+    sortAttrs: true,
+  },
+];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-builder",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Bootstrap Component Library builder",
   "publishConfig": {
     "access": "public"
@@ -11,13 +11,13 @@
     "bcl-builder": "./bin/build.js"
   },
   "dependencies": {
-    "@babel/core": "7.16.0",
-    "@babel/preset-env": "7.16.4",
-    "@babel/runtime": "7.16.3",
+    "@babel/core": "7.16.5",
+    "@babel/preset-env": "7.16.5",
+    "@babel/runtime": "7.16.5",
     "@popperjs/core": "2.11.0",
     "@rollup/plugin-babel": "5.3.0",
-    "@rollup/plugin-commonjs": "20.0.0",
-    "@rollup/plugin-node-resolve": "13.0.6",
+    "@rollup/plugin-commonjs": "21.0.1",
+    "@rollup/plugin-node-resolve": "13.1.1",
     "@rollup/plugin-replace": "3.0.0",
     "autoprefixer": "10.4.0",
     "babel-eslint": "10.1.0",
@@ -26,14 +26,16 @@
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "cssnano": "5.0.12",
-    "postcss": "8.4.4",
-    "rollup": "2.60.2",
+    "postcss": "8.4.5",
+    "rollup": "2.61.1",
     "rollup-plugin-istanbul": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "sass": "1.44.0"
+    "sass": "1.45.0",
+    "svg-sprite": "1.5.3",
+    "svgo": "2.8.0"
   },
   "engines": {
     "node": ">=12.0.0"
   },
-  "gitHead": "39a52d25c36789a0c4712b0f6e55cbc5cbbedcb5"
+  "gitHead": "07ff24de8a209d80750a32cd52dfe9663fabf8e2"
 }

package/scripts/copy.js

@@ -1,3 +1,20 @@
+/**
+ * Copy files.
+ *
+ * @param {string} from - Path to a folder or file.
+ * @param {string} to - String to prefix, suffix or replace the current file name.
+ * @param {object} options - Object
+ *
+ * Example config object: {
+ *  copy: [
+ *   {
+ *     from: [path.resolve(nodeModules, "myfile.js")],
+ *     to: path.resolve(outputFolder, "js"),
+ *     options: { up: true },
+ *   },
+ * ],
+ */
+
 const fs = require("fs");
 const path = require("path");
 const copy = require("copyfiles");

package/scripts/scripts.js

@@ -1,3 +1,36 @@
+/**
+ * Compile and bundle js files.
+ *
+ * @param {string} input - Path to a folder or file.
+ * @param {string} dest - String to prefix, suffix or replace the current file name.
+ * @param {object} options - Object
+ *
+ * Example config object: {
+ *
+ * scripts: [
+ *   {
+ *     entry: path.resolve(__dirname, "src/js/index.esm.js"),
+ *     dest: path.resolve(outputFolder, "js/oe-bcl-default.esm.js"),
+ *     options: {
+ *       format: "esm",
+ *       globals: { "@popperjs/core": "Popper" },
+ *       minify: true,
+ *       sourceMap: true,
+ *       minifyOptions: {
+ *         mangle: true,
+ *         format: {
+ *           comments: /^!/,
+ *         },
+ *         compress: {
+ *           passes: 2,
+ *         },
+ *       },
+ *       external: ["@popperjs/core"],
+ *     },
+ *   },
+ * ],
+ */
+
 const path = require("path");
 const { babel } = require("@rollup/plugin-babel");
 const { nodeResolve } = require("@rollup/plugin-node-resolve");

package/scripts/sprite.js

@@ -0,0 +1,82 @@
+/**
+ * Generate svg sprites.
+ *
+ * @param {string} entry - Path to a folder or file.
+ * @param {string} dest - Output folder path
+ * @param {object} options - Object
+ *
+ * Example config object: {
+ *
+ * sprite: [
+ *   {
+ *     entry: path.resolve(nodeModules, "bootstrap-icons/icons/"),
+ *     dest: path.resolve(outputFolder, "icons/"),
+ *     options: {
+ *       file: "bcl-default-icons.svg",
+ *       list: myList,
+ *       transformPlugins: (array of svgo plugins objects)
+ *     },
+ *   },
+ * ],
+ */
+
+const fs = require("fs");
+const glob = require("glob");
+const mkdirp = require("mkdirp");
+const path = require("path");
+const defaultPlugins = require("../conf/svgoDefaultPlugins");
+const SVGSpriter = require("svg-sprite");
+
+module.exports = (entry, dest, options) => {
+  const outputFile = options.file
+    ? `${dest}/${options.file}`
+    : `${dest}/'bcl-icons.svg`;
+  const files = options.list || glob.sync("*.svg", { cwd: entry });
+
+  const plugins = options.transformPlugins || defaultPlugins;
+
+  const spriter = new SVGSpriter({
+    dest,
+    shape: {
+      transform: [
+        {
+          svgo: {
+            multipass: true,
+            plugins: plugins,
+          },
+        },
+      ],
+    },
+    svg: {
+      namespaceClassnames: false,
+      xmlDeclaration: false,
+    },
+    mode: {
+      symbol: {
+        dest: "",
+        sprite: outputFile,
+      },
+    },
+  });
+
+  files.forEach((file) => {
+    const filePath = path.resolve(entry, file);
+    spriter.add(
+      filePath,
+      file,
+      fs.readFileSync(filePath, { encoding: "utf-8" })
+    );
+  });
+
+  spriter.compile((error, result, data) => {
+    Object.keys(result).forEach((mode) => {
+      Object.keys(result[mode]).forEach((resource) => {
+        mkdirp.sync(path.dirname(result[mode][resource].path));
+        fs.writeFileSync(
+          result[mode][resource].path,
+          result[mode][resource].contents
+        );
+      });
+    });
+  });
+};

package/scripts/styles.js

@@ -1,3 +1,24 @@
+/**
+ * Compile scss files.
+ *
+ * @param {string} from - Path to a folder or file.
+ * @param {string} to - String to prefix, suffix or replace the current file name.
+ * @param {object} options - Object
+ *
+ * Example config object: {
+ *
+ *  styles: [
+ *   {
+ *     entry: [path.resolve(nodeModules, "myfile.js")],
+ *     dest: path.resolve(outputFolder, "js"),
+ *     options: {
+ *       includePaths,
+ *       sourceMap: "file",
+ *     },
+ *   },
+ * ],
+ */
+
 const sass = require("sass");
 const path = require("path");
 const fs = require("fs");