From 5748426e45d28386aa877adda54898d29fdde706 Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Tue, 9 Jan 2024 08:53:42 -0800 Subject: [PATCH] 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-lock.json | 20 ++++++- package.json | 1 + template/.npmignore.temp | 1 - ...itlint.config.js => commitlint.config.cjs} | 0 template/package.json | 7 +-- template/packageScripts/postinstall.mjs | 2 +- .../{generateDocs.js => generateDocs.mjs} | 52 ++++++++++--------- template/scripts/{postCss.js => postCss.mjs} | 8 +-- template/scripts/pre-commit.mjs | 2 - 9 files changed, 55 insertions(+), 38 deletions(-) rename template/{commitlint.config.js => commitlint.config.cjs} (100%) rename template/scripts/{generateDocs.js => generateDocs.mjs} (82%) mode change 100644 => 100755 rename template/scripts/{postCss.js => postCss.mjs} (72%) diff --git a/package-lock.json b/package-lock.json index 28cf8038..32c6a717 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aurodesignsystem/wc-generator", - "version": "4.2.1", + "version": "4.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/wc-generator", - "version": "4.2.1", + "version": "4.3.1", "license": "Apache-2.0", "dependencies": { "arg": "^5.0.2", @@ -19,6 +19,7 @@ "wc-generator": "bin/generate.js" }, "devDependencies": { + "@aurodesignsystem/auro-library": "^2.2.6", "@commitlint/cli": "^18.2.0", "@commitlint/config-conventional": "^18.1.0", "@semantic-release/changelog": "^6.0.1", @@ -33,6 +34,21 @@ "node": ">=18.15.0" } }, + "node_modules/@aurodesignsystem/auro-library": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.2.6.tgz", + "integrity": "sha512-9Tr6IdsVJjuiyfH9TnDN5SOOBOn709zPmBRTNnCWWQ/PnqM9LYO7PBMJsuBL3VmR4zdSdBbjfYQc5PeEc7Fs+g==", + "dev": true, + "dependencies": { + "markdown-magic": "^2.6.1" + }, + "bin": { + "generateDocs": "bin/generateDocs.mjs" + }, + "engines": { + "node": ">=18.15.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", diff --git a/package.json b/package.json index eb7193df..7956c917 100644 --- a/package.json +++ b/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", diff --git a/template/.npmignore.temp b/template/.npmignore.temp index 67f8098d..4d7f9218 100644 --- a/template/.npmignore.temp +++ b/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 diff --git a/template/commitlint.config.js b/template/commitlint.config.cjs similarity index 100% rename from template/commitlint.config.js rename to template/commitlint.config.cjs diff --git a/template/package.json b/template/package.json index 12ee82a2..4b931259 100644 --- a/template/package.json +++ b/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", diff --git a/template/packageScripts/postinstall.mjs b/template/packageScripts/postinstall.mjs index 559872bd..813e93bd 100644 --- a/template/packageScripts/postinstall.mjs +++ b/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')(` ╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯ `) diff --git a/template/scripts/generateDocs.js b/template/scripts/generateDocs.mjs old mode 100644 new mode 100755 similarity index 82% rename from template/scripts/generateDocs.js rename to template/scripts/generateDocs.mjs index b2de1acc..dab70bba --- a/template/scripts/generateDocs.js +++ b/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#### \`$1\`back to top`) + .replace(/\r\n|\r|\n####\s`([a-zA-Z]*)`/g, `\r\n#### \`$1\`back to top`) .replace(/\r\n|\r|\n\|\s`([a-zA-Z]*)`/g, '\r\n| [$1](#$1)') .replace(/\| \[\]\(#\)/g, ""); diff --git a/template/scripts/postCss.js b/template/scripts/postCss.mjs similarity index 72% rename from template/scripts/postCss.js rename to template/scripts/postCss.mjs index 8de4c7e6..df95225e 100644 --- a/template/scripts/postCss.js +++ b/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]) diff --git a/template/scripts/pre-commit.mjs b/template/scripts/pre-commit.mjs index b8911de1..781e45b0 100644 --- a/template/scripts/pre-commit.mjs +++ b/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')(`