Subtle semantics changes

Author: xdev1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-element",
-  "version": "0.0.224",
+  "version": "0.0.225",
   "description": "",
   "license": "LGPL-3.0",
   "main": "./index.js",

src/main/js-element-hooks.ts

@@ -370,6 +370,59 @@ export const useBeforeUnmount = hook(
   }
 )
 
+// === useAfterInit =====================================================
+
+export const useOnInit = hook('useOnInit', function (action: () => void) {
+  const c = currentCtrl!
+  const done = false
+
+  c.beforeMount(() => {
+    if (done) {
+      return
+    }
+
+    action()
+  })
+})
+
+// === usePreEffect =====================================================
+
+export const usePreEffect = hook(
+  'usePreEffect',
+  function (
+    action: () => void | undefined | null | (() => void),
+    getDeps?: () => any[]
+  ): void {
+    let oldDeps: any[] | null = null
+    let cleanup: Task | null | undefined | void
+    const c = currentCtrl!
+
+    const callback = () => {
+      let needsAction = getDeps === undefined
+
+      if (!needsAction) {
+        const newDeps = getDeps!()
+
+        needsAction =
+          oldDeps === null ||
+          newDeps === null ||
+          !isEqualArray(oldDeps, newDeps)
+
+        oldDeps = newDeps
+      }
+
+      if (needsAction) {
+        cleanup && cleanup()
+        cleanup = action()
+      }
+    }
+
+    c.beforeMount(callback)
+    c.beforeUpdate(callback)
+    c.beforeUnmount(() => cleanup && cleanup())
+  }
+)
+
 // === useEffect =====================================================
 
 export const useEffect = hook(

src/main/js-element.ts

@@ -51,10 +51,11 @@ type PropConfig =
 type Ctrl = {
   getName(): string
   getHost(): HTMLElement
-  isInitialized(): boolean
+  hasRendered(): boolean
   isMounted(): boolean
   hasUpdated(): boolean
   refresh(): void
+  onceBeforeMount(task: () => void): void
   beforeMount(taks: () => void): void
   afterMount(task: () => void): void
   onceBeforeUpdate(task: () => void): void
@@ -194,11 +195,11 @@ function intercept(point: 'init' | 'render', fn: InterceptFn) {
 
 class BaseElement extends HTMLElement {
   private __ctrl!: Ctrl
-  private __hasAddedPropHandling = false
 
   constructor() {
     super()
 
+    const self: any = this
     const elemConfig = elemConfigByClass.get(this.constructor)!
     const { init, patch } = elemConfig.impl
     let styles = elemConfig.styles
@@ -232,29 +233,30 @@ class BaseElement extends HTMLElement {
     //contentElement.append(document.createElement('span'))
     this.shadowRoot!.append(stylesElement, contentElement)
 
-    let initialized = false
+    let rendered = false
     let mounted = false
     let updated = false
     let shallCommit = false
     let getContent: () => any // TODO
 
+    const onceBeforeMountNotifier = createNotifier()
+    const onceBeforeUpdateNotifier = createNotifier()
     const beforeMountNotifier = createNotifier()
     const afterMountNotifier = createNotifier()
     const beforeUpdateNotifier = createNotifier()
     const afterUpdateNotifier = createNotifier()
     const beforeUnmountNotifier = createNotifier()
-    const onceBeforeUpdateActions: (() => void)[] = []
 
     const ctrl: Ctrl = {
       getName: () => this.localName,
       getHost: () => this,
-      isInitialized: () => initialized,
+      hasRendered: () => rendered,
       isMounted: () => mounted,
       hasUpdated: () => updated,
+      onceBeforeMount: onceBeforeMountNotifier.subscribe,
       beforeMount: beforeMountNotifier.subscribe,
       afterMount: afterMountNotifier.subscribe,
-      onceBeforeUpdate: (task: () => void) =>
-        onceBeforeUpdateActions.push(task),
+      onceBeforeUpdate: onceBeforeUpdateNotifier.subscribe,
       beforeUpdate: beforeUpdateNotifier.subscribe,
       afterUpdate: afterUpdateNotifier.subscribe,
       beforeUnmount: beforeUnmountNotifier.subscribe,
@@ -275,12 +277,10 @@ class BaseElement extends HTMLElement {
 
     const commit = () => {
       if (mounted) {
-        if (onceBeforeUpdateActions.length) {
-          try {
-            onceBeforeUpdateActions.forEach((action) => action())
-          } finally {
-            onceBeforeUpdateActions.length = 0
-          }
+        try {
+          onceBeforeUpdateNotifier.notify()
+        } finally {
+          onceBeforeMountNotifier.clear()
         }
 
         beforeUpdateNotifier.notify()
@@ -301,7 +301,7 @@ class BaseElement extends HTMLElement {
         interceptions.render
       )
 
-      initialized = true
+      rendered = true
 
       if (!mounted) {
         mounted = true
@@ -312,27 +312,25 @@ class BaseElement extends HTMLElement {
       }
     }
 
-    ;(this as any).connectedCallback = () => {
-      if (!this.__hasAddedPropHandling) {
-        addPropHandling(this)
-        this.__hasAddedPropHandling = true
-      }
+    runIntercepted(
+      () => {
+        getContent = init(this, ctrl)
+      },
+      ctrl,
+      interceptions.init
+    )
 
-      if (!initialized) {
-        runIntercepted(
-          () => {
-            getContent = init(this, ctrl)
-          },
-          ctrl,
-          interceptions.init
-        )
+    self.connectedCallback = () => {
+      if (!rendered) {
+        addPropHandling(this)
+        onceBeforeMountNotifier.notify()
       }
 
       beforeMountNotifier.notify()
-
       commit()
     }
-    ;(this as any).disconnectedCallback = () => {
+
+    self.disconnectedCallback = () => {
       beforeUnmountNotifier.notify()
       contentElement.innerHTML = ''
     }
@@ -381,11 +379,6 @@ function addAttributeHandling(
     oldValue: string | null,
     value: string | null
   ) {
-    if (!this.__hasAddedPropHandling) {
-      addPropHandling(this)
-      this.__hasAddedPropHandling = true
-    }
-
     if (!ignoreAttributeChange) {
       const { propName, mapAttrToProp } = propConfigByAttrName.get(
         attrName
@@ -409,6 +402,8 @@ function addPropHandling(obj: any) {
     let propValue = obj[propName]
 
     Object.defineProperty(obj, propName, {
+      configurable: true, // TODO!!!!!!!!!!!!!!!!!!!!!!!!!!
+
       get() {
         return propValue
       },
@@ -466,7 +461,9 @@ function createNotifier() {
 
   return {
     subscribe: (subscriber: () => void) => void subscribers.push(subscriber),
-    notify: () => void (subscribers.length && subscribers.forEach((it) => it()))
+    notify: () =>
+      void (subscribers.length && subscribers.forEach((it) => it())),
+    clear: () => (subscribers.length = 0)
   }
 }
 

src/stories/demos/counter-demo.ts

@@ -1,5 +1,5 @@
 import { component, elem, prop, setMethods, Attrs } from 'js-element'
-import { useState } from 'js-element/hooks'
+import { useOnInit, useState } from 'js-element/hooks'
 import { createRef, html, lit, ref } from 'js-element/lit'
 
 @elem({
@@ -12,6 +12,9 @@ class Counter extends component<{
   increment(): void
   decrement(): void
 }>() {
+  @prop({ attr: Attrs.number, refl: true })
+  initialCount = 0
+
   @prop({ attr: Attrs.string, refl: true })
   labelText = 'Counter'
 
@@ -32,6 +35,10 @@ function counterImpl(self: Counter) {
     decrement: () => setState('count', (it) => it - 1)
   })
 
+  useOnInit(() => {
+    setState('count', self.initialCount)
+  })
+
   return () => html`
     <button ?disabled=${self.disabled} @click=${onClick}>
       ${self.labelText}: ${state.count}
@@ -56,7 +63,7 @@ function counterDemoImpl() {
   return () => html`
     <div>
       <h3>Counter demo</h3>
-      <x-counter ${ref(counterRef)}></x-counter>
+      <x-counter .initialCount=${100} ${ref(counterRef)}></x-counter>
       <button @click=${onDecrementClick}>-1</button>
       <button @click=${onIncrementClick}>+1</button>
       <button @click=${onResetClick}>Reset</button>