npx @krhkt/custom-element-boilerplate-setup@latest

keithamus · keithamus · commit 60451ec51487 · 2022-12-22T17:04:39.000Z
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -12,6 +12,6 @@
     "custom-elements/tag-name-matches-class": ["error", {"suffix": "Element"}]
   },
   "globals": {
-    "CustomElementElement": "readonly"
+    "OverflowMenuElement": "readonly"
   }
 }
diff --git a/custom-elements.json b/custom-elements.json
@@ -4,16 +4,16 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/custom-element.ts",
+      "path": "src/overflow-menu-element.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<custom-element></custom-element>\n```",
-          "name": "CustomElementElement",
+          "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<overflow-menu></overflow-menu>\n```",
+          "name": "OverflowMenuElement",
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "custom-element",
+          "tagName": "overflow-menu",
           "customElement": true
         }
       ],
@@ -22,16 +22,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CustomElementElement",
-            "module": "src/custom-element.ts"
+            "name": "OverflowMenuElement",
+            "module": "src/overflow-menu-element.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "custom-element",
+          "name": "overflow-menu",
           "declaration": {
-            "name": "CustomElementElement",
-            "module": "src/custom-element.ts"
+            "name": "OverflowMenuElement",
+            "module": "src/overflow-menu-element.ts"
           }
         }
       ]
diff --git a/examples/index.html b/examples/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>custom-element demo</title>
+    <title>overflow-menu demo</title>
   </head>
   <body>
-    <custom-element></custom-element>
+    <overflow-menu></overflow-menu>
 
     <script type="module">
       // import 'https://unpkg.com/@github/custom-element-boilerplate@latest/dist/custom-element.js'
-      import '../src/custom-element.ts'
+      import '../src/overflow-menu-element.ts'
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "@github/custom-element-element",
+  "name": "overflow-menu-element",
   "version": "0.0.1",
   "description": "Boilerplate for creating a custom element.",
-  "main": "dist/custom-element.js",
-  "module": "dist/custom-element.js",
+  "main": "dist/overflow-menu-element.js",
+  "module": "dist/overflow-menu-element.js",
   "type": "module",
-  "types": "dist/custom-elements.d.ts",
+  "types": "dist/overflow-menu-element.d.ts",
   "license": "MIT",
-  "repository": "github/custom-element-boilerplate",
+  "repository": "github/overflow-menu-element",
   "files": [
     "dist"
   ],
diff --git a/src/custom-element.ts b/src/custom-element.ts
diff --git a/src/overflow-menu-element.ts b/src/overflow-menu-element.ts
@@ -0,0 +1,28 @@
+/**
+ * An example Custom Element. This documentation ends up in the
+ * README so describe how this elements works here.
+ *
+ * You can event add examples on the element is used with Markdown.
+ *
+ * ```
+ * <overflow-menu></overflow-menu>
+ * ```
+ */
+class OverflowMenuElement extends HTMLElement {
+  connectedCallback(): void {
+    this.textContent = ':wave:'
+  }
+}
+
+declare global {
+  interface Window {
+    OverflowMenuElement: typeof OverflowMenuElement
+  }
+}
+
+export default OverflowMenuElement
+
+if (!window.customElements.get('overflow-menu')) {
+  window.OverflowMenuElement = OverflowMenuElement
+  window.customElements.define('overflow-menu', OverflowMenuElement)
+}
diff --git a/test/test.ts b/test/test.ts
@@ -1,26 +1,26 @@
 import {assert, fixture, html} from '@open-wc/testing'
-import '../src/custom-element'
+import '../src/overflow-menu-element'
 
-describe('custom-element', function () {
+describe('overflow-menu', function () {
   describe('element creation', function () {
     it('creates from document.createElement', function () {
-      const el = document.createElement('custom-element')
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
+      const el = document.createElement('overflow-menu')
+      assert.equal('OVERFLOW-MENU', el.nodeName)
     })
 
     it('creates from constructor', function () {
-      const el = new window.CustomElementElement()
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
+      const el = new window.OverflowMenuElement()
+      assert.equal('OVERFLOW-MENU', el.nodeName)
     })
   })
 
   describe('after tree insertion', function () {
     beforeEach(async function () {
-      await fixture(html` <custom-element></custom-element>`)
+      await fixture(html` <overflow-menu></overflow-menu>`)
     })
 
     it('initiates', function () {
-      const ce = document.querySelector('custom-element')
+      const ce = document.querySelector('overflow-menu')
       assert.equal(ce?.textContent, ':wave:')
     })
   })
diff --git a/vscode.html-custom-data.json b/vscode.html-custom-data.json
@@ -1,8 +1,8 @@
 {
   "tags": [
     {
-      "name": "custom-element",
-      "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<custom-element></custom-element>\n```",
+      "name": "overflow-menu",
+      "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<overflow-menu></overflow-menu>\n```",
       "attributes": []
     }
   ]

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,6 @@`
`12`	`12`	`"custom-elements/tag-name-matches-class": ["error", {"suffix": "Element"}]`
`13`	`13`	`},`
`14`	`14`	`"globals": {`
`15`		`- "CustomElementElement": "readonly"`
	`15`	`+ "OverflowMenuElement": "readonly"`
`16`	`16`	`}`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,16 +4,16 @@`
`4`	`4`	`"modules": [`
`5`	`5`	`{`
`6`	`6`	`"kind": "javascript-module",`
`7`		`- "path": "src/custom-element.ts",`
	`7`	`+ "path": "src/overflow-menu-element.ts",`
`8`	`8`	`"declarations": [`
`9`	`9`	`{`
`10`	`10`	`"kind": "class",`
`11`		- "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<custom-element></custom-element>\n```",
`12`		`- "name": "CustomElementElement",`
	`11`	+ "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<overflow-menu></overflow-menu>\n```",
	`12`	`+ "name": "OverflowMenuElement",`
`13`	`13`	`"superclass": {`
`14`	`14`	`"name": "HTMLElement"`
`15`	`15`	`},`
`16`		`- "tagName": "custom-element",`
	`16`	`+ "tagName": "overflow-menu",`
`17`	`17`	`"customElement": true`
`18`	`18`	`}`
`19`	`19`	`],`
`@@ -22,16 +22,16 @@`
`22`	`22`	`"kind": "js",`
`23`	`23`	`"name": "default",`
`24`	`24`	`"declaration": {`
`25`		`- "name": "CustomElementElement",`
`26`		`- "module": "src/custom-element.ts"`
	`25`	`+ "name": "OverflowMenuElement",`
	`26`	`+ "module": "src/overflow-menu-element.ts"`
`27`	`27`	`}`
`28`	`28`	`},`
`29`	`29`	`{`
`30`	`30`	`"kind": "custom-element-definition",`
`31`		`- "name": "custom-element",`
	`31`	`+ "name": "overflow-menu",`
`32`	`32`	`"declaration": {`
`33`		`- "name": "CustomElementElement",`
`34`		`- "module": "src/custom-element.ts"`
	`33`	`+ "name": "OverflowMenuElement",`
	`34`	`+ "module": "src/overflow-menu-element.ts"`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`	`]`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`	`1`	`{`
`2`	`2`	`"tags": [`
`3`	`3`	`{`
`4`		`- "name": "custom-element",`
`5`		- "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<custom-element></custom-element>\n```",
	`4`	`+ "name": "overflow-menu",`
	`5`	+ "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<overflow-menu></overflow-menu>\n```",
`6`	`6`	`"attributes": []`
`7`	`7`	`}`
`8`	`8`	`]`