Merge branch 'feature/viewport-related-lifecycle-hooks'

Author: michielvandergeest

src/component.js

@@ -102,7 +102,7 @@ const Component = (name = required('name'), config = required('config')) => {
     }
 
     this.parent = parentComponent
-    this[symbols.wrapper] = parentEl
+    this[symbols.holder] = parentEl
 
     Object.defineProperties(this, {
       componentId: {
@@ -163,6 +163,37 @@ const Component = (name = required('name'), config = required('config')) => {
       configurable: false,
     })
 
+    Object.defineProperty(this, symbols.wrapper, {
+      value: this[symbols.children][0],
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    })
+
+    if (config.hooks && config.hooks.attach) {
+      this[symbols.wrapper].node.on('inBounds', () => {
+        this.lifecycle.state = 'attach'
+      })
+    }
+
+    if (config.hooks && config.hooks.detach) {
+      this[symbols.wrapper].node.on('outOfBounds', (node, { previous }) => {
+        if (previous > 0) this.lifecycle.state = 'detach'
+      })
+    }
+
+    if (config.hooks && config.hooks.enter) {
+      this[symbols.wrapper].node.on('inViewport', () => {
+        this.lifecycle.state = 'enter'
+      })
+    }
+
+    if (config.hooks && config.hooks.enter) {
+      this[symbols.wrapper].node.on('outOfViewport', () => {
+        this.lifecycle.state = 'exit'
+      })
+    }
+
     Object.defineProperty(this, symbols.slots, {
       value: this[symbols.children].filter((child) => child[symbols.isSlot]),
       writable: false,

src/lib/lifecycle.js

@@ -19,7 +19,17 @@ import { Log } from './log.js'
 import { emit, privateEmit } from './hooks.js'
 import symbols from './symbols.js'
 
-const states = ['init', 'ready', 'focus', 'unfocus', 'destroy']
+const states = [
+  'init', // fired upon component instantiation
+  'ready', // fired when component instantiated, reactivity setup done and template spawned
+  'focus', // fired when receiving focus (can occur multiple times)
+  'unfocus', // fired when losing focus (can occur multiple times)
+  'destroy', // fired when component is destroyed and removed
+  'attach', // fired when entering the viewport margin and attached to the render tree
+  'detach', // fired when leaving the viewport margin and detached from the render tree
+  'enter', // fired when entering the visible viewport
+  'exit', // fired when leaving the visible viewport
+]
 
 export default {
   previous: null,

src/lib/symbols.js

@@ -3,6 +3,7 @@ export default {
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
+  holder: Symbol('holder'),
   id: Symbol('id'),
   identifier: Symbol('identifier'),
   index: Symbol('index'),

src/router/router.js

@@ -149,7 +149,7 @@ export const navigate = async function () {
           view = view({ props }, holder, this)
         }
       } else {
-        holder = view[symbols.wrapper]
+        holder = view[symbols.holder]
       }
 
       this[symbols.children].push(view)
@@ -223,11 +223,11 @@ const removeView = async (route, view, transition) => {
     if (Array.isArray(transition)) {
       for (let i = 0; i < transition.length; i++) {
         i === transition.length - 1
-          ? await setOrAnimate(view[symbols.wrapper], transition[i])
-          : setOrAnimate(view[symbols.wrapper], transition[i])
+          ? await setOrAnimate(view[symbols.holder], transition[i])
+          : setOrAnimate(view[symbols.holder], transition[i])
       }
     } else {
-      await setOrAnimate(view[symbols.wrapper], transition)
+      await setOrAnimate(view[symbols.holder], transition)
     }
   }