feat(properties): add withGlobalEffect decorators

nevoland · Jun 2, 2019 · 699fecc · 699fecc
1 parent 2cb26eb
commit 699fecc
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -98,6 +98,8 @@ The `realue` module exposes the following functions:
 - [Lifecycle](#lifecycle)
   - [`withEffect()`](#witheffect)
   - [`withImmediateEffect()`](#withimmediateeffect)
+  - [`withGlobalEffect()`](#withglobaleffect)
+  - [`withImmediateGlobalEffect()`](#withimmediateglobaleffect)
   - [`onPropsChange()`](#onpropschange)
 - [Scoped-based decorators](#scoped-based-decorators)
   - [`scoped()`](#scoped)
@@ -378,6 +380,20 @@ const withListener = withEffect(
 
 Similar to `withEffect`, except that it runs the `handler` at component construction and before each render if `shouldHandleOrKeys` returns `true`.
 
+#### `withGlobalEffect()`
+
+> ➡️ `(handler)`
+
+Runs `handler()` when the first element of this component is mounted.
+If the handler returns a callback, it is called when the last element of this component is unmounted.
+
+#### `withImmediateGlobalEffect()`
+
+> ➡️ `(handler)`
+
+Runs `handler()` when the first element of this component is constructed (that is, before it mounts).
+If the handler returns a callback, it is called when the last element of this component is unmounted.
+
 #### `onPropsChange()`
 
 > ➡️ `(shouldHandleOrKeys, handler, callOnMount = true)`

diff --git a/src/properties.js b/src/properties.js
@@ -207,6 +207,63 @@ export function withImmediateEffect(shouldHandleOrKeys, handler) {
     )
 }
 
+export function withGlobalEffect(handler) {
+  /*
+  Runs `handler()` when the first element of this component is mounted.
+  If the handler returns a callback, it is called when the last element of this component is unmounted.
+  */
+  let elementsCount = 0
+  let cleanup = null
+  return (Component) =>
+    setWrapperName(
+      Component,
+      class withGlobalEffect extends BaseComponent {
+        componentDidMount() {
+          if (elementsCount === 0) {
+            cleanup = handler()
+          }
+          elementsCount += 1
+        }
+        componentWillUnmount() {
+          elementsCount -= 1
+          if (elementsCount === 0 && typeof cleanup === 'function') {
+            cleanup()
+            cleanup = null
+          }
+        }
+      },
+    )
+}
+
+export function withImmediateGlobalEffect(handler) {
+  /*
+  Runs `handler()` when the first element of this component is constructed (that is, before it mounts).
+  If the handler returns a callback, it is called when the last element of this component is unmounted.
+  */
+  let elementsCount = 0
+  let cleanup = null
+  return (Component) =>
+    setWrapperName(
+      Component,
+      class withImmediateGlobalEffect extends BaseComponent {
+        constructor(props) {
+          super(props)
+          if (elementsCount === 0) {
+            cleanup = handler()
+          }
+          elementsCount += 1
+        }
+        componentWillUnmount() {
+          elementsCount -= 1
+          if (elementsCount === 0 && typeof cleanup === 'function') {
+            cleanup()
+            cleanup = null
+          }
+        }
+      },
+    )
+}
+
 export function onPropsChange(
   shouldHandleOrKeys,
   handler,