linting

Author: Architrixs

package.json

@@ -1,20 +1,20 @@
 {
-  "name": "@github/custom-element-element",
+  "name": "@architrixs/date-time-element",
   "version": "0.0.1",
-  "description": "Boilerplate for creating a custom element.",
-  "main": "dist/custom-element.js",
-  "module": "dist/custom-element.js",
+  "description": "A custom element that displays a date and time.",
+  "main": "dist/src/date-time.js",
+  "module": "dist/src/date-time.js",
   "type": "module",
-  "types": "dist/custom-elements.d.ts",
+  "types": "dist/src/date-time.d.ts",
   "license": "MIT",
-  "repository": "github/custom-element-boilerplate",
+  "repository": "https://github.com/Architrixs/date-time-custom-element",
   "files": [
     "dist"
   ],
   "scripts": {
     "clean": "rm -rf dist",
     "lint": "eslint . --ext .ts,.js",
-    "prebuild": "npm run clean && npm run lint && mkdir dist",
+    "prebuild": "npm run clean && mkdir dist",
     "build": "tsc",
     "pretest": "npm run build",
     "test": "web-test-runner \"test/**/*\" --node-resolve",

src/date-time.ts

@@ -13,24 +13,25 @@
 
 // The class for the custom element
 export class DateTimeElement extends HTMLElement {
-  public shadowRoot: ShadowRoot;
-  private dateElement: HTMLElement;
-  private timeElement: HTMLElement;
-  private culture: string = 'en-US';
-  private dateFormat: string = '';
-  private timeFormat: string = '';
+  public shadowRoot: ShadowRoot
+  private dateElement: HTMLElement
+  private timeElement: HTMLElement
+  private culture = 'en-US'
+  private dateFormat = ''
+  private timeFormat = ''
   // Observe the format attribute for changes
   static get observedAttributes(): string[] {
-    return ['date-format', 'time-format', 'culture'];
+    return ['date-format', 'time-format', 'culture']
   }
   constructor() {
-    super();
+    super()
 
     // Attach a shadow root to the custom element
-    this.shadowRoot = this.attachShadow({ mode: 'open' });
+    this.shadowRoot = this.attachShadow({mode: 'open'})
 
     // Add the template to the shadow root
-    const template = document.createElement('template');
+    const template = document.createElement('template')
+
     template.innerHTML = `
       <style>
         #time-container {
@@ -48,79 +49,78 @@ export class DateTimeElement extends HTMLElement {
         <p id="date"></p>
         <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
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if ((name === 'date-format' || name === 'time-format') && newValue !== oldValue) {
       // Get the current values of the date-format and time-format attributes
-      this.dateFormat = this.getAttribute('date-format') || '';
-      this.timeFormat = this.getAttribute('time-format') || '';
-      this.culture = this.getAttribute('culture') || 'en-US';
+      this.dateFormat = this.getAttribute('date-format') || ''
+      this.timeFormat = this.getAttribute('time-format') || ''
+      this.culture = this.getAttribute('culture') || 'en-US'
       // Update the formatted date and time values using the new formats
-      this.updateFormattedDate(this.dateFormat);
-      this.updateFormattedTime(this.timeFormat);
+      this.updateFormattedDate(this.dateFormat)
+      this.updateFormattedTime(this.timeFormat)
 
       // Update the element every second
       setInterval(() => {
-        this.updateFormattedDate(this.dateFormat);
-        this.updateFormattedTime(this.timeFormat);
-      }, 1000);
+        this.updateFormattedDate(this.dateFormat)
+        this.updateFormattedTime(this.timeFormat)
+      }, 1000)
     }
   }
 
   private updateFormattedTime(format: string): void {
     // Get the current time
-    const now = new Date();
+    const now = new Date()
 
     // Use the Intl.DateTimeFormat API to format the time
     const timeOptions = {
       hour: format.includes('h') ? 'numeric' : undefined,
       minute: format.includes('m') ? 'numeric' : undefined,
       second: format.includes('s') ? 'numeric' : undefined,
-      hour12: format.includes('12') ? undefined : false
-    } as const;
-    const formattedTime = new Intl.DateTimeFormat(this.culture, timeOptions).format(now);
+      hour12: format.includes('12') ? undefined : false,
+    } as const
+    const formattedTime = new Intl.DateTimeFormat(this.culture, timeOptions).format(now)
 
     // Update the formatted time element with the formatted time
-    this.timeElement.textContent = formattedTime;
+    this.timeElement.textContent = formattedTime
   }
 
-
   private updateFormattedDate(format: string): void {
     // Get the current date
-    const now = new Date();
+    const now = new Date()
 
     // Use the Intl.DateTimeFormat API to format the date
     const dateOptions = {
       year: format.includes('y') ? 'numeric' : undefined,
       month: format.includes('m') ? 'numeric' : undefined,
       day: format.includes('d') ? 'numeric' : undefined,
-    } as const;
-    const formattedDate = new Intl.DateTimeFormat(this.culture, dateOptions).format(now);
+    } as const
+    const formattedDate = new Intl.DateTimeFormat(this.culture, dateOptions).format(now)
 
     // Update the formatted date element with the formatted date
-    this.dateElement.textContent = formattedDate;
+    this.dateElement.textContent = formattedDate
   }
 
   // Lifecycle callback that is called when the element is inserted into the DOM
   connectedCallback() {
     if (this.dateFormat === '' && this.timeFormat === '') {
-      this.updateTime();
-      setInterval(() => this.updateTime(), 1000);
+      this.updateTime()
+      setInterval(() => this.updateTime(), 1000)
     }
   }
 
   updateTime() {
-    const now = new Date();
-    this.dateElement.textContent = now.toDateString();
-    this.timeElement.textContent = now.toTimeString();
+    const now = new Date()
+    this.dateElement.textContent = now.toDateString()
+    this.timeElement.textContent = now.toTimeString()
   }
 }
 declare global {
@@ -136,4 +136,4 @@ export default DateTimeElement
 if (!window.customElements.get('date-time')) {
   window.DateTimeElement = DateTimeElement
   window.customElements.define('date-time', DateTimeElement)
-}
+}

test/test.ts

@@ -1,10 +1,10 @@
-import { assert } from '@open-wc/testing'
-import { DateTimeElement } from '../src/date-time'
+import {assert} from '@open-wc/testing'
+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)
   })
-})
+})