Merge branch 'main' into allow-hmr-plugins

Author: keithamus

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
+ARG VARIANT="16"
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source/usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>" 

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node
+{
+	"name": "Node.js",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 16, 14, 12.
+		// Append -bullseye or -buster to pin to an OS version.
+		// Use -bullseye variants on local arm64/Apple Silicon.
+		"args": { "VARIANT": "16" }
+	},
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": {},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node",
+	"features": {
+		"git": "latest"
+	}
+}

.github/workflows/nodejs.yml

@@ -26,5 +26,9 @@ jobs:
         node-version: 13.11.0
     - name: Install dependencies
       run: npm i
+    - name: Lint Codebase
+      run: npm run lint
     - name: Run Node.js Tests
       run: npm run test
+    - name: Check Bundle Size
+      run: npm run size

CODEOWNERS

@@ -1 +1 @@
-* @github/ui-frameworks-reviewers
+* @github/web-systems-reviewers

package.json

@@ -30,7 +30,6 @@
     "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'",
     "presize": "npm run build",
     "size": "size-limit",
-    "pretest": "npm run size && npm run lint",
     "test": "web-test-runner test/* --node-resolve"
   },
   "prettier": "@github/prettier-config",

src/attr.ts

@@ -1,4 +1,5 @@
 import type {CustomElement} from './custom-element.js'
+import {dasherize} from './dasherize.js'
 import {meta} from './core.js'
 
 const attrKey = 'attr'
@@ -79,9 +80,7 @@ export function initializeAttrs(instance: HTMLElement, names?: Iterable<string>)
   }
 }
 
-function attrToAttributeName(name: string): string {
-  return `data-${name.replace(/([A-Z]($|[a-z]))/g, '-$1')}`.replace(/--/g, '-').toLowerCase()
-}
+const attrToAttributeName = (name: string) => `data-${dasherize(name)}`
 
 export function defineObservedAttributes(classObject: CustomElement): void {
   let observed = classObject.observedAttributes || []

src/dasherize.ts

@@ -0,0 +1,6 @@
+export const dasherize = (str: unknown): string =>
+  String(str)
+    .replace(/([A-Z]($|[a-z]))/g, '-$1')
+    .replace(/--/g, '-')
+    .replace(/^-|-$/, '')
+    .toLowerCase()

src/register.ts

@@ -1,4 +1,5 @@
 import type {CustomElement} from './custom-element.js'
+import {dasherize} from './dasherize.js'
 
 /**
  * Register the controller as a custom element.
@@ -8,10 +9,7 @@ import type {CustomElement} from './custom-element.js'
  * Example: HelloController => hello-controller
  */
 export function register(classObject: CustomElement): void {
-  const name = classObject.name
-    .replace(/([A-Z]($|[a-z]))/g, '-$1')
-    .replace(/(^-|-Element$)/g, '')
-    .toLowerCase()
+  const name = dasherize(classObject.name).replace(/-element$/, '')
 
   try {
     window.customElements.define(name, classObject)