fix: don't define dependencies in the constructor. add version variab…

…le for better comparison


chore: adjust eslint config to match the v8 specs:

.eslintrc.json

@@ -23,5 +23,8 @@
         "no-console": "off"
       }
     }
-  ]
+  ],
+  "globals": {
+    "__LEU_VERSION__": "readonly"
+  }
 }

package.json

@@ -58,6 +58,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-designs": "^7.0.9",
     "@storybook/addon-essentials": "^7.6.17",

rollup.config.js

@@ -4,8 +4,17 @@ import { fileURLToPath } from "url"
 import postcss from "rollup-plugin-postcss"
 import postcssLit from "rollup-plugin-postcss-lit"
 import { babel } from "@rollup/plugin-babel"
+import replace from "@rollup/plugin-replace"
 
 export const plugins = [
+  {
+    plugin: replace,
+    args: [
+      {
+        __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+      },
+    ],
+  },
   {
     plugin: postcss,
     args: [

src/lib/LeuElement.js

@@ -1,23 +1,31 @@
 import { LitElement } from "lit"
 
 export class LeuElement extends LitElement {
+  static version = __LEU_VERSION__
+
   static dependencies = {}
 
   static define(name, constructor = this, options = {}) {
-    if (!customElements.get(name)) {
+    Object.entries(this.dependencies).forEach(([n, c]) => c.define(n))
+
+    const currentlyRegisteredConstructor = customElements.get(name)
+
+    if (currentlyRegisteredConstructor === undefined) {
       customElements.define(name, constructor, options)
-    } else {
-      console.info(`${name} is already defined`)
+      return
     }
-  }
 
-  constructor() {
-    super()
+    if (currentlyRegisteredConstructor !== constructor) {
+      console.warn(
+        `The custom element with the name <${name}> is already registered with a different constructor. This can happen when the same element has been loaded from different modules (e.g. multiple CDN requests or bundles).`
+      )
+      return
+    }
 
-    Object.entries(this.constructor.dependencies).forEach(
-      ([name, component]) => {
-        this.constructor.define(name, component)
-      }
-    )
+    if (currentlyRegisteredConstructor.version !== constructor.version) {
+      console.warn(
+        `The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`
+      )
+    }
   }
 }