fix build; add tests

Author: Architrixs

README.md

@@ -1,6 +1,6 @@
-# <custom-element> element
+# <date-time> element
 
-Boilerplate for creating a custom element.
+A custom element that displays date and time.
 
 ## Installation
 Available on [npm](https://www.npmjs.com/) as [**@github/custom-element-element**](https://www.npmjs.com/package/@github/custom-element-element).

examples/index.html

@@ -56,8 +56,8 @@ <h3>&lt;date-time&gt; Custom Element</h3>
     Made with <span style="color: #e25555;font-size: medium;">&hearts;</span> by
     <a href="https://github.com/Architrixs/date-time-custom-element" target="_blank">Architrixs</a>
   </p>
-  <script type="module">
-    import '../src/date-time.ts'
+  <script type="module"
+    src= '../dist/src/date-time.js'>
   </script>
 </body>
 

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "lint": "eslint . --ext .ts,.js",
-    "prebuild": "npm run clean && mkdir dist",
+    "prebuild": "npm run clean && npm run lint && mkdir dist",
     "build": "tsc",
     "pretest": "npm run build",
     "test": "web-test-runner \"test/**/*\" --node-resolve",

src/date-time.ts

@@ -8,12 +8,10 @@
 
 //import { DateTime } from './current-time';
 
-// Define the custom element
-//customElements.define('current-time', DateTime);
+class DateTimeElement extends HTMLElement {
+  // Attach a shadow root to the custom element
+  #shadowRoot = this.attachShadow({mode: 'open'})
 
-// The class for the custom element
-export class DateTimeElement extends HTMLElement {
-  public shadowRoot: ShadowRoot
   private dateElement: HTMLElement
   private timeElement: HTMLElement
   private culture = 'en-US'
@@ -23,15 +21,12 @@ export class DateTimeElement extends HTMLElement {
   static get observedAttributes(): string[] {
     return ['date-format', 'time-format', 'culture']
   }
+  // eslint-disable-next-line custom-elements/no-constructor
   constructor() {
     super()
-
-    // Attach a shadow root to the custom element
-    this.shadowRoot = this.attachShadow({mode: 'open'})
-
     // Add the template to the shadow root
     const template = document.createElement('template')
-
+    // eslint-disable-next-line github/no-inner-html
     template.innerHTML = `
       <style>
         #time-container {
@@ -50,11 +45,11 @@ export class DateTimeElement extends HTMLElement {
         <p id="time"></p>
       </div>
     `
-    this.shadowRoot.appendChild(template.content.cloneNode(true))
+    this.#shadowRoot.appendChild(template.content.cloneNode(true))
 
     // Get the date and time elements
-    this.dateElement = this.shadowRoot.querySelector('#date')!
-    this.timeElement = this.shadowRoot.querySelector('#time')!
+    this.dateElement = this.#shadowRoot.querySelector('#date')!
+    this.timeElement = this.#shadowRoot.querySelector('#time')!
   }
 
   // Update the element when the format attribute changes

test/test.ts

@@ -1,10 +1,16 @@
 import {assert} from '@open-wc/testing'
-import {DateTimeElement} from '../src/date-time'
+import DateTimeElement from '../src/date-time'
 
-// TODO: Add tests for your element
 describe('date-time', () => {
-  describe('is defined', () => {
-    const el = document.createElement('date-time')
-    assert.instanceOf(el, DateTimeElement)
+  describe('element creation', () => {
+    it('creates an instance of the element from document.createElement', () => {
+      const el = document.createElement('date-time')
+      assert.instanceOf(el, DateTimeElement)
+    })
+
+    it('creates an instance of the element from constructor', () => {
+      const el = new DateTimeElement()
+      assert.instanceOf(el, DateTimeElement)
+    })
   })
 })