@blockquote-web-components/blockquote-controller-context-meta 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 blockquote-controller-context-meta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
+
+`BlockquoteControllerContextMeta` is a Lit Reactive Controller that encapsulates the controllers provided by @lit/context.
+
+**Features:**
+- It enables a component to serve as both a provider and a consumer.
+- It places the consumer after the first update to reduce the chance of a consumer in LightDOM requesting a context that currently lacks a provider.
+- Create a context object using a global symbol (Symbol.for('my-context')).
+
+<hr>
+
+### Demo
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/blockquote-web-components/tree/main/packages/controllers/blockquote-controller-context-meta)
+
+### Usage
+- [Lit examples context-basics](https://lit.dev/playground/#sample=examples/context-basics)
+```js
+
+import { html, LitElement, css } from 'lit';
+import { BlockquoteControllerContextMeta } from '@blockquote-web-components/blockquote-controller-context-meta';
+
+export class ProviderEl extends LitElement {
+  static styles = css`
+    slot {
+      display: block;
+      border: dashed 4px grey;
+      padding: 0px 10px;
+    }
+
+    :host {
+      display: block;
+      border: solid 4px gainsboro;
+      padding: 2px;
+    }
+
+    h3 {
+      margin-top: 0;
+    }
+  `;
+
+  static properties = {
+    data: {},
+  };
+
+  constructor() {
+    super();
+    this._provider = new BlockquoteControllerContextMeta(this, {
+      context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+    });
+
+    this.data = 'Initial';
+  }
+
+   // `data` will be provided to any consumer that is in the DOM tree below it.
+  set data(value) {
+    this._data = value;
+    this._provider.setValue(value);
+  }
+
+  get data() {
+    return this._data;
+  }
+
+  render() {
+    return html`
+      <h3>Provider's data: <code>${this.data}</code></h3>
+      <slot></slot>
+    `;
+  }
+}
+customElements.define('provider-el', ProviderEl);
+
+export class ConsumerEl extends LitElement {
+  _consumer = new BlockquoteControllerContextMeta(this, {
+    context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+    callback: (v) => {
+      this.setAttribute('data-callback', v);
+    },
+  });
+
+
+  // `providedData` will be populated by the first ancestor element which
+  // provides a value for `context`.
+
+  get providedData() {
+    return this._consumer.value;
+  }
+
+  render() {
+    return html`<h3>Consumer data: <code>${this.providedData}</code></h3>
+      <hr />
+      <slot></slot>`;
+  }
+}
+customElements.define('consumer-el', ConsumerEl);
+```
+
+ <hr>
+
+
+### `src/BlockquoteControllerContextMeta.js`:
+
+#### class: `ContextMeta`
+
+##### Fields
+
+| Name                   | Privacy | Type | Default                                                                                                    | Description | Inherited From |
+| ---------------------- | ------- | ---- | ---------------------------------------------------------------------------------------------------------- | ----------- | -------------- |
+| `value`                |         |      |                                                                                                            |             |                |
+| `context`              |         |      |                                                                                                            |             |                |
+| `initialValue`         |         |      | `initialValue`                                                                                             |             |                |
+| `callback`             |         |      | `callback`                                                                                                 |             |                |
+| `host`                 |         |      | `host`                                                                                                     |             |                |
+| `_contextMetaProvider` |         |      | `new ContextProvider(this.host, {      context: this.context,      initialValue: this.initialValue,    })` |             |                |
+
+##### Methods
+
+| Name            | Privacy | Description | Parameters | Return | Inherited From |
+| --------------- | ------- | ----------- | ---------- | ------ | -------------- |
+| `setValue`      |         |             | `v, force` |        |                |
+| `hostConnected` |         |             |            |        |                |
+
+<hr/>
+
+#### Exports
+
+| Kind | Name                              | Declaration | Module                                 | Package |
+| ---- | --------------------------------- | ----------- | -------------------------------------- | ------- |
+| `js` | `BlockquoteControllerContextMeta` | ContextMeta | src/BlockquoteControllerContextMeta.js |         |
+
+### `src/index.js`:
+
+#### Exports
+
+| Kind | Name                              | Declaration                     | Module                               | Package |
+| ---- | --------------------------------- | ------------------------------- | ------------------------------------ | ------- |
+| `js` | `BlockquoteControllerContextMeta` | BlockquoteControllerContextMeta | ./BlockquoteControllerContextMeta.js |         |

package/package.json

@@ -0,0 +1,157 @@
+{
+  "name": "@blockquote-web-components/blockquote-controller-context-meta",
+  "version": "1.0.0",
+  "description": "Webcomponent blockquote-controller-context-meta following open-wc recommendations",
+  "keywords": [
+    "lit",
+    "web-component",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "blockquote-controller-context-meta",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./src/index.js"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./src/BlockquoteControllerContextMeta.js": {
+      "default": "./src/BlockquoteControllerContextMeta.js"
+    },
+    "./index.js": {
+      "default": "./src/index.js"
+    }
+  },
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "files": [
+    "/define/",
+    "/src/",
+    "index.js",
+    "!/**/*.scss"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement --globs \"{src,define}/**/*.{js,ts}\" \"index.js\"",
+    "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}\" --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}\" --check --ignore-path .eslintignore",
+    "lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .eslintignore",
+    "prepare": "husky",
+    "preview:vite": "vite preview",
+    "sass:watch": "sass-style-template",
+    "sort:package": "npx sort-package-json",
+    "start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
+    "test": "wtr",
+    "test:watch": "wtr --watch",
+    "vite": "vite"
+  },
+  "lint-staged": {
+    "**/*.{js,ts,html}": [
+      "npm run format:eslint"
+    ],
+    "**/*.{js,ts,json,html}": [
+      "npm run format:prettier"
+    ],
+    "**/*.{scss,css}": [
+      "npm run format:stylelint"
+    ]
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "overrides": [
+      {
+        "files": "*.{scss,css}",
+        "options": {
+          "printWidth": 280,
+          "singleQuote": false
+        }
+      }
+    ]
+  },
+  "eslintConfig": {
+    "parserOptions": {
+      "ecmaVersion": "latest"
+    },
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "rules": {
+      "class-methods-use-this": "off",
+      "indent": [
+        "error",
+        2,
+        {
+          "SwitchCase": 1,
+          "ignoredNodes": [
+            "PropertyDefinition",
+            "TemplateLiteral > CallExpression"
+          ]
+        }
+      ],
+      "no-unused-expressions": [
+        "error",
+        {
+          "allowShortCircuit": true,
+          "allowTernary": true
+        }
+      ],
+      "object-curly-newline": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ],
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          "devDependencies": [
+            "**/test/**/*.{js,ts}",
+            "**/*.config.{js,ts,mjs,cjs}",
+            "**/*.conf.{js,ts,mjs,cjs}"
+          ]
+        }
+      ],
+      "import/no-unresolved": "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,
+      "no-duplicate-selectors": null,
+      "color-function-notation": null,
+      "alpha-value-notation": null
+    }
+  },
+  "dependencies": {
+    "@lit/context": "^1.1.0",
+    "lit": "^3.1.2"
+  },
+  "devDependencies": {
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.8.0",
+    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.10.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "51af18a7ff99ffb40cc02b5363ba04f11d058c60"
+}

package/src/BlockquoteControllerContextMeta.d.ts

@@ -0,0 +1,32 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Context, ContextType } from '@lit/context';
+
+declare class ContextMeta<
+  TMeta extends Context<unknown, unknown>,
+  HostElement extends ReactiveControllerHost & HTMLElement,
+> implements ReactiveController
+{
+  private host;
+  private context;
+  private initialValue?;
+  private callback?;
+  private _contextMetaProvider;
+  private _contextMetaConsumer;
+  constructor(
+    host: HostElement,
+    {
+      context,
+      initialValue,
+      callback,
+    }: {
+      context: string;
+      initialValue?: ContextType<TMeta>;
+      callback?: (v: ContextType<TMeta>, dispose?: () => void) => void;
+    },
+  );
+  get value(): ContextType<TMeta> | undefined;
+  setValue(v: ContextType<TMeta>, force?: boolean): void;
+  hostConnected(): Promise<void>;
+}
+
+export { ContextMeta as BlockquoteControllerContextMeta };

package/src/BlockquoteControllerContextMeta.js

@@ -0,0 +1,144 @@
+import { createContext, ContextProvider, ContextConsumer } from '@lit/context';
+
+/**
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
+ *
+ * `BlockquoteControllerContextMeta` is a Lit Reactive Controller that encapsulates the controllers provided by @lit/context.
+ *
+ * **Features:**
+ * - It enables a component to serve as both a provider and a consumer.
+ * - It places the consumer after the first update to reduce the chance of a consumer in LightDOM requesting a context that currently lacks a provider.
+ * - Create a context object using a global symbol (Symbol.for('my-context')).
+ *
+ * <hr>
+ *
+ * ### Demo
+ *
+ * [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/blockquote-web-components/tree/main/packages/controllers/blockquote-controller-context-meta)
+ *
+ * ### Usage
+ * - [Lit examples context-basics](https://lit.dev/playground/#sample=examples/context-basics)
+ * ```js
+ *
+ * import { html, LitElement, css } from 'lit';
+ * import { BlockquoteControllerContextMeta } from '@blockquote-web-components/blockquote-controller-context-meta';
+ *
+ * export class ProviderEl extends LitElement {
+ *   static styles = css`
+ *     slot {
+ *       display: block;
+ *       border: dashed 4px grey;
+ *       padding: 0px 10px;
+ *     }
+ *
+ *     :host {
+ *       display: block;
+ *       border: solid 4px gainsboro;
+ *       padding: 2px;
+ *     }
+ *
+ *     h3 {
+ *       margin-top: 0;
+ *     }
+ *   `;
+ *
+ *   static properties = {
+ *     data: {},
+ *   };
+ *
+ *   constructor() {
+ *     super();
+ *     this._provider = new BlockquoteControllerContextMeta(this, {
+ *       context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+ *     });
+ *
+ *     this.data = 'Initial';
+ *   }
+ *
+ *    // `data` will be provided to any consumer that is in the DOM tree below it.
+ *   set data(value) {
+ *     this._data = value;
+ *     this._provider.setValue(value);
+ *   }
+ *
+ *   get data() {
+ *     return this._data;
+ *   }
+ *
+ *   render() {
+ *     return html`
+ *       <h3>Provider's data: <code>${this.data}</code></h3>
+ *       <slot></slot>
+ *     `;
+ *   }
+ * }
+ * customElements.define('provider-el', ProviderEl);
+ *
+ * export class ConsumerEl extends LitElement {
+ *   _consumer = new BlockquoteControllerContextMeta(this, {
+ *     context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+ *     callback: (v) => {
+ *       this.setAttribute('data-callback', v);
+ *     },
+ *   });
+ *
+ *
+ *   // `providedData` will be populated by the first ancestor element which
+ *   // provides a value for `context`.
+ *
+ *   get providedData() {
+ *     return this._consumer.value;
+ *   }
+ *
+ *   render() {
+ *     return html`<h3>Consumer data: <code>${this.providedData}</code></h3>
+ *       <hr />
+ *       <slot></slot>`;
+ *   }
+ * }
+ * customElements.define('consumer-el', ConsumerEl);
+ * ```
+ *
+ *  <hr>
+ */
+class ContextMeta {
+  /**
+   * @param {import('lit').ReactiveElement} host - The host object.
+   * @param {{
+   *   context: string,
+   *   initialValue?: import('@lit/context').ContextType<*>,
+   *   callback?: (value: import('@lit/context').ContextType<*>, dispose?: () => void) => void
+   * }} arg - The arguments for the constructor.
+   */
+  constructor(host, { context, initialValue, callback }) {
+    this.context = createContext(Symbol.for(context));
+    this.initialValue = initialValue;
+    this.callback = callback;
+    this.host = host;
+
+    this._contextMetaProvider = new ContextProvider(this.host, {
+      context: this.context,
+      initialValue: this.initialValue,
+    });
+
+    this.host.addController?.(this);
+  }
+
+  get value() {
+    return this._contextMetaConsumer?.value;
+  }
+
+  setValue(v, force = false) {
+    this._contextMetaProvider?.setValue?.(v, force);
+  }
+
+  async hostConnected() {
+    await this.host.updateComplete;
+    this._contextMetaConsumer = new ContextConsumer(this.host, {
+      context: this.context,
+      subscribe: true,
+      callback: this.callback,
+    });
+  }
+}
+export { ContextMeta as BlockquoteControllerContextMeta };

package/src/index.js

@@ -0,0 +1 @@
+export { BlockquoteControllerContextMeta } from './BlockquoteControllerContextMeta.js';