add tag method

README.md

@@ -28,6 +28,24 @@ npm install @bicycle-codes/tonic
 ## fork
 This is a fork of [@socketsupply/tonic](https://github.com/socketsupply/tonic)
 
+### additions
+Things added to the forked version
+
+#### `static get tag():string;`
+
+Get the HTML tag name given a Tonic class.
+
+```js
+class ExampleTwo extends Tonic {
+    render () {
+        return this.html`<div>example two</div>`
+    }
+}
+
+ExampleTwo.tag
+// => 'example-two'
+```
+
 ## Use
 
 ```js

package.json

@@ -25,6 +25,7 @@
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "tap-arc": "1.2.2",
+    "tap-spec": "5.0.0",
     "tape-run": "^11.0.0",
     "uuid": "^9.0.0"
   },

src/index.d.ts

@@ -40,9 +40,10 @@ export class Tonic<T = {}> extends HTMLElement {
    static nonce: any;
    static _createId(): string;
    static _normalizeAttrs(o: any, x?: {}): {};
-   static match(el: any, s: any): any;
-   static getTagName(camelName: any): any;
-   static getPropertyNames(proto: any): string[];
+   static match(el:any, s:any):any;
+   static getTagName(camelName:string):string;
+   static get tag():string;
+   static getPropertyNames(proto:any):string[];
    /**
     * Add a component
     * @param {typeof TonicComponent} c

src/index.js

@@ -83,6 +83,10 @@ export class Tonic extends window.HTMLElement {
         return true
     }
 
+    static get tag () {
+        return Tonic.getTagName(this.name)
+    }
+
     static _createId () {
         return `tonic${Tonic._index++}`
     }

test/index.js

@@ -65,6 +65,17 @@ test('get kebab case from camel case', t => {
         'example using a tonic component')
 })
 
+test('tagName instance method', t => {
+    class ExampleTwo extends Tonic {
+        render () {
+            return this.html`<div>example two</div>`
+        }
+    }
+
+    t.equal(ExampleTwo.tag, 'example-two',
+        'should return the correct tag name')
+})
+
 test('attach to dom', async t => {
     class ComponentA extends Tonic {
         render () {
@@ -979,9 +990,9 @@ test('pass in references to children', async t => {
 
         render () {
             return this.html`
-        ${this.left}<br/>
-        ${this.right}
-      `
+                ${this.left}<br/>
+                ${this.right}
+            `
         }
     }
     Tonic.add(DividerComponent, cName)