@vonage/element-f - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

package.json

 {
   "name": "@vonage/element-f",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A functional shim to custom element definition",
@@ -5,0 +5,0 @@ "main": "./dist/umd.min.js",

README.md

@@ -16,4 +16,5 @@ # element-f
 
-const MyElement = elementF(function(){
-    // --- Your logic goes here --
+const MyElement = elementF(()=> {
+  // Your logic goes here  
+  const shadow = this.attachShadow({mode: 'open'});
 });
@@ -24,16 +25,25 @@ ```
 ```javascript
-const MyElement = elementF(function(life){
-    life.on('connected', ()=> console.log(`I'm Alive!`));
+const MyElement = elementF((life)=> {
+    const shadow = this.attachShadow({mode: 'open'});
+    // Listen once to when this component connects to a document 
+    life.once('connect', ()=> shadow.innerHTML = `I'm Alive!`);
 });
 ```
 
+The "life" event emitter supports three methods:
+  * **`once(name, fn)`<br/>`on(name, fn)`** - Registers **`fn`** for events of name **`name`**. **`once()`** will invoke **fn** once.
+    * **`name`** - The name of the event to listen to
+    * **`fn(payload)`** - The function to be called when  an event occurs
+      * **`payload`** - An object containing information regarding the event
+  * **`off(name, fn)`** - Removes an event handler previously registered using **on** or **once**.
+
 The following events are thrown:
-  * **`connected`** - Fired upon `connectedCallback`
-  * **`disconnected`** - Fired upon `disconnectedCallback`
-  * **`attribute`** - Fired when an observed attribute changes.
+  * **`connect`** - Fired upon `connectedCallback`. Delivers no payload.
+  * **`disconnect`** - Fired upon `disconnectedCallback`. Delivers no payload.
+  * **`attribute`** - Fired when an observed attribute changes. Delivers **name**, **previousValue** and **newValue** as payload.
 
 To observe attributes, just add their list to `elementF` call:
 ```javascript
-const MyElement = elementF(function(life){
-    life.on('attribute', ({ name, oldValue, newValue })=> {
+const MyElement = elementF((life)=> {
+    life.on('attribute', ({ name, previousValue, newValue })=> {
         // name can be "one" or "two"
@@ -44,4 +54,4 @@ });
 
-### Usage 
-To define a custom element using the standard class notation:
+#### Usage Examples
+To define a custom element using standard class notation, you'd write something like:
 
@@ -64,3 +74,3 @@ ```javascript
 
-    connectedCallback() {
+    connectCallback() {
       this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
@@ -71,8 +81,8 @@ }
 
-Defining the same element using element-f would look like this:
+To defining the same element using **element-f** would look like this:
 
 ```javascript
-const MyButton = elementF(function(life){
+const MyButton = elementF((life)=> {
   
-  life.on('connected', ()=> { 
+  life.on('connect', ()=> { 
     this.innerHTML = "<b>I'm an x-foo-with-markup!</b>"; 
@@ -90,12 +100,4 @@ });
 
+### What does Element-F solve?
 
-
-
-
-
-
-
-
-
-
-
+**Element-F** supplies a stylistic framework, not a fundamental solution to a problem. If you're happy with OOP-styled constructs, you would probably not draw much enjoyment from using it :)

src/element-f.js

@@ -7,4 +7,7 @@ export default function (generator, attributes = []) {
         super();
-        const emitter = (function () {
-          const eventMap = new Map();
+        const emitter = (function(){
+          const
+              eventMap = new Map(),
+              onceMap = new WeakMap();
+
           this[BUS] = function ({type, ...payload}) {
@@ -19,3 +22,11 @@ [...(eventMap.get(type) || new Set()).values()].forEach((handler) => handler(payload));
             off(type, handler) {
-              (eventMap.get(type) || new Set()).delete(handler);
+              (eventMap.get(type) || new Set()).delete(onceMap.get(handler) ?? handler);
+            },
+            once(type, handler) {
+              let wrappedHandler = (...props)=> {
+                handler(...props);
+                this.off(type, wrappedHandler);
+              };
+              onceMap.set(handler, wrappedHandler);
+              this.on(type, wrappedHandler);
             }
@@ -33,12 +44,17 @@ };
       connectedCallback() {
-        this[BUS]({type: "connected"});
+        this[BUS]({type: "connect"});
       }
 
       disconnectedCallback() {
-        this[BUS]({type: "disconnected"});
+        this[BUS]({type: "disconnect"});
       }
     };
 
-  Element.observedAttributes = attributes;
+  Object.defineProperty(Element, 'observedAttributes', {
+    configurable: false,
+    enumerable: false,
+    get: ()=> attributes
+  });
+
   return Element;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7735

increased by23.25%

Lines of code

48

increased by41.18%

Number of lines in readme file

97

increased by1.04%

No dependency changes