Merge pull request #12 from github/eslint-plugin-custom-elements

Enable `eslint-plugin-custom-elements`

Author: koddsson

.eslintrc.json

@@ -1,8 +1,15 @@
 {
   "root": true,
-  "extends": ["plugin:github/browser", "plugin:github/recommended", "plugin:github/typescript"],
+  "plugins": ["custom-elements"],
+  "extends": [
+    "plugin:github/browser",
+    "plugin:github/recommended",
+    "plugin:github/typescript",
+    "plugin:custom-elements/recommended"
+  ],
   "rules": {
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "custom-elements/tag-name-matches-class": ["error", {"suffix": "Element"}]
   },
   "globals": {
     "FileAttachmentElement": "readonly"

package-lock.json

@@ -26,6 +26,7 @@
     "@github/prettier-config": "0.0.4",
     "chai": "^4.3.4",
     "eslint": "^7.26.0",
+    "eslint-plugin-custom-elements": "^0.0.2",
     "eslint-plugin-github": "^4.1.3",
     "karma": "^6.3.2",
     "karma-chai": "^0.1.0",

package.json

@@ -1,7 +1,7 @@
 const pkg = require('./package.json')
 
 export default {
-  input: 'dist/index.js',
+  input: 'dist/file-attachment-element.js',
   output: [
     {
       file: pkg['module'],

rollup.config.js

@@ -1,5 +1,8 @@
 import Attachment from './attachment'
 
+// eslint-disable-next-line custom-elements/no-exports-with-element
+export {Attachment}
+
 export default class FileAttachmentElement extends HTMLElement {
   connectedCallback(): void {
     this.addEventListener('dragenter', onDragenter)
@@ -150,3 +153,14 @@ function onChange(event: Event) {
   container.attach(files)
   input.value = ''
 }
+
+declare global {
+  interface Window {
+    FileAttachmentElement: typeof FileAttachmentElement
+  }
+}
+
+if (!window.customElements.get('file-attachment')) {
+  window.FileAttachmentElement = FileAttachmentElement
+  window.customElements.define('file-attachment', FileAttachmentElement)
+}

src/file-attachment-element.ts

@@ -7,7 +7,5 @@
     "outDir": "dist",
     "removeComments": true
   },
-  "files": [
-    "src/index.ts"
-  ]
+  "files": ["src/file-attachment-element.ts", "src/attachment.ts"]
 }