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

Comparing version 0.4.0 to 0.5.0

package.json

 {
   "name": "@morbidick/lit-element-notify",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Small helpers for LitElement to dispatch change notifications and two-way binding",
@@ -11,9 +11,11 @@ "license": "MIT",
   "main": "index.js",
-  "dependencies": {
-    "@polymer/lit-element": "^0.6.3",
-    "lit-html": "^0.13.0"
+  "peerDependencies": {
+    "@polymer/lit-element": "^0.6.5",
+    "lit-html": "^1.0.0-rc.1"
   },
   "devDependencies": {
-    "@webcomponents/webcomponentsjs": "^2.0.2",
-    "polyserve": "^0.27.0"
+    "@polymer/lit-element": "^0.6.5",
+    "@webcomponents/webcomponentsjs": "^2.2.1",
+    "lit-html": "^1.0.0-rc.1",
+    "polyserve": "^0.27.14"
   },
@@ -20,0 +22,0 @@ "scripts": {

README.md

@@ -5,3 +5,3 @@ # Change notification helpers for LitElement
 
-Small helpers for LitElement to dispatch change notifications and two-way binding to siblings.
+Small helpers for LitElement to dispatch change notifications and two-way binding. For a comparison to PolymerElement and pure LitElement see [comparison section](docs/comparison.md) in the docs.
 
@@ -14,6 +14,4 @@ ## Install
 
-## Usage
+## Notify mixin
 
-### Notify mixin
-
 Small mixin for LitElement to get easy change events via the `properties` getter.
@@ -23,5 +21,5 @@
 
-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`
+1. `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).
+2. the notify option contains a string: `notify: 'success-event'` fires an event named `success-event`.
+3. `notify: true` is set and the attribute option is a string (`attribute: 'attribute-name'`): the attribute name will be suffixed with `-changed`.
 
@@ -55,6 +53,6 @@ The updated value of the property is available in `event.detail.value`.
       // if an attribute value is set, -changed is appended
-      anotherProperty: {
+      myMessage: {
         type: String,
-        attribute: 'another-attribute',
-        notify: true, // fires another-attribute-changed
+        attribute: 'my-message',
+        notify: true, // fires my-message-changed
       },
@@ -67,29 +65,30 @@
 
-### Subscribe directive
+## Sync 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:
+lit-html directive to synchronize an element property to a childs property, adding two-way binding to lit-element. 
+The directive takes two parameters, the property name and an optional event name on which to sync.
 
-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`
+### Usage
 
 ```javascript
 import { LitElement, html } from '@polymer/lit-element/lit-element.js';
-import subscribe from '@morbidick/lit-element-notify/subscribe.js';
+import LitSync from '@morbidick/lit-element-notify/sync.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>`;
-    }
+class SyncElement extends LitSync(LitElement) {
+
+    // Syncing the child property `token` with the parent property `myProperty` when `token-changed`
+    // is fired or `myProperty` set.
+    render() { return html`
+        <notifying-element .token=${this.sync('myProperty')}></notifying-element>
+    `}
+
+    // Syncing the child property `myMessage` with the event explicitly set to `my-message-changed` 
+    // (mainly used to map from the camelCase property to the kebap-case event as PolymerElement does).
+    render() { return html`
+        <notifying-element .myMessage=${this.sync('myProperty', 'my-message-changed')}></notifying-element>
+    `}
+
 }
 ```
+
+https://github.com/github/time-elements/blob/master/test/karma.config.js

No alert changes

Improved metrics

Total package byte prevSize

11449

increased by29.62%

Number of package files

8

increased by14.29%

Lines of code

86

increased by11.69%

Worsened metrics

Dev dependency count

4

increased by100%

Number of lines in readme file

90

decreased by-1.1%

Dependency changes

• - Removed@polymer/lit-element@^0.6.3

• - Removedlit-html@^0.13.0

• - Removedlit-html@0.13.0(transitive)