feat: add suport for SSR projects

This commit updates scripts and configs to support SSR style projects.

Changes to be committed:
renamed:    commitlint.config.js -> commitlint.config.cjs
modified:   package-lock.json
modified:   package.json
modified:   packageScripts/postinstall.mjs
renamed:    scripts/generateDocs.js -> scripts/generateDocs.mjs
deleted:    scripts/postCss.js
new file:   scripts/postCss.mjs
renamed:    scripts/prepExampleFiles.js -> scripts/prepExampleFiles.mjs

package.json

@@ -13,6 +13,7 @@
     "type": "git",
     "url": "https://github.com/AlaskaAirlines/auro-datepicker"
   },
+  "type": "module",
   "main": "index.js",
   "license": "Apache-2.0",
   "engines": {
@@ -23,7 +24,6 @@
     "@alaskaairux/icons": "^4.31.0",
     "@aurodesignsystem/auro-dropdown": "^2.9.11",
     "@aurodesignsystem/auro-input": "^2.15.2",
-    "@aurodesignsystem/auro-library": "^2.1.1",
     "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@alaskaairux/design-tokens": "^3.15.5",
+    "@aurodesignsystem/auro-library": "^2.2.4",
     "@aurodesignsystem/design-tokens": "^4.3.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
     "@aurodesignsystem/webcorestylesheets": "^5.0.5",
@@ -143,8 +144,8 @@
     "build:api": "wca analyze 'src/auro-datepicker.js' --outFiles docs/api.md",
     "build:demo": "npm-run-all build demo:rm:build demo:new:build demo:copy:index demo:copy:demo demo:update:index",
     "build:dev:assets": "npm-run-all build:sass:demo build:sass:component postCss:component sass:render",
-    "build:docs": "node scripts/generateDocs.js",
-    "build:demoScripts": "node scripts/prepExampleFiles.js",
+    "build:docs": "node scripts/generateDocs.mjs",
+    "build:demoScripts": "node scripts/prepExampleFiles.mjs",
     "build:sass": "npm-run-all build:sass:demo build:sass:component postCss:component sass:render",
     "build:sass:demo": "sass --no-source-map demo:demo",
     "build:sass:component": "sass --no-source-map src:src",
@@ -161,7 +162,7 @@
     "esLint": "./node_modules/.bin/eslint src/**/*.js",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node scripts/pre-commit.mjs",
-    "postCss:component": "node ./scripts/postCss.js",
+    "postCss:component": "node ./scripts/postCss.mjs",
     "postinstall": "node packageScripts/postinstall.mjs",
     "sass:render": "sass-render src/*.css -t ./scripts/staticStyles-template.js",
     "serve": "web-dev-server --open demo/ --node-resolve --watch",

packageScripts/postinstall.mjs

@@ -21,7 +21,7 @@ console.log(chalk.hex('#f26135')(`
 ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮
 
         Thanks for installing the latest version
-                of `) + chalk.hex('#ffd200').bold(`auro-datepicker v${pjson.version}.`) + chalk.hex('#f26135')(`
+        of `) + chalk.hex('#ffd200').bold(`${pjson.name} v${pjson.version}.`) + chalk.hex('#f26135')(`
 
 ╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯
 `)

scripts/generateDocs.js → scripts/generateDocs.mjs

@@ -1,7 +1,14 @@
-const path = require('path');
-const markdownMagic = require('markdown-magic');
-const fs = require('fs');
-const https = require('https');
+/**
+ * This version is sans dependencies
+ * Create for use with the SSR updates
+ */
+
+import path from 'path';
+import markdownMagic from 'markdown-magic';
+import fs from 'fs';
+import https from 'https';
+
+const __dirname = new URL('.', import.meta.url).pathname;
 
 const readmeTemplateUrl = 'https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md';
 const dirDocTemplates = './docTemplates';
@@ -11,29 +18,29 @@ const readmeFilePath = dirDocTemplates + '/README.md';
  * Extract NPM, NAMESPACE and NAME from package.json
  */
 
- function nameExtraction() {
-  const packageJson = fs.readFileSync('package.json', 'utf8', function(err, data) {
-    if (err) {
-      console.log('ERROR: Unable to read package.json file', err);
-    }
-  })
+function nameExtraction() {
+ const packageJson = fs.readFileSync('package.json', 'utf8', function(err, data) {
+   if (err) {
+     console.log('ERROR: Unable to read package.json file', err);
+   }
+ })
 
-  pName = JSON.parse(packageJson).name;
+ let pName = JSON.parse(packageJson).name;
 
-  let npmStart = pName.indexOf('@');
-  let namespaceStart = pName.indexOf('/');
-  let nameStart = pName.indexOf('-');
+ let npmStart = pName.indexOf('@');
+ let namespaceStart = pName.indexOf('/');
+ let nameStart = pName.indexOf('-');
 
-  let result = {
-    '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)
-  };
+ let result = {
+   '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)
+ };
 
-  return result;
-};
+ return result;
+}
 
 /**
  * Replace all instances of [npm], [name], [Name], [namespace] and [Namespace] accordingly
@@ -47,8 +54,8 @@ function formatTemplateFileContents(content, destination) {
    * Replace placeholder strings
    */
   result = result.replace(/\[npm]/g, nameExtractionData.npm);
-  result = result.replace(/\[name](?!\()/g, nameExtractionData.name);
-  result = result.replace(/\[Name](?!\()/g, nameExtractionData.nameCap);
+  result = result.replace(/\[name]/g, nameExtractionData.name);
+  result = result.replace(/\[Name]/g, nameExtractionData.nameCap);
   result = result.replace(/\[namespace]/g, nameExtractionData.namespace);
   result = result.replace(/\[Namespace]/g, nameExtractionData.namespaceCap);
 
@@ -65,7 +72,7 @@ function formatTemplateFileContents(content, destination) {
    * Write the result to the destination file
    */
   fs.writeFileSync(destination, result, { encoding: 'utf8'});
-};
+}
 
 function formatApiTableContents(content, destination) {
   const nameExtractionData = nameExtraction();
@@ -112,17 +119,17 @@ function processReadme() {
 }
 
 /**
- * Compiles `./docs/partials/index.md` -> `./demo/index.md`
+ * Compiles `./docTemplates/demo.md` -> `./demo/demo.md`
  */
 
 function processDemo() {
   const callback = function(updatedContent, outputConfig) {
-    if (fs.existsSync('./demo/index.md')) {
-      fs.readFile('./demo/index.md', 'utf8', function(err, data) {
-        formatTemplateFileContents(data, './demo/index.md');
+    if (fs.existsSync('./demo/demo.md')) {
+      fs.readFile('./demo/demo.md', 'utf8', function(err, data) {
+        formatTemplateFileContents(data, './demo/demo.md');
       });
     } else {
-      console.log('ERROR: ./demo/index.md file is missing');
+      console.log('ERROR: ./demo/demo.md file is missing');
     }
   };
 
@@ -131,13 +138,13 @@ function processDemo() {
     outputDir: './demo'
   };
 
-  const markdownPath = path.join(__dirname, '../docs/partials/index.md');
+  const markdownPath = path.join(__dirname, '../docs/partials/demo.md');
 
   markdownMagic(markdownPath, configDemo, callback);
 }
 
 /**
- * Compiles `./docs/partials/api.md` -> `./demo/api.md`
+ * Compiles `./docTemplates/apiExamples.md` -> `./demo/apiExamples.md`
  */
 
 function processApiExamples() {

scripts/postCss.mjs

@@ -0,0 +1,18 @@
+import autoprefixer from 'autoprefixer';
+import postcss from 'postcss';
+import comments from 'postcss-discard-comments';
+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)
+      }
+    })
+});

scripts/prepExampleFiles.js → scripts/prepExampleFiles.mjs

@@ -1,4 +1,4 @@
-let fs = require('fs');
+import fs from 'fs';
 
 function removeExport(path, type) {
   fs.readFile(path, type, function(err, data) {