@aurodesignsystem/auro-library 2.5.1 → 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,19 @@
 # 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)
+
+
+### Features
+
+* **tagname:** add new functions for handling custom named components. [#51](https://github.com/AlaskaAirlines/auro-library/issues/51) ([1c7addc](https://github.com/AlaskaAirlines/auro-library/commit/1c7addcb9c637bdf043470e04626b9b4328ed6b6))
+
 ## [2.5.1](https://github.com/AlaskaAirlines/auro-library/compare/v2.5.0...v2.5.1) (2024-02-07)
 
 

package/README.md

@@ -2,46 +2,77 @@
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
-This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.
+This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Scripts
 
-#### Publish Surge Demo
+### Publish Surge Demo
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
-<!-- The below content is automatically added from ./../docs/partials/description.md -->
-This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/publishDemo.md) -->
+<!-- The below content is automatically added from ./../docs/partials/publishDemo.md -->
+This is an automated workflow that utilizes GitHub Actions to generate surge demos. Upon making any change to a PR a comment will be added or updated on the PR with a link to the demo similar to the following:
+
+```md
+Surge demo deployment succeeded! 🚀🚀🚀
+
+[Auro Web Component Generator](https://surge.sh/)
+```
+
+This workflow utilizes the file `./scripts/config/useBundles.js` to update the demo HTML files to use the bundled versions of components so that they can be supported staticly in surge.
+
+In order to add this functionality to an auro component you just need to add the following snippet into the `publishDemo.yml` file in the `./.github/workflows` directory.
+
+```yml
+name: Deploy Demo
+
+on:
+  pull_request:
+    branches: [ main ]
 
-#### Surge Demo Teardown
+jobs:
+  call-publish-demo-workflow:
+    uses: AlaskaAirlines/auro-library/.github/workflows/publishDemo.yml@main
+    secrets:
+      SURGE_TOKEN: ${{secrets.AURO_SURGE_TOKEN}}
+```
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/demoTeardown.md) -->
-<!-- The below content is automatically added from ./../docs/partials/demoTeardown.md -->
+> Note: This will only work properly in components located in the "AlaskaAirlines" organization due to a dependency on the org-wide Actions secret `AURO_SURGE_TOKEN`.
+
+Afterwards you will want to make sure to update the script tags you want replaced with bundles in your `./demo/*.html` files with the `data-demo-scripts="true"` attribute.
+
+```diff
+--    <script type="module" src="../index.js"></script>
+++    <script type="module" src="../index.js" data-demo-script="true"></script>
+```
+
+> Note: If you fail to do this, the components will fail to register in your demo.
+<!-- AURO-GENERATED-CONTENT:END -->
+---
 
-## Dependency Tag Versioming
+### Surge Demo Teardown
 
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/demoTeardown.md) -->
+<!-- The below content is automatically added from ./../docs/partials/demoTeardown.md -->
 This workflow works to automatically delete and clear any surge demos that have been active for more than 2+ months. Surge in theory allows us to have an infinite amount of active pages but by clearing unused and stale demos we can keep our Surge account more organized in the future.
 
-> Note: This workflow exectutes on a monthly cronjob on the first of each month.
+> Note: This workflow executes on a monthly cronjob on the first of each month.
 
 In order to clear all our surge projects we rely on [this GitHub Action](https://github.com/marketplace/actions/surge-sh-teardown) to handle the deletion logic.
 <!-- AURO-GENERATED-CONTENT:END -->
+---
 
-#### Dependency Tag Versioning
+### Dependency Tag Versioning
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/dependencyTagVersioning.md) -->
-<!-- The below content is automatically added from ./../docs/partials/dependencyTagVersioning.md -->
-
-## Dependency Tag Versioming
-
+<!-- The below content is automatically added from ./../docs/partials/dependencyTagVersioning.md -->
 This is a two part utility for the purpose of generating a custom string for dependency component tag naming. This is important to prevent [version conflicts](https://www.thinktecture.com/en/web-components/web-components-flaws/#elementor-toc__heading-anchor-0) when multiple versions of a given Auro component may be loaded on a single page.
 
 _Note: The example configuration used below in all code samples assumes `auro-dropdown` is the dependency component. Substitute any Auro component in the example code as needed._
 
-### Part 1: The Build
+#### Part 1: The Build
 
-#### Configuration
+##### Configuration
 
 1. Create a new file `./scripts/version.js` with the following content:
 
@@ -63,7 +94,7 @@ versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown'); // duplica
 "build": "npm-run-all build:version ... etc.",
 ```
 
-#### Execution
+##### Execution
 
 Once configuration is complete, execute `npm run build`. This must be done once before `npm run dev` when developing locally. When Auro dependencies are initially installed or updated to new versions then `npm run build:version` or a complete `npm run build` must be executed.
 
@@ -71,20 +102,20 @@ Upon execution of `build:version`, for each Auro dependency defined in the `./sc
 
 For example, following these steps:
 1. Run `npm i @aurodesignsystem/auro-dropdown@1.0.0`
-1. add the following to the `./scripts/version.js` script file:
+2. add the following to the `./scripts/version.js` script file:
 ```js
 versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown');
 ```
-1. Run `npm run build`
+3. Run `npm run build`
 
 Will result in:
 - A new file created: `./src/dropdownVersion.js`
 - File content will export the version of the component installed. In this case:
 `export default '1.0.0'`
 
-### Part 2: The Runtime
+#### Part 2: The Runtime
 
-#### Configuration
+##### Configuration
 
 In the main component JS file located in the `./src` directory add the following:
 
@@ -110,7 +141,7 @@ In the component properties add the following:
 dropdownTag: { type: Object }
 ```
 
-#### Usage
+##### Usage
 
 The new dynamically named version of `auro-dropdown` may now be used in your component template as follows:
 
@@ -134,57 +165,31 @@ When the component is rendered during runtime the DOM will now show up as follow
 
 _Note: the numbers attached in the tag name will match the version of the dependency that was installed._
 
-#### Accessing the dynamically named element with JS
-
-The dynamic component is accessible using a the following string in a JS query selector: `this.dropdownTag._$litStatic# Auro-Library
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
-<!-- The below content is automatically added from ./../docs/partials/description.md -->
-This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Scripts
-
-#### Publish Surge Demo
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
-<!-- The below content is automatically added from ./../docs/partials/description.md -->
-This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-#### Surge Demo Teardown
+##### Accessing the dynamically named element with JS
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/demoTeardown.md) -->
-<!-- The below content is automatically added from ./../docs/partials/demoTeardown.md -->
-
-## Dependency Tag Versioming
-
-This workflow works to automatically delete and clear any surge demos that have been active for more than 2+ months. Surge in theory allows us to have an infinite amount of active pages but by clearing unused and stale demos we can keep our Surge account more organized in the future.
-
-> Note: This workflow exectutes on a monthly cronjob on the first of each month.
+The dynamic component is accessible using a the following string in a JS query selector:
+```js
+this.dropdownTag._$litStatic$
+```
 
-In order to clear all our surge projects we rely on [this GitHub Action](https://github.com/marketplace/actions/surge-sh-teardown) to handle the deletion logic.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-#### Dependency Tag Versioning
-
 ```js
 firstUpdated() {
   this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 };
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+---
 
-#### Sync All Templates
+### Sync All Templates
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/syncAllTemplates.md) -->
 <!-- The below content is automatically added from ./../docs/partials/syncAllTemplates.md -->
 
-## How to Run the `syncAllTemplates.mjs` Script
+### How to Run the `syncAllTemplates.mjs` Script
 
 To run the `syncAllTemplates.mjs` script, you will need to add a new node script into the linked component and point that to the `syncAllTemplates.mjs` file. You can individually run the workflow configurations by pointing to the `syncAllTemplates.mjs` file and adding a `--github` parameter after the path. The same can be done for the linter configurations by adding a `--linters` parameter.
 
-### Example Calls
+#### Example Calls
 
 ```
 // Default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "2.5.1",
+  "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;
   }
 
   /**

package/scripts/utils/runtimeUtils.mjs

@@ -25,5 +25,33 @@ export default class AuroLibraryRuntimeUtils {
     return __Closest(base);
   }
   /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
 }