Merge pull request #206 from github/extract-dasherize

extract dasherize into shared function

Author: koddsson

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$/, '')
   if (!window.customElements.get(name)) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore

test/dasherize.ts

@@ -0,0 +1,17 @@
+import {expect} from '@open-wc/testing'
+import {dasherize} from '../src/dasherize.js'
+
+describe('dasherize', () => {
+  const tests = [
+    ['json', 'json'],
+    ['fooBar', 'foo-bar'],
+    ['FooBar', 'foo-bar'],
+    ['autofocusWhenReady', 'autofocus-when-ready'],
+    ['URLBar', 'url-bar'],
+    ['ClipX', 'clip-x']
+  ]
+
+  tests.map(([input, output]) =>
+    it(`transforms ${input} to ${output}`, () => expect(dasherize(input)).to.equal(output))
+  )
+})