Merge pull request #805 from UziTech/custom-element

fix: use custom element

Author: UziTech

lib/decorators/element.js

@@ -1,7 +1,5 @@
 "use strict"
 
-import { registerOrUpdateElement } from "atom-utils-plus"
-
 /**
  * Generates a decorator function to convert a class into a custom element through the `registerOrUpdateElement` method
  * from `atom-utils-plus`.
@@ -17,7 +15,7 @@ import { registerOrUpdateElement } from "atom-utils-plus"
  * the second example.**
  *
  * @param {string} elementName The node name of the element to register
- * @returns {Function} The element class as returned by `document.registerElement`
+ * @returns {void}
  * @element('dummy-element-name') export default class SomeClass {
  *   // ...
  * }
@@ -27,5 +25,7 @@ import { registerOrUpdateElement } from "atom-utils-plus"
  * }
  */
 export default function element(cls, elementName) {
-  return registerOrUpdateElement(elementName, { class: cls })
+  if (!window.customElements.get(elementName)) {
+    window.customElements.define(elementName, cls)
+  }
 }

lib/main.js

@@ -1,7 +1,7 @@
 "use strict"
 
 import { Emitter, CompositeDisposable } from "atom"
-import MinimapElement from "./minimap-element"
+import { createMinimapElement } from "./minimap-element"
 import Minimap from "./minimap"
 import * as config from "./config.json"
 import * as PluginManagement from "./plugin-management"
@@ -12,7 +12,7 @@ import { debounce } from "./deps/underscore-plus"
 export * as config from "./config.json"
 export * from "./plugin-management"
 export { default as Minimap } from "./minimap"
-export { default as MinimapElement } from "./minimap-element"
+export { createMinimapElement } from "./minimap-element"
 
 /**
  * The `Minimap` package provides an eagle-eye view of text buffers.
@@ -110,7 +110,7 @@ export function minimapViewProvider(model) {
   if (model instanceof Minimap) {
     let element = model.getMinimapElement()
     if (!element) {
-      element = new MinimapElement()
+      element = createMinimapElement()
       element.setModel(model)
     }
     return element
@@ -180,8 +180,8 @@ export function toggle() {
  * @param {string} template The name of the template to use
  */
 async function generatePlugin(template) {
-  const { default: MinimapPluginGeneratorElement } = await import("./minimap-plugin-generator-element")
-  const view = new MinimapPluginGeneratorElement()
+  const { createMinimapPluginGeneratorElement } = await import("./minimap-plugin-generator-element")
+  const view = createMinimapPluginGeneratorElement()
   view.template = template
   view.attach()
 }

lib/minimap-element.js

@@ -10,10 +10,11 @@ import CanvasDrawer from "./mixins/canvas-drawer"
 import include from "./decorators/include"
 import element from "./decorators/element"
 
-import MinimapQuickSettingsElement from "./minimap-quick-settings-element"
+import { createMinimapQuickSettingsElement } from "./minimap-quick-settings-element"
 const elementResizeDetector = elementResizeDetectorImport({ strategy: "scroll" })
 
 const SPEC_MODE = atom.inSpecMode()
+const TAG_NAME = "atom-text-editor-minimap"
 
 /**
  * Public: The MinimapElement is the view meant to render a {@link Minimap} instance in the DOM.
@@ -25,10 +26,10 @@ const SPEC_MODE = atom.inSpecMode()
  *
  * @example Let minimapElement = atom.views.getView(minimap)
  */
-class MinimapElement {
+class MinimapElement extends HTMLElement {
   static initClass() {
     include(this, CanvasDrawer, EventsDelegation, AncestorsMethods)
-    return element(this, "atom-text-editor-minimap")
+    element(this, TAG_NAME)
   }
 
   //    ##     ##  #######   #######  ##    ##  ######
@@ -273,7 +274,7 @@ class MinimapElement {
    *
    * @access private
    */
-  attachedCallback() {
+  connectedCallback() {
     if (typeof atom.views.pollDocument === "function") {
       this.subscriptions.add(
         atom.views.pollDocument(() => {
@@ -326,7 +327,7 @@ class MinimapElement {
    *
    * @access private
    */
-  detachedCallback() {
+  disconnectedCallback() {
     this.minimap.getTextEditorElement().removeAttribute("with-minimap")
     this.attached = false
   }
@@ -363,7 +364,7 @@ class MinimapElement {
     }
 
     const container = parent || this.minimap.getTextEditorElement()
-    const minimaps = container.querySelectorAll("atom-text-editor-minimap")
+    const minimaps = container.querySelectorAll(TAG_NAME)
     if (minimaps.length) {
       Array.prototype.forEach.call(minimaps, (el) => {
         el.destroy()
@@ -583,7 +584,7 @@ class MinimapElement {
           this.quickSettingsElement.destroy()
           this.quickSettingsSubscription.dispose()
         } else {
-          this.quickSettingsElement = new MinimapQuickSettingsElement()
+          this.quickSettingsElement = createMinimapQuickSettingsElement()
           this.quickSettingsElement.setModel(this)
           this.quickSettingsSubscription = this.quickSettingsElement.onDidDestroy(() => {
             this.quickSettingsElement = null
@@ -1220,8 +1221,13 @@ class MinimapElement {
   }
 }
 
-const minimapElement = MinimapElement.initClass()
-export default minimapElement
+MinimapElement.initClass()
+
+export function createMinimapElement() {
+  const element = document.createElement(TAG_NAME)
+  element.createdCallback()
+  return element
+}
 
 //    ######## ##     ## ######## ##    ## ########  ######
 //    ##       ##     ## ##       ###   ##    ##    ##    ##

lib/minimap-plugin-generator-element.js

@@ -6,11 +6,13 @@ import path from "path"
 import { BufferedProcess } from "atom"
 import element from "./decorators/element"
 
+const TAG_NAME = "minimap-plugin-generator"
+
 /** @access private */
-class MinimapPluginGeneratorElement {
+class MinimapPluginGeneratorElement extends HTMLElement {
   static initClass() {
     this.registerCommands()
-    return element(this, "minimap-plugin-generator")
+    element(this, TAG_NAME)
   }
 
   static registerCommands() {
@@ -51,7 +53,7 @@ class MinimapPluginGeneratorElement {
     this.appendChild(this.modal)
   }
 
-  attachedCallback() {
+  connectedCallback() {
     this.previouslyFocusedElement = document.activeElement
     this.message.textContent = "Enter plugin path"
     this.setPathText("my-minimap-plugin")
@@ -152,8 +154,13 @@ class MinimapPluginGeneratorElement {
   }
 }
 
-const minimapPluginGeneratorElement = MinimapPluginGeneratorElement.initClass()
-export default minimapPluginGeneratorElement
+MinimapPluginGeneratorElement.initClass()
+
+export function createMinimapPluginGeneratorElement() {
+  const element = document.createElement(TAG_NAME)
+  element.createdCallback()
+  return element
+}
 
 function linkPackage(packagePath, callback) {
   const args = ["link"]

lib/minimap-quick-settings-element.js

@@ -7,11 +7,13 @@ import * as Main from "./main"
 import element from "./decorators/element"
 import include from "./decorators/include"
 
+const TAG_NAME = "minimap-quick-settings"
+
 /** @access private */
-class MinimapQuickSettingsElement {
+class MinimapQuickSettingsElement extends HTMLElement {
   static initClass() {
     include(this, EventsDelegation, SpacePenDSL.Babel)
-    return element(this, "minimap-quick-settings")
+    element(this, TAG_NAME)
   }
 
   static content() {
@@ -263,5 +265,10 @@ class MinimapQuickSettingsElement {
   }
 }
 
-const minimapQuickSettingsElement = MinimapQuickSettingsElement.initClass()
-export default minimapQuickSettingsElement
+MinimapQuickSettingsElement.initClass()
+
+export function createMinimapQuickSettingsElement() {
+  const element = document.createElement(TAG_NAME)
+  element.createdCallback()
+  return element
+}

package.json

@@ -14,9 +14,9 @@
     "lint": "eslint . --fix",
     "test.lint": "eslint .",
     "clean": "shx rm -rf dist .parcel-cache",
-    "dev": "cross-env NODE_ENV=development parcel watch --target main ./lib/main.js --no-scope-hoist",
-    "build.test": "npm run clean && cross-env NODE_ENV=test parcel build --target main ./lib/main.js --no-scope-hoist",
-    "build": "cross-env NODE_ENV=production parcel build --target main ./lib/main.js --no-scope-hoist",
+    "dev": "cross-env NODE_ENV=development parcel watch --target main ./lib/main.js",
+    "build.test": "npm run clean && cross-env NODE_ENV=test parcel build --target main ./lib/main.js",
+    "build": "cross-env NODE_ENV=production parcel build --target main ./lib/main.js",
     "build-commit": "npm run clean && build-commit -o dist",
     "esdoc": "esdoc -c esdoc.json",
     "test": "atom --test spec",

spec/minimap-main-spec.js

@@ -2,7 +2,7 @@
 process.env.NODE_ENV = "test"
 
 require("./helpers/workspace")
-const { Minimap, MinimapElement } = require("../dist/main")
+const { Minimap, createMinimapElement } = require("../dist/main")
 
 describe("Minimap package", () => {
   let [editor, minimap, editorElement, minimapElement, workspaceElement, minimapPackage] = []
@@ -52,7 +52,7 @@ describe("Minimap package", () => {
   it("provider returns minimap.minimapElement", () => {
     const textEditor = atom.workspace.buildTextEditor({})
     minimap = new Minimap({ textEditor })
-    minimapElement = new MinimapElement()
+    minimapElement = createMinimapElement()
     minimapElement.setModel(minimap)
     const minimapView = atom.views.getView(minimap)