wc-context - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

dist/wc-context.js

@@ -1,73 +0,84 @@
-var contextMap = Object.create(null);
+var contextProxyHandler = {
+  get: function get(target, propName) {
+    return target.__wcContext[propName];
+  }
+};
 
-function findContextEntry(el, name) {
-  var entries = contextMap[name];
-  if (entries) {
-    for (var i = entries.length - 1; i >= 0; i--) {
-      var entry = entries[i];
-      if (entry.el.contains(el)) {
-        return entry;
-      }
+function defineContextProp(el, name) {
+  el.__wcContext = {};
+  Object.defineProperty(el, name, {
+    get: function get() {
+      return this.__wcContextProxy || (this.__wcContextProxy = new Proxy(this, contextProxyHandler));
     }
-  }
+  });
 }
 
-function getContextValue(el, name) {
-  var entry = findContextEntry(el, name);
-  if (entry) {
-    return typeof entry.value === 'function' ? entry.value.call(entry.el) : entry.value;
-  }
-}
+function defineChildContextProp(el, name) {
+  el.__wcChildContext = {};
+  Object.defineProperty(el, name, {
+    get: function get() {
+      return this.__wcChildContext;
+    },
+    set: function set(value) {
+      var _this = this;
 
-var proxyHandler = {
-  get: function get(target, property) {
-    return getContextValue(target, property);
-  }
-};
-
-function getter() {
-  return this.__wcContextProxy || (this.__wcContextProxy = new Proxy(this, proxyHandler));
+      var childContext = this.__wcChildContext;
+      Object.keys(value).forEach(function (propName) {
+        var propValue = value[propName];
+        if (childContext[propName] !== propValue) {
+          updateContext(_this, propName, propValue);
+          childContext[propName] = propValue;
+        }
+      });
+    }
+  });
 }
 
-function defineContextProp(el, propName) {
-  Object.defineProperty(el, propName, {
-    get: getter
+function addChildContext(el, name, value) {
+  var observerMap = el.__wcContextObserverMap || (el.__wcContextObserverMap = {});
+  var observers = observerMap[name] || (observerMap[name] = []);
+  el.addEventListener("context-request-" + name, function (event) {
+    event.stopPropagation();
+    event.detail.value = value;
+    observers.push(event.target);
   });
 }
 
-function addContext(el, name, value) {
-  var entries = contextMap[name] || (contextMap[name] = []);
-  entries.push({ el: el, value: value, observers: [] });
-}
-
-function removeContext(el, name) {
-  var entries = contextMap[name];
-  if (entries) {
-    var index = entries.findIndex(function (mapping) {
-      return mapping.el === el;
+function removeChildContext(el, name) {
+  // todo: is removeContext necessary? Probably not
+  // removeEventListener expects the listener as argument
+  // el.removeEventListener(`context-request-${name}`)
+  var observerMap = el.__wcContextObserverMap;
+  var observers = observerMap && observerMap[name];
+  if (observers) {
+    observers.forEach(function (observer) {
+      observer.__wcContext[name] = undefined;
     });
-    if (index !== -1) entries.splice(index, 1);
   }
+  observerMap[name] = [];
 }
 
 function observeContext(el, name) {
-  var entry = findContextEntry(el, name);
-  if (entry) {
-    entry.observers.push(el);
-  }
+  var event = new CustomEvent("context-request-" + name, {
+    detail: {},
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+
+  el.dispatchEvent(event);
+  el.__wcContext[name] = event.detail.value;
 }
 
-function invalidateContext(el, name) {
-  var entries = contextMap[name];
-  if (entries) {
-    var entry = entries.find(function (item) {
-      return item.el === el;
+function updateContext(el, name, value) {
+  var observerMap = el.__wcContextObserverMap;
+  var observers = observerMap && observerMap[name];
+  if (observers) {
+    observers.forEach(function (observer) {
+      var oldValue = observer.__wcContext[name];
+      observer.__wcContext[name] = value;
+      if (observer.contextChangedCallback) {
+        observer.contextChangedCallback(name, oldValue, value);
+      }
     });
-    if (entry) {
-      entry.observers.forEach(function (observer) {
-        if (observer.contextChangedCallback) {
-          observer.contextChangedCallback(name);
-        }
-      });
-    }
   }
@@ -96,2 +107,3 @@ }
       defineContextProp(_this, 'context');
+      defineChildContextProp(_this, 'childContext');
       return _this;
@@ -112,8 +124,7 @@ }
         }
-        var childContext = this.constructor.childContext;
-        if (childContext) {
-          Object.keys(childContext).forEach(function (key) {
-            addContext(_this2, key, childContext[key]);
-          });
-        }
+
+        var childContext = this.childContext;
+        Object.keys(childContext).forEach(function (key) {
+          addChildContext(_this2, key, childContext[key]);
+        });
       }
@@ -126,14 +137,7 @@ }, {
         _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'disconnectedCallback', this) && _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'disconnectedCallback', this).call(this);
-        var childContext = this.constructor.childContext;
-        if (childContext) {
-          Object.keys(childContext).forEach(function (key) {
-            removeContext(_this3, key);
-          });
-        }
+        var childContext = this.childContext;
+        Object.keys(childContext).forEach(function (key) {
+          removeChildContext(_this3, key);
+        });
       }
-    }, {
-      key: 'invalidateContext',
-      value: function invalidateContext$$1(name) {
-        invalidateContext(this, name);
-      }
     }]);
@@ -145,3 +149,3 @@
 
-export { defineContextProp, addContext, removeContext, withContext };
+export { withContext };
 //# sourceMappingURL=wc-context.js.map

package.json

 {
   "name": "wc-context",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Simple context for HTML custom elements",
@@ -5,0 +5,0 @@ "repository": "blikblum/wc-context",

src/index.js

@@ -1,4 +0,35 @@
-import { defineContextProp, addContext, removeContext } from './context'
-import { withContext } from './mixin'
 
-export { defineContextProp, addContext, removeContext, withContext }
+import { defineContextProp, addChildContext, removeChildContext, observeContext, defineChildContextProp } from './core'
+
+const withContext = (Base) => {
+  return class extends Base {
+    constructor () {
+      super()
+      defineContextProp(this, 'context')
+      defineChildContextProp(this, 'childContext')
+    }
+
+    connectedCallback () {
+      super.connectedCallback && super.connectedCallback()
+      const observedContexts = this.constructor.observedContexts
+      if (observedContexts) {
+        observedContexts.forEach(context => observeContext(this, context))
+      }
+
+      const childContext = this.childContext
+      Object.keys(childContext).forEach(key => {
+        addChildContext(this, key, childContext[key])
+      })
+    }
+
+    disconnectedCallback () {
+      super.disconnectedCallback && super.disconnectedCallback()
+      const childContext = this.childContext
+      Object.keys(childContext).forEach(key => {
+        removeChildContext(this, key)
+      })
+    }
+  }
+}
+
+export { withContext }

test/mixin.spec.js

 /* eslint-env jest */
-import { withContext } from '../src/mixin'
-import { defineContextProp, addContext, removeContext } from '../src/context'
+import { withContext } from '../src/index'
+import { defineContextProp, addContext, removeContext } from '../src/core'
 
@@ -5,0 +5,0 @@ const Component = withContext(HTMLElement)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

201069

increased by0.93%

Lines of code

469

increased by2.4%

Worsened metrics

Number of package files

17

decreased by-5.56%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes