run npm run format

Author: keithamus

learn/components/naming-your-components.md

@@ -16,7 +16,7 @@ There are some specific rules that you must adhere to to make a valid tag name:
 - It _can_ contain underscores, and numbers.
 - It _can_ contain characters from different alphabets, such as `é`, `ð`, `ö`, `爱`.
 
-An invalid name will cause a `DOMException` to be thrown when you set up your custom element. 
+An invalid name will cause a `DOMException` to be thrown when you set up your custom element.
 
 Try typing a tag name below to see if it's a valid custom element tag:
 
@@ -59,8 +59,7 @@ DOMException: CustomElementRegistry.define: 'annotation-xml' is not a valid cust
 
 ## Tips on naming element
 
-While none of the following is prescriptive, here are some tips and tricks on how to pick a good name for your
-elements:
+While none of the following is prescriptive, here are some tips and tricks on how to pick a good name for your elements:
 
 ### Avoid splitting compound words
 

package.json

@@ -18,7 +18,7 @@
     "start": "eleventy --serve",
     "check": "prettier --check . && npm run spell",
     "spell": "mdspell --en-us --report **/*.md *.md",
-    "format": "prettier --fix ."
+    "format": "prettier --write ."
   },
   "stylelint": {
     "extends": "stylelint-config-standard"

script/tag-name-input.js

@@ -1,50 +1,52 @@
-import { validTagName, reservedTags, PCENChar, builtInTagMap } from 'eslint-plugin-custom-elements/lib/tag-names.js' 
+import { validTagName, reservedTags, PCENChar, builtInTagMap } from "eslint-plugin-custom-elements/lib/tag-names.js"
 
 const validChar = new RegExp(`^${PCENChar}$`)
 
-customElements.define('tag-name-input', class extends HTMLInputElement {
-
-  connectedCallback() {
-    this.addEventListener('input', this)
-    this.handleEvent()
-  }
+customElements.define(
+  "tag-name-input",
+  class extends HTMLInputElement {
+    connectedCallback() {
+      this.addEventListener("input", this)
+      this.handleEvent()
+    }
 
-  handleEvent() {
-    const {value} = this
-    this.setCustomValidity('')
-    let hint = ''
-    if (value) {
-      if (/[A-Z]/.test(value)) {
-        this.setCustomValidity(`${value} is not valid, it cannot contain capital letters`)
-      } else if (reservedTags.has(value)) {
-        this.setCustomValidity(`${value} is not valid, it's a reserved tag`)
-      } if (!(value.includes('-'))) {
-        this.setCustomValidity(`${value} is not valid, it must include a dash (-)`)
-      } else if (value.startsWith('-')) {
-        this.setCustomValidity(`${value} is not valid, it must not start with a dash (-)`)
-      } else if (!(/^[a-z]/.test(value))) {
-        this.setCustomValidity(`${value} is not valid, it must start with a letter (a-z)`)
-      } else if (!validTagName(value)) {
-        const chars = new Set()
-        for (const char of value) {
-          if (!(validChar.test(char))) chars.add(`'${char}'`)
+    handleEvent() {
+      const { value } = this
+      this.setCustomValidity("")
+      let hint = ""
+      if (value) {
+        if (/[A-Z]/.test(value)) {
+          this.setCustomValidity(`${value} is not valid, it cannot contain capital letters`)
+        } else if (reservedTags.has(value)) {
+          this.setCustomValidity(`${value} is not valid, it's a reserved tag`)
         }
-        this.setCustomValidity(`${value} is not a valid tag name, cannot contain ${[...chars].join(', ')}`)
-      }
-      
-      const parts = value.split(/-/g)
-      for (const part in parts) {
-        if (part in builtInTagMap) {
-          hint = `${value} is similar to the built-in ${builtInTagMap[part]}`
+        if (!value.includes("-")) {
+          this.setCustomValidity(`${value} is not valid, it must include a dash (-)`)
+        } else if (value.startsWith("-")) {
+          this.setCustomValidity(`${value} is not valid, it must not start with a dash (-)`)
+        } else if (!/^[a-z]/.test(value)) {
+          this.setCustomValidity(`${value} is not valid, it must start with a letter (a-z)`)
+        } else if (!validTagName(value)) {
+          const chars = new Set()
+          for (const char of value) {
+            if (!validChar.test(char)) chars.add(`'${char}'`)
+          }
+          this.setCustomValidity(`${value} is not a valid tag name, cannot contain ${[...chars].join(", ")}`)
         }
-      }
 
+        const parts = value.split(/-/g)
+        for (const part in parts) {
+          if (part in builtInTagMap) {
+            hint = `${value} is similar to the built-in ${builtInTagMap[part]}`
+          }
+        }
+      }
+      this.reportValidity()
+      const errorEl = this.parentElement.querySelector(".error span")
+      errorEl.textContent = this.validationMessage
+      const hintEl = this.parentElement.querySelector(".hint span")
+      hintEl.textContent = hint
     }
-    this.reportValidity()
-    const errorEl = this.parentElement.querySelector('.error span')
-    errorEl.textContent = this.validationMessage
-    const hintEl = this.parentElement.querySelector('.hint span')
-    hintEl.textContent = hint
-  }
-
-}, { extends: 'input' })
+  },
+  { extends: "input" }
+)