@aurodesignsystem/auro-library 2.6.0 → 2.6.1

package/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+npm run linters

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+## [2.6.1](https://github.com/AlaskaAirlines/auro-library/compare/v2.6.0...v2.6.1) (2024-08-06)
+
+
+### Performance Improvements
+
+* cleanup and update existing build scripts ([b6d5d95](https://github.com/AlaskaAirlines/auro-library/commit/b6d5d952c8e0ce8c7636057e612ae821f5e85079))
+
 # [2.6.0](https://github.com/AlaskaAirlines/auro-library/compare/v2.5.1...v2.6.0) (2024-04-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",
@@ -15,20 +15,26 @@
     "generateDocs": "./bin/generateDocs.mjs"
   },
   "devDependencies": {
-    "@aurodesignsystem/eslint-config": "^1.3.0",
+    "@aurodesignsystem/eslint-config": "^1.3.2",
     "@commitlint/cli": "^18.5.0",
     "@commitlint/config-conventional": "^18.5.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^11.0.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.8.0",
     "eslint-plugin-jsdoc": "^48.0.2",
     "husky": "^8.0.3",
     "semantic-release": "^23.0.0"
   },
   "release": {
     "branches": [
-      "main"
+      {
+        "name": "main"
+      },
+      {
+        "name": "beta",
+        "prerelease": true
+      }
     ],
     "plugins": [
       "@semantic-release/commit-analyzer",
@@ -60,13 +66,15 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "lint": "eslint ./scripts/**/*.js",
+    "esLint": "eslint ./scripts/**/*.js",
+    "linters": "npm-run-all esLint",
     "build:docs": "node scripts/build/generateReadme.mjs"
   },
   "bugs": {
     "url": "https://github.com/AlaskaAirlines/auro-library/issues"
   },
   "dependencies": {
-    "markdown-magic": "^2.6.1"
+    "markdown-magic": "^2.6.1",
+    "npm-run-all": "^4.1.5"
   }
 }

package/scripts/build/generateDocs.mjs

@@ -1,33 +1,103 @@
+import path from 'path';
 import markdownMagic from 'markdown-magic';
-import * as fs from 'fs';
-import * as https from 'https';
+import fs from 'fs';
+import https from 'https';
+import { fileURLToPath } from 'url';
 
-import AuroLibraryUtils from "../utils/auroLibraryUtils.mjs";
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-const auroLibraryUtils = new AuroLibraryUtils();
-
-const readmeTemplateUrl = 'https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md';
+const readmeTemplateUrl = 'https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_esm.md';
 const dirDocTemplates = './docTemplates';
 const readmeFilePath = dirDocTemplates + '/README.md';
 
 /**
-   * Replace all instances of [npm], [name], [Name], [namespace] and [Namespace] accordingly
+ * Extract NPM, NAMESPACE and NAME from package.json
+ */
+
+function nameExtraction() {
+  let packageJson = fs.readFileSync('package.json', 'utf8', function(err, data) {
+    if (err) {
+      console.log('ERROR: Unable to read package.json file', err);
+    }
+  })
+
+  packageJson = JSON.parse(packageJson); 
+
+  let pName = packageJson.name;
+  let pVersion = packageJson.version;
+  let pdtVersion = packageJson.peerDependencies['\@aurodesignsystem/design-tokens'].substring(1)
+  let wcssVersion = packageJson.peerDependencies['\@aurodesignsystem/webcorestylesheets'].substring(1)
+
+  let npmStart = pName.indexOf('@');
+  let namespaceStart = pName.indexOf('/');
+  let nameStart = pName.indexOf('-');
+
+  return {
+    'npm': pName.substring(npmStart, namespaceStart),
+    'namespace': pName.substring(namespaceStart + 1, nameStart),
+    'namespaceCap': pName.substring(namespaceStart + 1)[0].toUpperCase() + pName.substring(namespaceStart + 2, nameStart),
+    'name': pName.substring(nameStart + 1),
+    'nameCap': pName.substring(nameStart + 1)[0].toUpperCase() + pName.substring(nameStart + 2),
+    'version': pVersion,
+    'tokensVersion': pdtVersion,
+    'wcssVersion': wcssVersion
+  };
+ }
+
+/**
+ * Replace all instances of [npm], [name], [Name], [namespace] and [Namespace] accordingly
+ */
+
+function formatTemplateFileContents(content, destination) {
+  let nameExtractionData = nameExtraction();
+
+  /**
+   * Replace placeholder strings
+   */
+  const placeholders = {
+    '[npm]': 'npm',
+    '[name](?!\\()': 'name',
+    '[Name](?!\\()': 'nameCap',
+    '[namespace]': 'namespace',
+    '[Namespace]': 'namespaceCap',
+    '[Version]': 'version',
+    '[dtVersion]': 'tokensVersion',
+    '[wcssVersion]': 'wcssVersion'
+  };
+
+  let result = Object.entries(placeholders).reduce((acc, [key, value]) => 
+    acc.replace(new RegExp(key, 'g'), nameExtractionData[value]), content);
+
+  /**
+   * Cleanup line breaks
    */
+  result = result.replace(/(\r\n|\r|\n)[\s]+(\r\n|\r|\n)/g, '\r\n\r\n'); // Replace lines containing only whitespace with a carriage return.
+  result = result.replace(/>(\r\n|\r|\n){2,}/g, '>\r\n'); // Remove empty lines directly after a closing html tag.
+  result = result.replace(/>(\r\n|\r|\n)```/g, '>\r\n\r\n```'); // Ensure an empty line before code samples.
+  result = result.replace(/>(\r\n|\r|\n){2,}```(\r\n|\r|\n)/g, '>\r\n```\r\n'); // Ensure no empty lines before close of code sample.
+  result = result.replace(/([^(\r\n|\r|\n)])(\r?\n|\r(?!\n))+#/g, "$1\r\n\r\n#"); // Ensure empty line before header sections.
+
+  /**
+   * Write the result to the destination file
+   */
+  fs.writeFileSync(destination, result, { encoding: 'utf8'});
+}
+
 function formatApiTableContents(content, destination) {
-  const nameExtractionData = auroLibraryUtils.nameExtraction();
+  const nameExtractionData = nameExtraction();
   const wcName = nameExtractionData.namespace + '-' + nameExtractionData.name;
 
   let result = content;
 
   result = result
-    .replace(/\r\n|\r|\n####\s`([a-zA-Z]*)`/g, `\r\n#### <a name="$1"></a>\`$1\`<a href="#${wcName}" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>`)
+    .replace(/\r\n|\r|\n####\s`([a-zA-Z]*)`/g, `\r\n#### <a name="$1"></a>\`$1\`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>`)
     .replace(/\r\n|\r|\n\|\s`([a-zA-Z]*)`/g, '\r\n| [$1](#$1)')
     .replace(/\| \[\]\(#\)/g, "");
 
   fs.writeFileSync(destination, result, { encoding: 'utf8'});
 
   fs.readFile('./demo/api.md', 'utf8', function(err, data) {
-    auroLibraryUtils.formatFileContents(data, './demo/api.md');
+    formatTemplateFileContents(data, './demo/api.md');
   });
 }
 
@@ -36,11 +106,11 @@ function formatApiTableContents(content, destination) {
  */
 
 function processReadme() {
-  const callback = function() {
+  const callback = function(updatedContent, outputConfig) {
 
     if (fs.existsSync('./README.md')) {
       fs.readFile('./README.md', 'utf8', function(err, data) {
-        auroLibraryUtils.formatFileContents(data, './README.md');
+        formatTemplateFileContents(data, './README.md');
       });
     } else {
       console.log('ERROR: ./README.md file is missing');
@@ -52,20 +122,20 @@ function processReadme() {
     outputDir: './'
   };
 
-  const markdownPath = './docTemplates/README.md';
+  const markdownPath = path.join(__dirname, '../docTemplates/README.md');
 
   markdownMagic(markdownPath, config, callback);
 }
 
 /**
- * Compiles `./docTemplates/demo.md` -> `./demo/index.md`
+ * Compiles `./docTemplates/index.md` -> `./demo/index.md`
  */
 
 function processDemo() {
-  const callback = function() {
+  const callback = function(updatedContent, outputConfig) {
     if (fs.existsSync('./demo/index.md')) {
       fs.readFile('./demo/index.md', 'utf8', function(err, data) {
-        auroLibraryUtils.formatFileContents(data, './demo/index.md');
+        formatTemplateFileContents(data, './demo/index.md');
       });
     } else {
       console.log('ERROR: ./demo/index.md file is missing');
@@ -77,7 +147,7 @@ function processDemo() {
     outputDir: './demo'
   };
 
-  const markdownPath = './docs/partials/index.md';
+  const markdownPath = path.join(__dirname, '../docs/partials/index.md');
 
   markdownMagic(markdownPath, configDemo, callback);
 }
@@ -87,7 +157,7 @@ function processDemo() {
  */
 
 function processApiExamples() {
-  const callback = function() {
+  const callback = function(updatedContent, outputConfig) {
     if (fs.existsSync('./demo/api.md')) {
       fs.readFile('./demo/api.md', 'utf8', function(err, data) {
         formatApiTableContents(data, './demo/api.md');
@@ -102,7 +172,7 @@ function processApiExamples() {
     outputDir: './demo'
   };
 
-  const markdownPath = './docs/partials/api.md';
+  const markdownPath = path.join(__dirname, '../docs/partials/api.md');
 
   markdownMagic(markdownPath, config, callback);
 }

package/scripts/build/postCss.mjs

@@ -1,18 +1,63 @@
 import autoprefixer from 'autoprefixer';
 import postcss from 'postcss';
 import comments from 'postcss-discard-comments';
+import path from 'path';
 import fs from 'fs';
 
-fs.readFile('src/style.css', (err, css) => {
-  postcss([autoprefixer, comments])
-    .use(comments({
-      remove: function(comment) { return comment[0] == "@"; }
-    }))
-    .process(css, { from: 'src/style.css', to: 'src/style.css' })
-    .then(result => {
-      fs.writeFile('src/style.css', result.css, () => true)
-      if ( result.map ) {
-        fs.writeFile('src/style.map', result.map, () => true)
-      }
-    })
+const __dirname = new URL('.', import.meta.url).pathname;
+const directoryPath = path.join(__dirname, '../src');
+
+/**
+ * Default postCSS run
+ * Locates all CSS files within the directory and loop
+ * through the standardProcessor() function.
+ */
+fs.readdir(directoryPath, function (err, files) {
+  //handling error
+  if (err) {
+    return console.log('Unable to scan directory: ' + err);
+  }
+  //listing all files using forEach
+  files.forEach(function (file) {
+    if (file.includes(".css")) {
+      standardProcessor(file);
+    }
+  });
 });
+
+/**
+ * The standardProcessor function applies tokens for fallback selectors
+ * and completes a post cleanup.
+ * @param {string} file
+ */
+function standardProcessor(file) {
+ fs.readFile(`src/${file}`, (err, css) => {
+   postcss([autoprefixer, comments])
+   .use(comments({
+     remove: function(comment) { return comment[0] == "@"; }
+   }))
+   .process(css, { from: `src/${file}`, to: `src/${file}` })
+   .then(result => {
+     fs.writeFile(`src/${file}`, result.css, () => true)
+   })
+ });
+}
+
+/**
+ * ALTERNATE script:
+ * The following is a static builder for rendering one
+ * CSS file at a time if that is required.
+ */
+// fs.readFile('src/style.css', (err, css) => {
+//   postcss([autoprefixer, comments])
+//     .use(comments({
+//       remove: function(comment) { return comment[0] == "@"; }
+//     }))
+//     .process(css, { from: 'src/style.css', to: 'src/style.css' })
+//     .then(result => {
+//       fs.writeFile('src/style.css', result.css, () => true)
+//       if ( result.map ) {
+//         fs.writeFile('src/style.map', result.map, () => true)
+//       }
+//     })
+// });

package/scripts/build/pre-commit.mjs

@@ -1,6 +1,7 @@
-'use strict';
+/* eslint-disable no-console */
 
 import chalk from 'chalk';
+
 console.log(chalk.hex('#ffd200')(`
 
 ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮`) + chalk.hex('#f26135')(`
@@ -13,5 +14,4 @@ console.log(chalk.hex('#ffd200')(`
              to ensure that you are compliant.`) + chalk.hex('#ffd200')(`
 
 ╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯
-`)
-);
+`));

package/scripts/build/prepExampleFiles.mjs

@@ -0,0 +1,23 @@
+import fs from 'fs';
+
+function removeExport(path, type) {
+  fs.readFile(path, type, (err, data) => {
+    if (err) {
+      throw err;
+    };
+
+    const exportPos = data.indexOf('export');
+    const exampleScript = data.substring(0, exportPos);
+    const writer = fs.createWriteStream(path);
+    writer.write(exampleScript, (writeErr) => {
+      if (writeErr) {
+        throw writeErr;
+      };
+
+      writer.end();
+    });
+  });
+}
+
+removeExport('./demo/index.min.js', 'utf8');
+removeExport('./demo/api.min.js', 'utf8');

package/scripts/build/staticStyles-template.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`<% content %>`;

package/scripts/build/versionWriter.js

@@ -3,6 +3,8 @@
 
 // ---------------------------------------------------------------------
 
+/* eslint-disable no-undef */
+
 const auroSubNameIndex = 5;
 
 /**

package/scripts/utils/auroLibraryUtils.mjs

@@ -119,32 +119,30 @@ export default class AuroLibraryUtils {
    * @returns {Object} result - Object containing data from package.json.
    */
   nameExtraction() {
-    const packageJson = fs.readFileSync('package.json', 'utf8', function(err) {
+    let packageJson = fs.readFileSync('package.json', 'utf8', function(err) {
       if (err) {
         console.log('ERROR: Unable to read package.json file', err);
       }
     });
 
-    const pName = JSON.parse(packageJson).name;
+    packageJson = JSON.parse(packageJson);
+
+    const pName = packageJson.name;
 
     const npmStart = pName.indexOf('@');
     const namespaceStart = pName.indexOf('/');
     const nameStart = pName.indexOf('-');
 
-    const result = {
-      'abstractNodeVersion': JSON.parse(packageJson).engines.node.substring(2),
-      'branchName': JSON.parse(packageJson).release.branch,
+    return {
+      'abstractNodeVersion': packageJson.engines.node.substring(2),
+      'branchName': packageJson.release.branch,
       'npm': pName.substring(npmStart, namespaceStart),
       'namespace': pName.substring(namespaceStart + 1, nameStart),
       'namespaceCap': pName.substring(namespaceStart + 1)[0].toUpperCase() + pName.substring(namespaceStart + 2, nameStart),
       'name': pName.substring(nameStart + 1),
       'nameCap': pName.substring(nameStart + 1)[0].toUpperCase() + pName.substring(nameStart + 2),
-      'version': pVersion,
-      'tokensVersion': pdtVersion,
-      'wcssVersion': wcssVersion
+      'version': packageJson.version
     };
-
-    return result;
   }
 
   /**