feat: complete SSR element support#458

Changes to be committed:
modified:   package-lock.json
modified:   package.json
modified:   template/.npmignore.temp
renamed:    template/commitlint.config.js -> template/commitlint.config.cjs
modified:   template/package.json
modified:   template/packageScripts/postinstall.mjs
renamed:    template/scripts/generateDocs.js -> template/scripts/generateDocs.mjs
renamed:    template/scripts/postCss.js -> template/scripts/postCss.mjs
modified:   template/scripts/pre-commit.mjs

package.json

@@ -32,6 +32,7 @@
     "latest-version": "^5.1.0"
   },
   "devDependencies": {
+    "@aurodesignsystem/auro-library": "^2.2.6",
     "@commitlint/cli": "^18.2.0",
     "@commitlint/config-conventional": "^18.1.0",
     "@semantic-release/changelog": "^6.0.1",

template/.npmignore.temp

@@ -19,7 +19,6 @@ demo/**/*.css
 demo/**/*.scss
 demo/**/*.html
 
-dist/es5.js
 dist/auro-*.js
 !dist/auro-*__bundled.js
 dist/style-css.js

template/package.json

@@ -13,6 +13,7 @@
     "type": "git",
     "url": "https://github.com/AlaskaAirlines/[namespace]-[name]"
   },
+  "type": "module",
   "main": "index.js",
   "license": "Apache-2.0",
   "engines": {
@@ -27,13 +28,13 @@
     "@aurodesignsystem/webcorestylesheets": ""
   },
   "devDependencies": {
+    "@aurodesignsystem/auro-library": "",
     "@aurodesignsystem/design-tokens": "",
     "@aurodesignsystem/webcorestylesheets": "",
     "@aurodesignsystem/eslint-config": "",
     "@commitlint/cli": "",
     "@commitlint/config-conventional": "",
     "@open-wc/testing": "",
-    "@open-wc/testing-karma": "",
     "@rollup/plugin-node-resolve": "",
     "@semantic-release/changelog": "",
     "@semantic-release/git": "",
@@ -133,7 +134,7 @@
     "build:ci": "npm-run-all sweep build",
     "build:api": "wca analyze 'src/[namespace]-[name].js' --outFiles docs/api.md",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
-    "build:docs": "node scripts/generateDocs.js",
+    "build:docs": "node scripts/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "sass --no-source-map src:src",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
@@ -145,7 +146,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",

template/packageScripts/postinstall.mjs

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

template/scripts/generateDocs.js → template/scripts/generateDocs.mjs

@@ -1,7 +1,9 @@
-const path = require('path');
-const markdownMagic = require('markdown-magic');
-const fs = require('fs');
-const https = require('https');
+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 +13,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
@@ -65,7 +67,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();
@@ -74,7 +76,7 @@ function formatApiTableContents(content, destination) {
   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, "");
 

template/scripts/postCss.js → template/scripts/postCss.mjs

@@ -1,7 +1,7 @@
-const autoprefixer = require('autoprefixer');
-const postcss = require('postcss');
-const comments = require('postcss-discard-comments');
-const fs = require('fs');
+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])

template/scripts/pre-commit.mjs

@@ -1,8 +1,6 @@
 'use strict';
 
 import chalk from 'chalk';
-import { createRequire } from 'node:module';
-const require = createRequire(import.meta.url);
 console.log(chalk.hex('#ffd200')(`
 
 ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮`) + chalk.hex('#f26135')(`