@morbidick/lit-element-notify - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

package.json

 {
   "name": "@morbidick/lit-element-notify",
-  "version": "0.3.0",
-  "description": "Small mixin for LitElement to get easy change events via the properties getter",
+  "version": "0.4.0",
+  "description": "Small helpers for LitElement to dispatch change notifications and two-way binding",
   "license": "MIT",
@@ -10,3 +10,15 @@ "repository": {
   },
-  "main": "lit-element-notify.js"
+  "main": "index.js",
+  "dependencies": {
+    "@polymer/lit-element": "^0.6.3",
+    "lit-html": "^0.13.0"
+  },
+  "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^2.0.2",
+    "polyserve": "^0.27.0"
+  },
+  "scripts": {
+    "start": "npm run serve",
+    "serve": "polyserve --npm --module-resolution=node"
+  }
 }

README.md

@@ -1,6 +0,6 @@
-# Change notification mixin for LitElement
+# Change notification helpers for LitElement
 
 [![npm version](https://img.shields.io/npm/v/@morbidick/lit-element-notify.svg)](https://www.npmjs.com/package/@morbidick/lit-element-notify)
 
-Small mixin for LitElement to get easy change events via the `properties` getter.
+Small helpers for LitElement to dispatch change notifications and two-way binding to siblings.
 
@@ -15,5 +15,17 @@ ## Install
 
+### Notify mixin
+
+Small mixin for LitElement to get easy change events via the `properties` getter.
+
+This mixin adds the `notify` option to the property definition. Similar to the LitElement `attribute` option (which reflects a property to the dom) it fires an event as soon as the property value changes. The event name depends on the following conditions:
+
+0. `notify: true`: the property gets lowercased and `-changed` is appended (note: contrary to PolymerElement and similar to LitElements attribute handling no camelCase to kebap-case conversion is done)
+0. the notify option contains a string: `notify: 'success-event` fires an event named `success-event`
+0. `notify: true` is set and the attribute option is a string (`attribute: 'attribute-name`): the attribute name will be suffixed with `-changed`
+
+The updated value of the property is available in `event.detail.value`.
+
 ```javascript
 import { LitElement, html } from '@polymer/lit-element/lit-element.js';
-import LitNotify from '@morbidick/lit-element-notify/lit-element-notify.js';
+import LitNotify from '@morbidick/lit-element-notify/notify.js';
 
@@ -51,1 +63,30 @@ class NotifyingElement extends LitNotify(LitElement) {
 ```
+
+### Subscribe directive
+
+lit-html directive to subscribe an element property to a sibling property, adding two-way binding to lit-element. The function takes three parameters:
+
+1. the object on which the property will be updated
+2. the property name to update
+3. (optional) the event name to subscribe to, by default the property name will be lowercased and suffixed with `-changed`
+
+```javascript
+import { LitElement, html } from '@polymer/lit-element/lit-element.js';
+import subscribe from '@morbidick/lit-element-notify/subscribe.js';
+
+class SubscribingElement extends LitElement {
+    static get properties() {
+        return {
+            myProperty: {type: String},
+            myProperty2: {type: String},
+        };
+    }
+    render() {
+        return html`
+            <notifying-element
+                token=${subscribe(this, 'myProperty')}
+                .anotherProperty=${subscribe(this, 'myProperty2', 'another-attribute-changed')}
+            ></notifying-element>`;
+    }
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

8833

163.83%

Number of package files

7

75%

Lines of code

77

63.83%

Number of lines in readme file

91

82%

Worsened metrics

Dependency count

2

Infinity%

Dev dependency count

2

Infinity%

Dependency changes

• + Added

  @polymer/lit-element@^0.6.3

• + Added

  lit-html@^0.13.0

• + Added

  @polymer/lit-element@0.6.5
  (transitive)

• + Added

  @types/trusted-types@2.0.7
  (transitive)

• + Added

  lit-html@0.13.02.0.0-rc.5
  (transitive)