@blockquote-web-components/blockquote-controller-rxjs 1.0.23 → 1.1.0

package/README.md

@@ -1,8 +1,6 @@
-# blockquote-controller-rxjs
-
 # BlockquoteControllerRxjs
 
-![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
+![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
 
 `BlockquoteControllerRxjs` is a Reactive Controller.
 
@@ -12,57 +10,87 @@
 `BlockquoteControllerRxjs` provides a subscribe method to which pass the property we want to
 assign values to and the Observable we want to subscribe.
 
-- It works with [reactive properties](https://lit.dev/docs/components/properties/) and no-reactive properties
+- It works with [reactive properties](https://lit.dev/docs/components/properties/) and non-reactive properties
 - It ignores calls on the same property with the same Observable
-- It unsubscribes from old observable if called again on the same property with different Observable
+- It unsubscribes from the old observable if called again on the same property with a different Observable
 - It unsubscribes when the component is removed
 
 ## Usage
 
 ```js
 class BlockquoteControllerRxjsDemo extends LitElement {
-static get is() {
-   return 'blockquote-controller-rxjs-demo';
-}
+  static get is() {
+    return 'blockquote-controller-rxjs-demo';
+  }
 
-static get properties() {
-   return {
-     _pos: {
-       type: Object,
-       attribute: false,
-     },
-   };
-}
+  static get properties() {
+    return {
+      _pos: {
+        type: Object,
+        attribute: false,
+      },
+    };
+  }
 
-constructor() {
-   super();
-   this.rx = new BlockquoteControllerRxjs(this);
-   this._pos = { x: 0, y: 0 };
-   this.values$ = fromEvent(window, 'mousemove').pipe(
-     map(({ clientX, clientY }) => ({ x: clientX, y: clientY })),
-   );
-}
+  constructor() {
+    super();
+    this.rx = new BlockquoteControllerRxjs(this);
+    this._pos = { x: 0, y: 0 };
+    this.values$ = fromEvent(window, 'mousemove').pipe(
+      map(({ clientX, clientY }) => ({ x: clientX, y: clientY })),
+    );
+  }
 
-connectedCallback() {
-   super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-   // Property and Observable.
-   this.rx.subscribe('_pos', this.values$);
-}
+    // Property and Observable.
+    this.rx.subscribe('_pos', this.values$);
+  }
 
-render() {
-   return html`
-     <p>The mouse is at:</p>
-     <pre>
-       x: ${this._pos.x}
-       y: ${this._pos.y}
-     </pre
-     >
-   `;
-}
+  render() {
+    return html`
+      <p>The mouse is at:</p>
+      <pre>
+        x: ${this._pos.x}
+        y: ${this._pos.y}
+      </pre
+      >
+    `;
+  }
 }
 ```
 
-## Exports
 
-- BlockquoteControllerRxjs
+### `src/BlockquoteControllerRxjs.js`:
+
+#### class: `BlockquoteControllerRxjs`
+
+##### Fields
+
+| Name | Privacy | Type | Default     | Description | Inherited From |
+| ---- | ------- | ---- | ----------- | ----------- | -------------- |
+|      |         |      | `new Map()` |             |                |
+
+##### Methods
+
+| Name               | Privacy | Description | Parameters         | Return | Inherited From |
+| ------------------ | ------- | ----------- | ------------------ | ------ | -------------- |
+| `subscribe`        |         |             | `propKey, stream$` |        |                |
+| `hostDisconnected` |         |             |                    |        |                |
+
+<hr/>
+
+#### Exports
+
+| Kind | Name                       | Declaration              | Module                          | Package |
+| ---- | -------------------------- | ------------------------ | ------------------------------- | ------- |
+| `js` | `BlockquoteControllerRxjs` | BlockquoteControllerRxjs | src/BlockquoteControllerRxjs.js |         |
+
+### `index.js`:
+
+#### Exports
+
+| Kind | Name                       | Declaration              | Module                            | Package |
+| ---- | -------------------------- | ------------------------ | --------------------------------- | ------- |
+| `js` | `BlockquoteControllerRxjs` | BlockquoteControllerRxjs | ./src/BlockquoteControllerRxjs.js |         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-controller-rxjs",
-  "version": "1.0.23",
+  "version": "1.1.0",
   "description": "Webcomponent blockquote-controller-rxjs following open-wc recommendations",
   "keywords": [
     "lit",
@@ -74,6 +74,7 @@
       {
         "files": "*.{scss,css}",
         "options": {
+          "printWidth": 280,
           "singleQuote": false
         }
       }
@@ -83,15 +84,30 @@
     "parserOptions": {
       "ecmaVersion": "latest"
     },
-    "plugins": [
-      "log-filenames"
-    ],
     "extends": [
-      "prettier",
-      "@open-wc"
+      "@open-wc",
+      "prettier"
     ],
     "rules": {
       "class-methods-use-this": "off",
+      "indent": [
+        "error",
+        2,
+        {
+          "SwitchCase": 1,
+          "ignoredNodes": [
+            "PropertyDefinition",
+            "TemplateLiteral > *"
+          ]
+        }
+      ],
+      "no-unused-expressions": [
+        "error",
+        {
+          "allowShortCircuit": true,
+          "allowTernary": true
+        }
+      ],
       "object-curly-newline": "off",
       "import/extensions": [
         "error",
@@ -105,33 +121,38 @@
         {
           "devDependencies": [
             "**/test/**/*.{js,ts}",
-            "**/*.config.{js,mjs,cjs}",
-            "**/*.conf.{js,mjs,cjs}"
+            "**/*.config.{js,ts,mjs,cjs}",
+            "**/*.conf.{js,ts,mjs,cjs}"
           ]
         }
       ],
       "import/no-unresolved": "off",
-      "import/prefer-default-export": "off"
+      "import/prefer-default-export": "off",
+      "lit/no-classfield-shadowing": "off",
+      "lit/no-native-attributes": "off"
     }
   },
   "stylelint": {
     "extends": "stylelint-config-standard-scss",
     "rules": {
       "custom-property-pattern": null,
-      "max-line-length": null
+      "max-line-length": null,
+      "no-duplicate-selectors": null,
+      "color-function-notation": null,
+      "alpha-value-notation": null
     }
   },
   "dependencies": {
-    "lit": "^2.0.2",
+    "lit": "^3.1.0",
     "rxjs": "^8.0.0-alpha.12"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.4",
-    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.5.2"
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.6.0",
+    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.6.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "f395648f8748ca2496345c5182b1b4dd8a60c662"
+  "gitHead": "c65690b8e735c0607858f3a14a381088721dc807"
 }

package/src/BlockquoteControllerRxjs.js

@@ -4,72 +4,70 @@ const unsubscribe = Symbol('unsubscribe');
 const subscriptions = Symbol('subscriptions');
 
 /**
-![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
-
-`BlockquoteControllerRxjs` is a Reactive Controller.
-
-- Original idea by [Adrian Fâciu](https://github.com/adrianfaciu/rx-lit)
-- [observables-litelement](https://adrianfaciu.dev/posts/observables-litelement/)
-
-`BlockquoteControllerRxjs` provides a subscribe method to which pass the property we want to
-assign values to and the Observable we want to subscribe.
-
-- It works with [reactive properties](https://lit.dev/docs/components/properties/) and no-reactive properties
-- It ignores calls on the same property with the same Observable
-- It unsubscribes from old observable if called again on the same property with different Observable
-- It unsubscribes when the component is removed
-
-## Usage
-
-```js
-class BlockquoteControllerRxjsDemo extends LitElement {
-  static get is() {
-    return 'blockquote-controller-rxjs-demo';
-  }
-
-  static get properties() {
-    return {
-      _pos: {
-        type: Object,
-        attribute: false,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.rx = new BlockquoteControllerRxjs(this);
-    this._pos = { x: 0, y: 0 };
-    this.values$ = fromEvent(window, 'mousemove').pipe(
-      map(({ clientX, clientY }) => ({ x: clientX, y: clientY })),
-    );
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Property and Observable.
-    this.rx.subscribe('_pos', this.values$);
-  }
-
-  render() {
-    return html`
-      <p>The mouse is at:</p>
-      <pre>
-        x: ${this._pos.x}
-        y: ${this._pos.y}
-      </pre
-      >
-    `;
-  }
-}
-```
-
-  ## Exports
-
-  - BlockquoteControllerRxjs
-
-*/
+ * # BlockquoteControllerRxjs
+ *
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
+ *
+ * `BlockquoteControllerRxjs` is a Reactive Controller.
+ *
+ * - Original idea by [Adrian Fâciu](https://github.com/adrianfaciu/rx-lit)
+ * - [observables-litelement](https://adrianfaciu.dev/posts/observables-litelement/)
+ *
+ * `BlockquoteControllerRxjs` provides a subscribe method to which pass the property we want to
+ * assign values to and the Observable we want to subscribe.
+ *
+ * - It works with [reactive properties](https://lit.dev/docs/components/properties/) and non-reactive properties
+ * - It ignores calls on the same property with the same Observable
+ * - It unsubscribes from the old observable if called again on the same property with a different Observable
+ * - It unsubscribes when the component is removed
+ *
+ * ## Usage
+ *
+ * ```js
+ * class BlockquoteControllerRxjsDemo extends LitElement {
+ *   static get is() {
+ *     return 'blockquote-controller-rxjs-demo';
+ *   }
+ *
+ *   static get properties() {
+ *     return {
+ *       _pos: {
+ *         type: Object,
+ *         attribute: false,
+ *       },
+ *     };
+ *   }
+ *
+ *   constructor() {
+ *     super();
+ *     this.rx = new BlockquoteControllerRxjs(this);
+ *     this._pos = { x: 0, y: 0 };
+ *     this.values$ = fromEvent(window, 'mousemove').pipe(
+ *       map(({ clientX, clientY }) => ({ x: clientX, y: clientY })),
+ *     );
+ *   }
+ *
+ *   connectedCallback() {
+ *     super.connectedCallback();
+ *
+ *     // Property and Observable.
+ *     this.rx.subscribe('_pos', this.values$);
+ *   }
+ *
+ *   render() {
+ *     return html`
+ *       <p>The mouse is at:</p>
+ *       <pre>
+ *         x: ${this._pos.x}
+ *         y: ${this._pos.y}
+ *       </pre
+ *       >
+ *     `;
+ *   }
+ * }
+ * ```
+ *
+ */
 export class BlockquoteControllerRxjs {
   constructor(host) {
     this[unsubscribe] = new Subject();
@@ -81,7 +79,9 @@ export class BlockquoteControllerRxjs {
     if (!isObservable(stream$)) {
       throw new Error('Invalid Observable!');
     }
+
     const existingSubscription = this[subscriptions].get(propKey);
+
     if (existingSubscription) {
       if (existingSubscription?.stream$ === stream$) {
         return stream$;
@@ -89,9 +89,7 @@ export class BlockquoteControllerRxjs {
       existingSubscription?.subscription?.unsubscribe();
     }
 
-    // eslint-disable-next-line arrow-parens
     const subscription = stream$.pipe(takeUntil(this[unsubscribe])).subscribe(state => {
-      // eslint-disable-next-line no-unused-expressions
       propKey in this.host && (this.host[propKey] = state);
       this.host.requestUpdate();
     });

package/README.js

@@ -1,72 +0,0 @@
-/**
-# BlockquoteControllerRxjs
-
-![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
-
-`BlockquoteControllerRxjs` is a Reactive Controller.
-
-- Original idea by [Adrian Fâciu](https://github.com/adrianfaciu/rx-lit)
-- [observables-litelement](https://adrianfaciu.dev/posts/observables-litelement/)
-
-`BlockquoteControllerRxjs` provides a subscribe method to which pass the property we want to
-assign values to and the Observable we want to subscribe.
-
-- It works with [reactive properties](https://lit.dev/docs/components/properties/) and no-reactive properties
-- It ignores calls on the same property with the same Observable
-- It unsubscribes from old observable if called again on the same property with different Observable
-- It unsubscribes when the component is removed
-
-## Usage
-
-```js
-class BlockquoteControllerRxjsDemo extends LitElement {
-  static get is() {
-    return 'blockquote-controller-rxjs-demo';
-  }
-
-  static get properties() {
-    return {
-      _pos: {
-        type: Object,
-        attribute: false,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.rx = new BlockquoteControllerRxjs(this);
-    this._pos = { x: 0, y: 0 };
-    this.values$ = fromEvent(window, 'mousemove').pipe(
-      map(({ clientX, clientY }) => ({ x: clientX, y: clientY })),
-    );
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Property and Observable.
-    this.rx.subscribe('_pos', this.values$);
-  }
-
-  render() {
-    return html`
-      <p>The mouse is at:</p>
-      <pre>
-        x: ${this._pos.x}
-        y: ${this._pos.y}
-      </pre
-      >
-    `;
-  }
-}
-```
-
-  ## Exports
-
-  - BlockquoteControllerRxjs
-
-@tagname blockquote-controller-rxjs
-@element blockquote-controller-rxjs
-*/
-export class ReadmElement extends HTMLElement {}