Merge branch 'develop' into main

README.md

@@ -44,16 +44,16 @@ $ yarn i upgraded-element
 <!-- Use the unminified bundle in development -->
 <script
   type="text/javascript"
-  src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.2/dist/upgraded-element.js"
-  integrity="sha256-ZbpVjqgwTOwz+Lb5vUadv8TgeogxGQsrBrBwIMGq7HI="
+  src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.3/dist/upgraded-element.js"
+  integrity="sha256-bseuhwyPf9q7ZaBp97QubjhDNfNbr0M1cLYRtszUn6s="
   crossorigin="anonymous"
 ></script>
 
 <!-- Or use the minified/uglified bundle in production -->
 <script
   type="text/javascript"
-  src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.2/dist/upgraded-element.min.js"
-  integrity="sha256-/ON7MU2ezAVFCPpww5pg4ELQLSRajh6mlsBfzImeUGc="
+  src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.3/dist/upgraded-element.min.js"
+  integrity="sha256-TMQoDfPpWCiYUpIIhQUOyP0KXM5Dwh+7UiZwTA15SGM="
   crossorigin="anonymous"
 ></script>
 ```

demo/index.html

@@ -38,15 +38,15 @@
 
     <!-- <script
       type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.2/dist/upgraded-element.js"
-      integrity="sha256-ZbpVjqgwTOwz+Lb5vUadv8TgeogxGQsrBrBwIMGq7HI="
+      src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.3/dist/upgraded-element.js"
+      integrity="sha256-bseuhwyPf9q7ZaBp97QubjhDNfNbr0M1cLYRtszUn6s="
       crossorigin="anonymous"
     ></script> -->
 
     <!-- <script
       type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.2/dist/upgraded-element.min.js"
-      integrity="sha256-/ON7MU2ezAVFCPpww5pg4ELQLSRajh6mlsBfzImeUGc="
+      src="https://cdn.jsdelivr.net/npm/upgraded-element@0.6.3/dist/upgraded-element.min.js"
+      integrity="sha256-TMQoDfPpWCiYUpIIhQUOyP0KXM5Dwh+7UiZwTA15SGM="
       crossorigin="anonymous"
     ></script> -->
   </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "upgraded-element",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "A simple base class for using Web Components",
   "main": "lib/upgraded-element.cjs.min.js",
   "module": "lib/upgraded-element.es.min.js",

src/__tests__/fixtures/accessor-fixture.js

@@ -5,7 +5,7 @@ import { UpgradedElement, register } from "../.."
  * can't unregister custom elements from the DOM, even between tests.
  * @param {string} id
  */
-export function accessorFixture(id) {
+export function createAccessorFixture(id) {
   class TestElement extends UpgradedElement {
     constructor() {
       super()

src/__tests__/fixtures/basic-fixture.js

@@ -6,7 +6,7 @@ import { UpgradedElement, register } from "../.."
  * @param {string} id
  * @param {{content: string, properties: Object, styles: string}}
  */
-export function basicFixture(id, options = {}) {
+export function createBasicFixture(id, options = {}) {
   class TestElement extends UpgradedElement {
     constructor() {
       super()

src/__tests__/fixtures/lifecycle-fixture.js

@@ -5,7 +5,7 @@ import { UpgradedElement, register } from "../.."
  * can't unregister custom elements from the DOM, even between tests.
  * @param {string} id
  */
-export function lifecycleFixture(id, wait = false) {
+export function createLifecycleFixture(id, wait = false) {
   class TestElement extends UpgradedElement {
     constructor() {
       super()

src/__tests__/upgraded-element.spec.js

@@ -1,33 +1,32 @@
-import { basicFixture } from "./fixtures/basic-fixture"
-import { accessorFixture } from "./fixtures/accessor-fixture"
-import { lifecycleFixture } from "./fixtures/lifecycle-fixture"
+import { createBasicFixture } from "./fixtures/basic-fixture"
+import { createAccessorFixture } from "./fixtures/accessor-fixture"
+import { createLifecycleFixture } from "./fixtures/lifecycle-fixture"
 import { getElement } from "./fixtures/get-element"
 import * as external from "../external"
 
 window.requestAnimationFrame = jest.fn().mockImplementation((fn) => fn())
-window.cancelAnimationFrame = jest.fn().mockImplementation((fn) => fn())
 
 describe("UpgradedElement", () => {
   afterEach(() => (document.innerHTML = ""))
 
   it("upgrades the element", () => {
     // Given
-    basicFixture("upgraded")
+    createBasicFixture("upgraded")
     // Then
     expect(getElement("upgraded").hasAttribute("element-id")).toBe(true)
   })
 
   it("creates a shadow root", () => {
     // Given
-    basicFixture("creates-shadow")
+    createBasicFixture("creates-shadow")
     // Then
     expect(getElement("creates-shadow").shadowRoot).not.toBeNull()
   })
 
   it("renders styles to shadow root", () => {
     // Given
     const styles = "div { display: block; }"
-    basicFixture("styles", { styles })
+    createBasicFixture("styles", { styles })
     // Then
     expect(
       getElement("styles").shadowRoot.querySelector("style")
@@ -40,7 +39,7 @@ describe("UpgradedElement", () => {
   it("assigns slots, if given", () => {
     // Given
     const slotName = "main"
-    basicFixture("slotted", {
+    createBasicFixture("slotted", {
       slotName,
       content: `<slot name='main'></slot>`,
     })
@@ -56,7 +55,7 @@ describe("UpgradedElement", () => {
       const properties = {
         testProp1: { default: "foo" },
       }
-      basicFixture("props", { properties })
+      createBasicFixture("props", { properties })
       // Then
       expect(getElement("props").testProp1).toEqual(
         properties.testProp1.default
@@ -69,7 +68,7 @@ describe("UpgradedElement", () => {
         testProp1: { default: "foo" },
       }
       const nextValue = "bar"
-      basicFixture("val-change", { properties })
+      createBasicFixture("val-change", { properties })
       // When
       getElement("val-change").testProp1 = nextValue
       // Then
@@ -81,7 +80,7 @@ describe("UpgradedElement", () => {
 
     it("doesn't upgrade properties if accessors already exist", () => {
       // Given
-      accessorFixture("no-upgrade")
+      createAccessorFixture("no-upgrade")
       // Then
       expect(getElement("no-upgrade").count).toEqual(1)
     })
@@ -96,7 +95,7 @@ describe("UpgradedElement", () => {
             safe: true,
           },
         }
-        basicFixture("safe-upgrade", { properties })
+        createBasicFixture("safe-upgrade", { properties })
         // Then
         const nextValue = "&lt;span&gt;unsafe&lt;/span&gt;"
         expect(getElement("safe-upgrade").safeString).toEqual(nextValue)
@@ -111,7 +110,7 @@ describe("UpgradedElement", () => {
             safe: true,
           },
         }
-        basicFixture("safe-change", { properties })
+        createBasicFixture("safe-change", { properties })
         // When
         getElement("safe-change").safeString = "&hello"
         // Then
@@ -126,7 +125,7 @@ describe("UpgradedElement", () => {
         const properties = {
           reflectedProp: { reflected: true },
         }
-        basicFixture("reflect-one", { properties })
+        createBasicFixture("reflect-one", { properties })
         // Then
         const element = getElement("reflect-one")
         expect(element.hasAttribute("reflected-prop")).toBe(true)
@@ -138,7 +137,7 @@ describe("UpgradedElement", () => {
         const properties = {
           reflectedProp: { default: "foo", reflected: true },
         }
-        basicFixture("reflect-two", { properties })
+        createBasicFixture("reflect-two", { properties })
         // Then
         const element = getElement("reflect-two")
         expect(element.hasAttribute("reflected-prop")).toBe(true)
@@ -150,7 +149,7 @@ describe("UpgradedElement", () => {
         const properties = {
           reflectedProp: { default: "foo", reflected: true },
         }
-        basicFixture("reflect-three", { properties })
+        createBasicFixture("reflect-three", { properties })
         const element = getElement("reflect-three")
         element.reflectedProp = "bar"
         // Then
@@ -162,7 +161,7 @@ describe("UpgradedElement", () => {
         const properties = {
           reflectedProp: { default: "foo", reflected: true },
         }
-        basicFixture("reflect-four", { properties })
+        createBasicFixture("reflect-four", { properties })
         const element = getElement("reflect-four")
         element.reflectedProp = undefined
         // Then
@@ -185,7 +184,7 @@ describe("UpgradedElement", () => {
             default: "foo",
           },
         }
-        basicFixture("upgrade-type-warn", { properties })
+        createBasicFixture("upgrade-type-warn", { properties })
         // Then
         expect(console.warn).toBeCalledWith(warningMessage)
       })
@@ -198,7 +197,7 @@ describe("UpgradedElement", () => {
             default: true,
           },
         }
-        basicFixture("change-type-warn", { properties })
+        createBasicFixture("change-type-warn", { properties })
         // When
         getElement("change-type-warn").testProp1 = "foo"
         // Then
@@ -212,7 +211,7 @@ describe("UpgradedElement", () => {
 
   describe("lifecycle methods", () => {
     it("calls elementPropertyChanged", () => {
-      const Cls = lifecycleFixture("prop-changed")
+      const Cls = createLifecycleFixture("prop-changed")
       Cls.prototype[external.elementPropertyChanged] = jest.fn()
       getElement("prop-changed").testProp = true
       expect(Cls.prototype[external.elementPropertyChanged]).toBeCalledWith(
@@ -223,7 +222,7 @@ describe("UpgradedElement", () => {
     })
 
     it("calls elementAttributeChanged", () => {
-      const Cls = lifecycleFixture("attr-changed")
+      const Cls = createLifecycleFixture("attr-changed")
       Cls.prototype[external.elementAttributeChanged] = jest.fn()
       getElement("attr-changed").testProp = true
       expect(Cls.prototype[external.elementAttributeChanged]).toBeCalledWith(
@@ -234,54 +233,45 @@ describe("UpgradedElement", () => {
     })
 
     it("calls elementDidUpdate", () => {
-      const Cls = lifecycleFixture("update")
+      const Cls = createLifecycleFixture("update")
       Cls.prototype[external.elementDidUpdate] = jest.fn()
       getElement("update").testProp = true
       expect(Cls.prototype[external.elementDidUpdate]).toBeCalled()
     })
 
-    // whyyyyy
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip("calls elementDidUpdate if property updates in elementDidMount", async () => {
-      const [init, Cls] = lifecycleFixture("mount-update", true)
-      Cls.prototype[external.elementDidUpdate] = jest.fn()
+    it("calls elementDidUpdate if property updates in elementDidMount", async () => {
+      const [init, Cls] = createLifecycleFixture("mount-update", true)
       Cls.prototype[external.elementDidMount] = () => {
         getElement("mount-update").testProp = true
       }
-      // Cls.prototype[external.elementDidMount] = () => {
-      //   console.log("Mounted!")
-      //   getElement("mount-update").testProp = true
-      // }
-      // Cls.prototype[external.elementDidUpdate] = () => {
-      //   console.log("Updated!")
-      // }
+      Cls.prototype[external.elementDidUpdate] = jest.fn()
       init()
       expect(Cls.prototype[external.elementDidUpdate]).toBeCalled()
     })
 
     it("calls elementDidConnect", () => {
-      const [init, Cls] = lifecycleFixture("connect", true)
+      const [init, Cls] = createLifecycleFixture("connect", true)
       Cls.prototype[external.elementDidConnect] = jest.fn()
       init()
       expect(Cls.prototype[external.elementDidConnect]).toBeCalled()
     })
 
     it("calls elementDidMount", () => {
-      const [init, Cls] = lifecycleFixture("mount", true)
+      const [init, Cls] = createLifecycleFixture("mount", true)
       Cls.prototype[external.elementDidMount] = jest.fn()
       init()
       expect(Cls.prototype[external.elementDidMount]).toBeCalled()
     })
 
     it("calls elementWillUnmount", () => {
-      const Cls = lifecycleFixture("unmount")
+      const Cls = createLifecycleFixture("unmount")
       Cls.prototype[external.elementWillUnmount] = jest.fn()
       document.body.removeChild(getElement("unmount"))
       expect(Cls.prototype[external.elementWillUnmount]).toBeCalled()
     })
 
     it("recalls elementDidMount if the component is disconnected and then reconnected", async () => {
-      const [init, Cls] = lifecycleFixture("remount", true)
+      const [init, Cls] = createLifecycleFixture("remount", true)
       Cls.prototype[external.elementDidMount] = jest.fn()
       init()
       const fixture = getElement("remount")

src/internal.js

@@ -16,6 +16,6 @@ export const runLifecycle = Symbol("#runLifecycle")
 export const performUpgrade = Symbol("#performUpgrade")
 export const upgradeProperty = Symbol("#upgradeProperty")
 export const renderStyles = Symbol("#renderStyles")
-export const getInitialRenderState = Symbol("#getInitialRenderState")
-export const getNextRenderState = Symbol("#getNextRenderState")
+export const setInitialRenderState = Symbol("#setInitialRenderState")
+export const setNextRenderState = Symbol("#setNextRenderState")
 export const renderDOM = Symbol("#renderDOM")

src/upgraded-element.js

@@ -220,18 +220,17 @@ export class UpgradedElement extends HTMLElement {
    * Create a virtual DOM from the external `render` method and patch
    * it into the shadow root. Triggers `elementDidMount`, if defined.
    */
-  [internal.getInitialRenderState]() {
+  [internal.setInitialRenderState]() {
     this[internal.vDOM] = this[internal.getVDOM]()
     render(this[internal.vDOM], this[internal.shadowRoot])
     this[internal.runLifecycle](external.elementDidMount)
-    this[internal.isFirstRender] = false
   }
 
   /**
    * All renders after initial render:
    * Create a new vdom and patch the existing one.
    */
-  [internal.getNextRenderState]() {
+  [internal.setNextRenderState]() {
     let nextVDOM = this[internal.getVDOM]()
     patch(nextVDOM, this[internal.vDOM])
     this[internal.runLifecycle](external.elementDidUpdate)
@@ -242,8 +241,11 @@ export class UpgradedElement extends HTMLElement {
    * Runs either a new render or diffs the existing virtual DOM to a new one.
    */
   [internal.renderDOM]() {
-    return this[internal.isFirstRender]
-      ? this[internal.getInitialRenderState]()
-      : this[internal.getNextRenderState]()
+    if (this[internal.isFirstRender]) {
+      this[internal.isFirstRender] = false
+      this[internal.setInitialRenderState]()
+    } else {
+      this[internal.setNextRenderState]()
+    }
   }
 }