@blockquote-web-components/blockquote-controller-rxjs 1.0.5 → 1.0.6

package/README.js

@@ -0,0 +1,72 @@
+/**
+# 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 {}

package/README.md

@@ -1,8 +1,10 @@
+# blockquote-controller-rxjs
+
 # BlockquoteControllerRxjs
 
 ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
 
-`BlockquoteControllerRxjs` is a [Reactive Controller](https://lit.dev/docs/composition/controllers/#content)
+`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/)
@@ -19,45 +21,45 @@ assign values to and the Observable we want to subscribe.
 
 ```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
+    >
+  `;
+}
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-controller-rxjs",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Webcomponent blockquote-controller-rxjs following open-wc recommendations",
   "keywords": [
     "lit",
@@ -19,17 +19,17 @@
   ],
   "scripts": {
     "analyze": "cem analyze --litelement --globs \"{src,define}/**/*.{js,ts}\" \"index.js\"",
-    "analyze:doc": "npm run analyze && npx web-component-analyzer \"{src,define}/**/*.{js,ts}\" \"index.js\" --outFile README.md",
+    "analyze:doc": "npm run analyze && npx web-component-analyzer \"{src,define}/**/*.{js,ts}\" \"index.js\" \"README.js\" --outFile README.md",
     "build": "echo \"This is not a TypeScript project, so no need to build.\"",
     "dev:vite": "vite build",
     "format": "npm run format:eslint && npm run format:prettier && npm run format:stylelint",
     "format:eslint": "eslint \"**/*.{js,ts,html}\" --fix --ignore-path .eslintignore",
-    "format:prettier": "prettier \"**/*.{js,ts,json,html,md}\" --write --ignore-path .eslintignore",
+    "format:prettier": "prettier \"**/*.{js,ts,json,html}\" --write --ignore-path .eslintignore",
     "format:stylelint": "stylelint \"**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .eslintignore",
     "postinstall": "npm run sort:package",
     "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:stylelint",
     "lint:eslint": "eslint \"**/*.{js,ts,html}\" --ignore-path .eslintignore",
-    "lint:prettier": "prettier \"**/*.{js,ts,json,html,md}\" --check --ignore-path .eslintignore",
+    "lint:prettier": "prettier \"**/*.{js,ts,json,html}\" --check --ignore-path .eslintignore",
     "lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .eslintignore",
     "preview:vite": "vite preview",
     "sass:watch": "sass-style-template",
@@ -50,7 +50,7 @@
     "**/*.{js,ts,html}": [
       "npm run format:eslint"
     ],
-    "**/*.{js,ts,json,html,md}": [
+    "**/*.{js,ts,json,html}": [
       "npm run format:prettier"
     ],
     "**/*.{scss,css}": [
@@ -118,11 +118,11 @@
     "rxjs": "^7.5.5"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.2.0"
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.2.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "e2be6111c893d804ac8212f350152c69ba6cfb98"
+  "gitHead": "f0d88eaef7c6b48711470dd2ff5c7c3eb554e0ec"
 }

package/src/BlockquoteControllerRxjs.js

@@ -5,8 +5,6 @@ const unsubscribe = Symbol('unsubscribe');
 const subscriptions = Symbol('subscriptions');
 
 /**
-# BlockquoteControllerRxjs
-
 ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
 
 `BlockquoteControllerRxjs` is a Reactive Controller.