v3.11 rc

.github/settings.yml

@@ -35,35 +35,6 @@ repository:
   allow_rebase_merge: true
 
 branches:
-  - name: v3.11-rc
-    # https://developer.github.com/v3/repos/branches/#update-branch-protection
-    # Branch Protection settings. Set to null to disable
-    protection:
-      # Required. Require at least one approving review on a pull request, before merging. Set to null to disable.
-      required_pull_request_reviews:
-        # The number of approvals required. (1-6)
-        required_approving_review_count: 1
-        # Dismiss approved reviews automatically when a new commit is pushed.
-        dismiss_stale_reviews: true
-        # Blocks merge until code owners have reviewed.
-        require_code_owner_reviews: true
-        # Specify which users and teams can dismiss pull request reviews. Pass an empty dismissal_restrictions object to disable. User and team dismissal_restrictions are only available for organization-owned repositories. Omit this parameter for personal repositories.
-        dismissal_restrictions:
-          users: ["blackfalcon"]
-      # Required. Require status checks to pass before merging. Set to null to disable
-      required_status_checks:
-        # Required. Require branches to be up to date before merging.
-        strict: true
-        # Required. The list of status checks to require in order to merge into this branch.
-        contexts: ["test (14.x)", "test (15.x)", "license/cla"]
-      # Required. Enforce all configured restrictions for administrators. Set to true to enforce required status checks for repository administrators. Set to null to disable.
-      enforce_admins: false
-      # Required. Restrict who can push to this branch. Team and user restrictions are only available for organization-owned repositories. Set to null to disable.
-      restrictions: null
-      # Prevent merge commits from being pushed to matching branches.
-      required_linear_history: true
-      # Permits force pushes to the protected branch by anyone with write access to the repository.
-      allow_force_pushes: true
   - name: v4.0-rc
     # https://developer.github.com/v3/repos/branches/#update-branch-protection
     # Branch Protection settings. Set to null to disable

.github/workflows/testPublish.yml

@@ -6,7 +6,7 @@ on:
   push:
     branches: [ master ]
   pull_request:
-    branches: [ master, v3.11-rc, v4.0-rc ]
+    branches: [ master, v4.0-rc ]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 15.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

README.md

@@ -14,25 +14,17 @@ Auro's Design System web component generator is a project tool intended to assis
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/wc-generator.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
 [![issues](https://img.shields.io/github/issues-raw/AlaskaAirlines/WC-Generator?style=for-the-badge)](https://github.com/AlaskaAirlines/WC-Generator/issues)
 
-It is recommended that the package be installed globally as to ensure quick and easy access to initializing new projects.
-
-```shell
-$ npm i @aurodesignsystem/wc-generator -g
-```
-
-The Auro custom element generator is configured to ensure that you have the latest version of the generator and all it's dependencies prior to starting a new build project.
-
 ## Execute
 
 WC-Generator example use:
 
 ```
-wc-generate --name [wc-name]
+$ npx @aurodesignsystem/wc-generator --name [wc-name]
 ```
 
 ### Minimum Node version
 
-The WC-Generator requires a minimum install of Node.js `14.17.0`.
+The WC-Generator requires a minimum install of Node.js `16.13.0`.
 
 Be sure to check out our [getting started](https://auro.alaskaair.com/aurolabs/minors) page for helpful tips when starting a new project.
 
@@ -45,15 +37,15 @@ For the most up to date information on UI development browser support, see [Auro
 When generating a new custom element using the Auro WC-Generator, you are not restricted to using the Auro namespace for your new element. The following example will crate the project, `@aurodesignsystem/auro-ticker`
 
 ```shell
-$ wc-generate --name Auro-Ticker
+$ npx @aurodesignsystem/wc-generator --name Auro-Ticker
 ```
 
 ## Custom npm namespace support
 
 By default, the WC-Generator will output a project that the custom element is for the `@aurodesignsystem` npm namespace. The following example illustrates how you can customize this to `@mynamespace/auro-ticker` for example.
 
 ```shell
-$ wc-generate --name Auro-Ticker --npm @mynamespace
+$ npx @aurodesignsystem/wc-generator --name Auro-Ticker --npm @mynamespace
 ```
 
 ## WC-Generator development API
@@ -67,7 +59,7 @@ $ wc-generate --name Auro-Ticker --npm @mynamespace
 
 ## Help and version management
 
-For help with the WC-Generator API and to see what version you have installed, run `$ wc-generate --help`.
+For help with the WC-Generator API and to see what version you have installed, run `$ npx @aurodesignsystem/wc-generator --help`.
 
 With each new repo created, the version of the generator will be added to the bottom of the `./README.md` file. As versions of the WC-Generator progress this will help authors to understand where the feature gap is.
 

bin/generate.js

@@ -209,14 +209,6 @@ const question = async () => {
   if (pjson.version === latestPublishedVersion) {
     if (!params.test) {
       const questions = [
-        {
-          type: 'confirm',
-          name: 'generatorVersion',
-          message: `Please confirm you have the latest version installed v${latestPublishedVersion}`,
-          when: function (answers) {
-            return !readDocs('generatorVersion')(answers);
-          },
-        },
         {
           type: 'confirm',
           name: 'auroLabs',
@@ -265,10 +257,6 @@ const question = async () => {
           labs = true;
         }
 
-        if (answers.generatorVersion === false) {
-          log(chalk.red(`\nSorry, we have to stop you here.\n\nPlease run: npm i @aurodesignsystem/wc-generator@latest -g\n`))
-        }
-
         if (answers.governance === false) {
           console.log(`\nNot reviewed the Contributing Guidelines?\nPlease review ${chalk.underline.yellow(`https://auro.alaskaair.com/contributing`)} before submitting any new work\nto ensure that you will be in compliance with our expectations.\n`);
         }
@@ -281,8 +269,7 @@ const question = async () => {
           console.log(`\nNot familiar with Auro\'s CSS conventions?\nPlease review ${chalk.underline.yellow(`https://auro.alaskaair.com/webcorestylesheets/custom-element-css`)} before starting a new project.\n`);
         }
 
-        if (answers.generatorVersion === true
-            && answers.governance === true
+        if (answers.governance === true
             && answers.status === true
             && answers.cssConventions === true) {
           generateFromTemplate();
@@ -319,6 +306,9 @@ const getReplacements = async ({ name, namespace, npm }) => {
   const userName = require('git-user-name');
   // generate new year for copyright stamp
   const newYear = new Date().getFullYear();
+  // Retrieve Node version defined in package.json
+  const minNodeVersion = pjson.engines.node.replace(/[^0-9,.]+/g,'');
+  const abstractNodeVersion = minNodeVersion.split('.')[0] + '.x';
 
   if (labs) {
     npm = `@aurolabs`
@@ -335,7 +325,9 @@ const getReplacements = async ({ name, namespace, npm }) => {
     { regex: /\[npm\]/g, value: npm },
     { regex: /\[year\]/g, value: newYear },
     { regex: /\[designTokens\]/g, value: versionData['@aurodesignsystem/design-tokens'] },
-    { regex: /\[wcss\]/g, value: versionData['@aurodesignsystem/webcorestylesheets'] }
+    { regex: /\[wcss\]/g, value: versionData['@aurodesignsystem/webcorestylesheets'] },
+    { regex: /\[nodeVersion\]/g, value: minNodeVersion },
+    { regex: /\[abstractNodeVersion\]/g, value: abstractNodeVersion }
   ];
 
   return nameReplacements.concat(pkgReplacements);

docs/auroLabsMinors.md

@@ -26,7 +26,7 @@ When building a new custom element  in auroLabs it is highly recommended that yo
 Once the generator is installed, please use the following execution template fo your new project.
 
 ```
-$ wc-generate --name auro-[element name]
+$ npx @aurodesignsystem/wc-generator --name auro-[element name]
 ```
 
 ## Getting started
@@ -45,7 +45,7 @@ From installing the generator all the way to setting up a Github repo. Follow th
     <span slot="trigger" class="trigger">2. Create your new custom element repository locally</span>
     <div class="lightText">
       <p>Once the generator is installed, run the generator command to create a new custom element repository.</p>
-      <pre class="pre">  $ wc-generate --name auro-[element name]</pre>
+      <pre class="pre">  $ npx @aurodesignsystem/wc-generator --name auro-[element name]</pre>
     </div>
   </auro-accordion>
   <auro-accordion id="newWork" chromeless noProfile>

package.json

@@ -9,7 +9,7 @@
     "util"
   ],
   "bin": {
-    "wc-generate": "./bin/generate.js"
+    "wc-generator": "./bin/generate.js"
   },
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
   "author": "AlaskaAirlines",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=16.13.0"
   },
   "bugs": {
     "url": "https://github.com/AlaskaAirlines/WC-Generator/issues"

template/.github/settings.yml

@@ -59,7 +59,7 @@ branches:
         # Required. Require branches to be up to date before merging.
         strict: true
         # Required. The list of status checks to require in order to merge into this branch
-        contexts: ["test (14.x)", "test (15.x)", "license/cla"]
+        contexts: ["test ([abstractNodeVersion])", "license/cla"]
       # Required. Enforce all configured restrictions for administrators. Set to true to enforce required status checks for repository administrators. Set to null to disable.
       enforce_admins: false
       # Required. Restrict who can push to this branch. Team and user restrictions are only available for organization-owned repositories. Set to null to disable.

template/.github/settings__labs.yml

@@ -56,7 +56,7 @@ branches:
         # Required. Require branches to be up to date before merging.
         strict: true
         # Required. The list of status checks to require in order to merge into this branch
-        contexts: ["test (14.x)", "test (15.x)"]
+        contexts: ["test ([abstractNodeVersion])"]
       # Required. Enforce all configured restrictions for administrators. Set to true to enforce required status checks for repository administrators. Set to null to disable.
       enforce_admins: false
       # Required. Restrict who can push to this branch. Team and user restrictions are only available for organization-owned repositories. Set to null to disable.

template/.github/workflows/testPublish.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 15.x, 16.x]
+        node-version: [ [abstractNodeVersion] ]
 
     steps:
       - uses: actions/checkout@v2

template/.stylelintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["stylelint-config-recommended", "stylelint-config-idiomatic-order"],
+  "extends": ["stylelint-config-recommended", "stylelint-config-idiomatic-order", "stylelint-config-standard-scss"],
   "plugins": [
     "stylelint-scss"
   ],

template/README.md

@@ -81,18 +81,22 @@ Please be sure to review the [contribution guidelines](https://auro.alaskaair.co
 
 ### Start development environment
 
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open two different shell sessions. One is for the **npm tasks**, the second is to run the **server**.
+Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
 
 ```shell
-// shell terminal one
 $ npm run dev
-
-// shell terminal two
-$ npm run serve
 ```
 
 Open [localhost:8000](http://localhost:8000/)
 
+If running separate sessions is preferred, please run the following commands in individual terminal shells.
+
+```shell
+$ npm run build:watch
+
+$ npm run serve
+```
+
 ### API generation
 
 The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.

template/README__labs.md

@@ -74,18 +74,22 @@ Please be sure to review the [contribution guidelines](https://auro.alaskaair.co
 
 ### Start development environment
 
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open two different shell sessions. One is for the **npm tasks**, the second is to run the **server**.
+Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
 
 ```shell
-// shell terminal one
 $ npm run dev
-
-// shell terminal two
-$ npm run serve
 ```
 
 Open [localhost:8000](http://localhost:8000/)
 
+If running separate sessions is preferred, please run the following commands in individual terminal shells.
+
+```shell
+$ npm run build:watch
+
+$ npm run serve
+```
+
 ### API generation
 
 The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.

template/index.html

@@ -9,7 +9,7 @@
     <!--
         Visit demo/index.html to see live examples of your element running.
         This page will automatically redirect you there when run in the browser
-        with `npm run serve`.
+        with `npm run dev`.
       -->
   </body>
 </html>

template/package.json

@@ -3,8 +3,7 @@
     "================================================================================",
     "# To work within the development environment, run the following tasks",
     "  1. $ npm run dev",
-    "  2. $ npm run serve",
-    "  3. Go to http://localhost:8000",
+    "  2. Go to http://localhost:8000",
     "================================================================================"
   ],
   "name": "[npm]/[namespace]-[name]",
@@ -16,6 +15,9 @@
   },
   "main": "index.js",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=[nodeVersion]"
+  },
   "dependencies": {
     "lit-element": "^2.5.1",
     "lit-html": "^1.0.0",
@@ -53,9 +55,11 @@
     "babel-loader": "",
     "compression": "",
     "concat": "",
+    "concurrently": "",
     "copyfiles": "",
     "core-js": "",
     "eslint": "",
+    "eslint-plugin-jsdoc": "",
     "focus-visible": "",
     "husky": "^6.0.0",
     "lodash": "",
@@ -79,6 +83,7 @@
     "stylelint": "",
     "stylelint-config-idiomatic-order": "",
     "stylelint-config-standard": "",
+    "stylelint-config-standard-scss": "",
     "stylelint-order": "",
     "stylelint-scss": "",
     "wc-sass-render": "",
@@ -116,10 +121,9 @@
         "@semantic-release/git",
         {
           "assets": [
+            "./package.json",
             "./CHANGELOG.md",
             "./README.md",
-            "./README__labs.md",
-            "package.json",
             "./docs/api.md"
           ]
         }
@@ -155,7 +159,7 @@
     "demo:new:build": "mkdir ./build && mkdir ./build/css && mkdir ./build/demo",
     "demo:rm:build": "rm -rf ./build",
     "demo:update:index": "node ./scripts/prepForBuild",
-    "dev": "npm run build:watch",
+    "dev": "concurrently --kill-others 'npm run build:watch' 'npm run serve'",
     "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
     "esLint": "./node_modules/.bin/eslint src/**/*.js",
     "linters": "npm-run-all scssLint esLint",

template/scripts/prepForBuild.js

@@ -8,11 +8,6 @@ let copyFiles = async function() {
     if (err) throw err;
     console.log(`${bundle} was copied to ./build dir`);
   });
-
-  fs.copyFile(`./demo/style.css`, `./build/style.css`, (err) => {
-    if (err) throw err;
-    console.log(`CSS was copied to ./build dir`);
-  });
 }
 
 // Edit string in new index.html file

util/auroMigrate.sh

@@ -2,7 +2,7 @@
 ## Generate a new baseline install of an auro component
 # Argument expected: name of new repo
 function generateRepo {
-  command wc-generate --test --name "$1" --npm "${2//\/}"
+  command npx @aurodesignsystem/wc-generator --test --name "$1" --npm "${2//\/}"
 }
 
 ## Migrade files from legacy repo to new build