@brightspace-ui/labs 2.9.1 → 2.10.0

package/package.json

@@ -39,7 +39,9 @@
     "./components/wizard-step.js": "./src/components/wizard/step.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
-    "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
+    "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js",
+    "./utilities/pub-sub.js": "./src/utilities/pub-sub/pub-sub.js",
+    "./utilities/reactive-store.js": "./src/utilities/reactive-store/reactive-store.js"
   },
   "scripts": {
     "langs:sync": "mfv add-missing && mfv remove-extraneous",
@@ -74,7 +76,8 @@
   },
   "dependencies": {
     "@brightspace-ui/core": "^3",
+    "@lit/context": "^1.1.3",
     "lit": "^3"
   },
-  "version": "2.9.1"
+  "version": "2.10.0"
 }

package/src/utilities/pub-sub/README.md

@@ -0,0 +1,76 @@
+# PubSub
+
+A simple class implementation of the publish-subscribe model.
+
+## Simple Example
+
+```js
+import PubSub from '@brightspace-ui/labs/utilites/pub-sub.js';
+
+// Instantiate the PubSub class
+const myPubSub = new PubSub();
+
+// Register subscribers
+const subscriber1 = (message) => console.log('Subscriber 1 received: ', message);
+const subscriber2 = (message) => console.log('Subscriber 2 received: ', message);
+myPubSub.subscribe(subscriber1);
+myPubSub.subscribe(subscriber2);
+
+// Publish messages to subscribers
+myPubSub.publish('Hello!');
+// Console: Subscriber 1 received: Hello!
+// Console: Subscriber 2 received: Hello!
+
+// Unsubscribe
+myPubSub.unsubscribe(subscriber1);
+myPubSub.unsubscribe(subscriber2);
+```
+
+## Instance Methods
+
+### Constructor
+
+The constructor takes no arguments.
+
+### `clear()`
+
+The `clear` method unsubscribes all subscribed callback functions. Subscriber callback functions are not called at this time, just removed.
+
+This method accepts no arguments and returns no values.
+
+### `publish(...args)`
+
+The `publish` method is used to publish messages/data to all subscribed callbacks. All subscribed callback functions are called in subscription order with the same arguments passed to `publish`.
+
+| Parameter Name | Type | Description | Required |
+|---|---|---|---|
+| `...args` | Any | The arguments to be passed to subscriber callback functions when called. | No |
+
+`publish` returns no values.
+
+### `subscribe(callback, initialize = false)`
+
+The `subscribe` method is used to subscribe a callback function for future published messages.
+
+If the callback being subscribed is already subscribed, nothing will change and it will still only be called once when messages are published.
+
+By default, a subscribed callback function won't be called until a message is published, but if the `initialize` argument is set to `true` and the `PubSub` instance has published at least once, then the callback function will be immediately called after subscription with the last published arguments.
+
+| Parameter Name | Type | Description | Required | Default Value |
+|---|---|---|---|---|
+| `callback` | Function | The callback function to be called when messages are published. | True | |
+| `initialize` | Boolean | Whether or not to immedately call the callback function with the last published values. | False | `false` |
+
+`subscribe` returns no values.
+
+### `unsubscribe(callback)`
+
+The `unsubscribe` method is used to remove a callback function from the collection of subscribers so it no longer receives future published messages.
+
+If the callback function passed in does not match a currently subscribed function, nothing happens.
+
+| Parameter Name | Type | Description | Required |
+|---|---|---|---|
+| `callback` | Function | The callback function to remove from the subscribers. | True |
+
+`unsubscribe` returns no values.

package/src/utilities/pub-sub/pub-sub.js

@@ -0,0 +1,33 @@
+/*
+	A simple pub-sub implementation. It allows for subscribing to the class and publishing to all subscribers.
+*/
+export default class PubSub {
+	constructor() {
+		this._subscribers = new Map();
+		this._hasTriggered = false;
+		this._previousArgs = [];
+	}
+
+	clear() {
+		this._subscribers.clear();
+	}
+
+	publish(...args) {
+		this._subscribers.forEach(callback => callback(...args));
+		this._hasTriggered = true;
+		this._previousArgs = args;
+	}
+
+	// If initialize is true and publish has been called at least once, the callback will be called
+	// immediately with the last published arguments.
+	subscribe(callback, initialize = false) {
+		this._subscribers.set(callback, callback);
+		if (this._hasTriggered && initialize) {
+			callback(...this._previousArgs);
+		}
+	}
+
+	unsubscribe(callback) {
+		this._subscribers.delete(callback);
+	}
+}

package/src/utilities/reactive-store/README.md

@@ -0,0 +1,444 @@
+# ReactiveStore
+
+A simple data store that will automatically notify subscribers when any of its properties changes.
+
+It's designed to work as a state store for Lit based apps and mimics Lit's component class API.
+
+## Usage Examples
+
+### Basic Usage
+
+First, define and instantiate your own Reactive Store:
+
+```js
+// my-store.js
+
+import ReactiveStore from '@brightspace-ui/labs/utilites/reactive-store.js';
+
+// Define your store with its reactive properties
+class MyStore extends ReactiveStore {
+	static get properties() {
+		return {
+			foo: { type: Number },
+		};
+	}
+
+	constructor() {
+		super();
+
+		this.foo = 0;
+	}
+}
+
+// Create an instance of your store
+const myStore = new MyStore();
+
+// Create and export a consumer class
+export const MyStoreConsumer = myStore.createConsumer();
+```
+
+Then, connect to your store from any Lit component using the consumer:
+
+```js
+// my-component.js
+
+import { MyStoreConsumer } from './my-store.js';
+
+class MyComponent extends LitElement {
+	constructor() {
+		super();
+
+		// Connect to the store by instantiating the consumer.
+		// This will automatically notify your component of changes to the store properties.
+		this.myStoreConsumer = new MyStoreConsumer(this);
+	}
+
+	render() {
+		// The consumer will have all the same properties defined in your store.
+		return html`
+			<div>Foo: ${this.myStoreConsumer.foo}</div>
+			<button @click=${this._click}>Update foo</button>
+		`;
+	}
+
+	_click() {
+		// Updating the values from the consumer will update the store, which will then
+		// notify all consumers of the changes and trigger component updates.
+		this.myStoreConsumer.foo += 1;
+	}
+}
+
+customElements.define('my-component', MyComponent);
+```
+
+### Context Example
+
+If you want to create a store that's tied to a branch of your DOM tree instead of being shared globally, you can generate a pair of Context Provider/Consumer reactive controllers.
+
+Like the basic usage example, you'll first define and instantiate your own Reactive Store, but instead of instantiating the store and creating a consumer for it, you'll create a Context Provider/Consumer pair for it:
+
+```js
+// my-store.js
+
+import ReactiveStore from '@brightspace-ui/labs/utilites/reactive-store.js';
+
+// Define your store with its reactive properties
+class MyStore extends ReactiveStore {
+	static get properties() {
+		return {
+			foo: { type: Number },
+		};
+	}
+
+	constructor() {
+		super();
+
+		this.foo = 0;
+	}
+}
+
+// Generate and export the Context Provider/Consumer pair for your store
+const {
+	Provider: MyStoreContextProvider,
+	Consumer: MyStoreContextConsumer
+} = MyStore.createContextControllers();
+export { MyStoreContextProvider, MyStoreContextConsumer };
+```
+
+Then, instantiate the provider within the component you want to provide the store from:
+
+```js
+// my-component.js
+
+import { MyStoreContextProvider } from './my-store.js';
+
+class MyComponent extends LitElement {
+	constructor() {
+		super();
+
+		// Instantiate the provider here to provide an instance of your store to all descendants of
+		// this component.
+		// Note: This creates a new instance of your store by default, but it's possible to pass a
+		// pre-existing instance to the constructor instead.
+		this.myStoreProvider = new MyStoreContextProvider(this);
+	}
+
+	render() {
+		// The provider will have all the same properties defined in your store, so you can
+		// access your store data from the provider if you wish.
+		return html`
+			<div>Foo: ${this.myStoreProvider.foo}</div>
+			<button @click=${this._click}>Update foo</button>
+			<my-descendant-component></my-descendant-component>
+		`;
+	}
+
+	_click() {
+		// Updating the values from the provider will update the store, which will then
+		// notify all consumers of the changes and trigger component updates.
+		this.myStoreProvider.foo += 1;
+	}
+}
+
+customElements.define('my-component', MyComponent);
+```
+
+Finally, any component that is descended from the component with the store provider can connect to the store by using your store's Context Consumer:
+
+```js
+// my-descendant-component.js
+
+import { MyStoreContextConsumer } from './my-store.js';
+
+class MyDescendantComponent extends LitElement {
+	constructor() {
+		super();
+
+		// Connect to the store by instantiating the context consumer.
+		// This will automatically notify your component of changes to the store properties.
+		this.myStoreConsumer = new MyStoreContextConsumer(this);
+	}
+
+	render() {
+		// The consumer will have all the same properties defined in your store.
+		return html`
+			<div>Foo: ${this.myStoreConsumer.foo}</div>
+			<button @click=${this._click}>Update foo</button>
+		`;
+	}
+
+	_click() {
+		// Updating the values from the consumer will update the store, which will then
+		// notify all consumers of the changes and trigger component updates for all consumers and
+		// the provider as well.
+		this.myStoreConsumer.foo += 1;
+	}
+}
+
+customElements.define('my-descendant-component', MyDescendantComponent);
+```
+
+### Non-Lit Example
+
+While the `ReactiveStore` was designed with Lit components in mind, there may be situations where you want to connect something other than a Lit component to a store. For such scenarios, the `ReactiveStore` provides a pair of `subscribe`/`unsubscribe` methods.
+
+Similar to other uses, you'll first define and instantiate your own Reactive Store:
+
+```js
+// my-store.js
+
+import ReactiveStore from '@brightspace-ui/labs/utilites/reactive-store.js';
+
+// Define your store with its reactive properties
+class MyStore extends ReactiveStore {
+	static get properties() {
+		return {
+			foo: { type: Number },
+		};
+	}
+
+	constructor() {
+		super();
+
+		this.foo = 0;
+	}
+}
+
+// Create and export an instance of your store
+export const myStore = new MyStore();
+```
+
+Then, you can subscribe a callback directly to the store from anywhere and that callback will be called whenever a store property changes, just don't forget to unsubscribe your callback when you no longer need it:
+
+```js
+import { myStore } from './my-store.js';
+
+// Define and subscribe a callback function
+function handlePropertyChange({ property, value, prevValue }) {
+	console.log(`The "${property}" property changed from ${prevValue} to ${value}`);
+}
+myStore.subscribe(handlePropertyChange);
+
+// When a store property is changed, any subscribed callback functions will be invoked synchronously
+myStore.foo += 1; // console: The "foo" property changed from 0 to 1
+
+// Unsubscribe your callback function when you no longer want to receive store updates
+myStore.unsubscribe(handlePropertyChange);
+```
+
+# API
+
+## The `ReactiveStore` class
+
+The `ReactiveStore` class is an abstract class that can be extended to define your own store.
+
+### Static Properties
+
+#### `properties`
+
+This static propery must be created by the extending class. This property must be an object where each key represents a reactive property to be added to the extending store. The value for each of the property keys must be an object representing the property options.
+
+The available property options are as follows:
+
+| Option | Type | Description | Required | Default Value |
+|---|---|---|---|---|
+| `hasChanged(oldValue, newValue)` | Function | This comparison function is called when the store property is set. It is called with both the previous value and the new value to be set. If the function returns `true`, the store will notify all consumers of the value change. | False | `(oldValue, newValue) => oldValue !== newValue` |
+
+### Static Methods
+
+#### `createContextControllers()`
+
+This static method is used to generate a Provider/Consumer pair of Reactive Controllers. These controllers can be used to provide a store to Lit components through the use of [Context](https://lit.dev/docs/data/context/).
+
+This method should never be called on the `ReactiveStore` class directly, instead it should be called on the extending class.
+
+Calling this method on the extending class returns an object with the following properties:
+
+| Property | Type | Description |
+|---|---|---|
+| `Provider` | class | A Reactive Controller responsible for providing the store instance to any descendant components that instantiate the Consumer class. |
+| `Consumer` | class | A Reactive Controller that connects the hosting component to the store provided by the ancestor component that instantiated the Provider class. |
+
+### Instance Properties
+
+#### The Reactive `properties`
+
+Each of the reactive properties defined in the static `properties` object will have a getter and setter generated at object construction time.
+
+Any time the property value is updated, the generated setter will check if the property has changed from its previous value. If the property has changed, it will update it and call all subscriber callback functions that have been registered with the store.
+
+Note that since this is a setter, the value of the property itself must be changed for subscribers to be notified of the change. If you change a nested value of the property, the store will not detect that change. If you wish to manually trigger an update notification after changing a nested property, you can call the `forceUpdate()` instance method.
+
+### Instance Methods
+
+#### `constructor()`
+
+The store constructor. Make sure to call `super()` when overriding.
+
+The reactive property accessors are dynamically generated in the constructor.
+
+#### `createConsumer()`
+
+This method can be used on any store instance (i.e. an instance of a class that extends the `ReactiveStore`). When called, it generates and returns a Reactive Controller consumer class that can be used to connect a Lit component to the store instance.
+
+#### `forceUpdate()`
+
+This method can be used on any store instance (i.e. an instance of a class that extends the `ReactiveStore`). When called, it notifies all subscribers that a value within the store has changed without specifying which one.
+
+This method should not be needed in most scenarios since changes to the reactive properties should be the primary way to send update notifications to subscribers. However, this method can be used in cases where a deeply nested property of one the reactive properties has been changed and you wish to notify subscribers that the store has changed.
+
+#### `subscribe(callback)`
+
+This method can be used on any store instance (i.e. an instance of a class that extends the `ReactiveStore`). This method is used to subscribe a callback function for future store update notifications.
+
+If the callback being subscribed is already subscribed, nothing will change and it will still only be called once when the store updates.
+
+| Parameter Name | Type | Description | Required |
+|---|---|---|---|
+| `callback` | Function | The callback function to be called when the store is updated. | True |
+
+The callback function itself is called with an object as it's first and only parameter. The object contains the following properties:
+
+| Property Name | Type | Description |
+|---|---|---|
+| `property` | String | The name of the property that was changed. Will be `undefined` if this update was triggered by a `forceUpdate()` call. |
+| `value` | Any | The new value of the changed property. Will be `undefined` if this update was triggered by a `forceUpdate()` call. |
+| `prevValue` | Any | The previous value of the changed property. Will be `undefined` if this update was triggered by a `forceUpdate()` call. |
+| `forceUpdate` | Boolean | Is `true` if this update was triggered by a `forceUpdate()` call. It will be `false` otherwise |
+
+`subscribe` returns no values.
+
+#### `unsubscribe(callback)`
+
+This method can be used on any store instance (i.e. an instance of a class that extends the `ReactiveStore`). This method is used to remove a callback function from the collection of subscribers so it no longer receives future store update notifications.
+
+If the callback function passed in does not match a currently subscribed function, nothing happens.
+
+| Parameter Name | Type | Description | Required |
+|---|---|---|---|
+| `callback` | Function | The callback function to remove from the subscribers. | True |
+
+`unsubscribe` returns no values.
+
+## The store Consumer class
+
+This is the class that is returned by the `createConsumer()` instance method on an instance of the store.
+
+This class is a [Lit Reactive Controller](https://lit.dev/docs/composition/controllers/) that when instantiated can be used by a Lit component to connect to the originating store instance.
+
+Any Consumer class instances will have access to all the same properties that the originating store does and will automatically trigger the update cycle on the host component whenever a property of the store changes.
+
+### Instance Properties
+
+#### The Reactive `properties`
+
+Just like the store has a set of properties dynamically generated, the Consumer class will have the same property accessors generated at construction time. The Consumer's properties will be directly connected to the corresponding properties on the originating store instance, so they can be used as if connecting to the store directly.
+
+Setting any of these properties will call the corresponding setter on the originating store, and since the store notifies all consumers of changes, all consumers will then trigger the update cycle for their respective host components.
+
+#### `changedProperties`
+
+Each Consumer instance has a `changedProperties` Map that keeps track of which reactive properties of the store have changed since the end of the host component's last update cycle.
+
+Each key of the map represents a reactive property of the store that has changed since the last update cycle of the host Lit component and the corresponding value will be the previous value of that reactive property.
+
+This map serves a similar function to the `changedProperties` map that [Lit provides](https://lit.dev/docs/components/lifecycle/#changed-properties) as an argument to lifecycle methods like `shouldUpdate` and `willUpdate`.
+
+Note that `changedProperties` is unique for each instance of the Consumer class and is explicitly tied to the hosting component's update cycle.
+
+### Instance Methods
+
+#### `constructor(host)`
+
+The constructor for the Consumer class accepts the following parameters:
+
+| Parameter Name | Type | Description | Required |
+|---|---|---|---|
+| `host` | LitElement | The host Lit element that the Consumer is to be connected to. | True |
+
+#### `forceUpdate()`
+
+This method can be used to call the originating store's own `forceUpdate()` method, which will trigger an update for all consumer host components. See the store's `forceUpdate()` definition for additional details.
+
+## The context `Provider` class
+
+The context `Provider` class is one of the two [Lit Reactive Controllers](https://lit.dev/docs/composition/controllers/) returned by the `createContextControllers()` static method. The context `Consumer` class is the other controller returned and both of these act as a pair. Both of these controllers also have ther functionality tied to the specific store class you used to generate them.
+
+The context `Provider` controller can be used to provide an instance of your store to a portion of your DOM tree. This is done by instantiating it and connecting it to a host Lit component. Once connected, all descendants of the host component will be able to connect to the provided store by using the corresponding `Consumer` controller.
+
+This class is based on (and internally uses) the `ContextProvider` class from Lit's [Context](https://lit.dev/docs/data/context/) library.
+
+### Instance Properties
+
+#### The Reactive `properties`
+
+Just like the store has a set of properties dynamically generated, the context `Provider` class will have the same property accessors generated at construction time. The `Provider`'s properties will be directly connected to the corresponding properties on the store instance that it provides, so they can be used as if connecting to the store directly.
+
+Setting any of these properties will call the corresponding setter on the provided store and the Provider will trigger a corresponding lifecycle update for its hosting component. Any context `Consumer` instances that are descendants of the `Provider` will also trigger the lifecycle update for their corresponding hosting components.
+
+#### `changedProperties`
+
+Each context `Provider` instance has a `changedProperties` Map that keeps track of which reactive properties of the provided store have changed since the end of the host component's last update cycle.
+
+Each key of the map represents a reactive property of the provided store that has changed since the last update cycle of the host Lit component and the corresponding value will be the previous value of that reactive property.
+
+This map serves a similar function to the `changedProperties` map that [Lit provides](https://lit.dev/docs/components/lifecycle/#changed-properties) as an argument to lifecycle methods like `shouldUpdate` and `willUpdate`.
+
+Note that `changedProperties` is unique for each instance of the `Provider` class and is explicitly tied to the hosting component's update cycle.
+
+### Instance Methods
+
+#### `constructor(host, store = new StoreClass())`
+
+The constructor for the context `Provider` class accepts the following parameters:
+
+| Parameter Name | Type | Description | Required | Default Value |
+|---|---|---|---|---|
+| `host` | LitElement instance | The host Lit element that the `Provider` is to be connected to. | True | |
+| `store` | ReactiveStore instance | The instance of your store that you wish to provide to descendant context `Consumer` classes. Note that if no store instance is passed to this parameter, an instance of your store will be instantiated to be used. | True | `new StoreClass()` |
+
+#### `forceUpdate()`
+
+This method can be used to call the provided store's own `forceUpdate()` method, which will trigger an update for the `Provider`'s host component as well as all context `Consumer` host components. See the store's `forceUpdate()` definition for additional details.
+
+## The context `Consumer` class
+
+The context `Consumer` class is one of the two [Lit Reactive Controllers](https://lit.dev/docs/composition/controllers/) returned by the `createContextControllers()` static method. The context `Provider` class is the other controller returned and both of these act as a pair. Both of these controllers also have ther functionality tied to the specific store class you used to generate them.
+
+> Note: This class is separate from the store Consumer class provided by calling a store instance's `createConsumer()`.
+
+The context `Consumer` controller can be used to connect to a context `Provider` class that has been instantiated and connected to an ancestor in the DOM tree. This is done by instantiating it and connecting it to a host Lit component.
+
+This class is based on (and internally uses) the `ContextConsumer` class from Lit's [Context](https://lit.dev/docs/data/context/) library.
+
+### Instance Properties
+
+#### The Reactive `properties`
+
+Just like the store has a set of properties dynamically generated, the context `Consumer` class will have the same property accessors generated at construction time. The `Consumer`'s properties will be directly connected to the corresponding properties on the store instance that it receives from the context `Provider` ancestor, so they can be used as if connecting to the store directly.
+
+Setting any of these properties will call the corresponding setter on the provided store and the `Provider` will trigger a corresponding lifecycle update for its hosting component. Any context `Consumer` instances (including this one) that are descendants of that `Provider` will also trigger the lifecycle update for their corresponding hosting components.
+
+#### `changedProperties`
+
+Each context `Consumer` instance has a `changedProperties` Map that keeps track of which reactive properties of the provided store have changed since the end of the host component's last update cycle.
+
+Each key of the map represents a reactive property of the provided store that has changed since the last update cycle of the host Lit component and the corresponding value will be the previous value of that reactive property.
+
+This map serves a similar function to the `changedProperties` map that [Lit provides](https://lit.dev/docs/components/lifecycle/#changed-properties) as an argument to lifecycle methods like `shouldUpdate` and `willUpdate`.
+
+Note that `changedProperties` is unique for each instance of the context `Consumer` class and is explicitly tied to the hosting component's update cycle.
+
+### Instance Methods
+
+#### `constructor(host)`
+
+The constructor for the context `Consumer` class accepts the following parameters:
+
+| Parameter Name | Type | Description | Required |
+|---|---|---|---|
+| `host` | LitElement instance | The host Lit element that the `Consumer` is to be connected to. | True |
+
+#### `forceUpdate()`
+
+This method can be used to call the provided store's own `forceUpdate()` method, which will trigger an update for the `Provider`'s host component as well as all context `Consumer` host components. See the store's `forceUpdate()` definition for additional details.

package/src/utilities/reactive-store/context-controllers.js

@@ -0,0 +1,87 @@
+import {
+	createContext,
+	ContextConsumer as LitContextConsumer,
+	ContextProvider as LitContextProvider
+} from '@lit/context';
+import StoreConsumer from './store-consumer.js';
+
+export class ContextProvider {
+	constructor(host, StoreClass, store = new StoreClass()) {
+		const { properties } = StoreClass;
+		this._storeConsumer = new StoreConsumer(host, store, properties);
+		this._provider = new LitContextProvider(host, {
+			context: createContext(StoreClass),
+			initialValue: store,
+		});
+		this._defineProperties(properties);
+	}
+
+	get changedProperties() {
+		return this._storeConsumer.changedProperties;
+	}
+
+	forceUpdate() {
+		this._storeConsumer.forceUpdate();
+	}
+
+	_defineProperties(properties) {
+		Object.keys(properties).forEach((property) => {
+			Object.defineProperty(this, property, {
+				get() {
+					return this._storeConsumer[property];
+				},
+				set(value) {
+					this._storeConsumer[property] = value;
+				}
+			});
+		});
+	}
+}
+export class ContextConsumer {
+	constructor(host, StoreClass) {
+		const { properties } = StoreClass;
+		this._contextConsumer = new LitContextConsumer(host, {
+			context: createContext(StoreClass),
+			callback: (store) => {
+				this._storeConsumer = new StoreConsumer(host, store, properties);
+				this._defineProperties(properties);
+			},
+		});
+	}
+
+	get changedProperties() {
+		return this._storeConsumer?.changedProperties;
+	}
+
+	forceUpdate() {
+		this._storeConsumer.forceUpdate();
+	}
+
+	_defineProperties(properties) {
+		Object.keys(properties).forEach((property) => {
+			Object.defineProperty(this, property, {
+				get() {
+					return this._storeConsumer[property];
+				},
+				set(value) {
+					this._storeConsumer[property] = value;
+				}
+			});
+		});
+	}
+}
+
+export function createContextControllers(StoreClass) {
+	return {
+		Provider: class extends ContextProvider {
+			constructor(host, store = new StoreClass()) {
+				super(host, StoreClass, store);
+			}
+		},
+		Consumer: class extends ContextConsumer {
+			constructor(host) {
+				super(host, StoreClass);
+			}
+		},
+	};
+}

package/src/utilities/reactive-store/reactive-store.js

@@ -0,0 +1,57 @@
+import { createContextControllers } from './context-controllers.js';
+import PubSub from '../pub-sub/pub-sub.js';
+import StoreConsumer from './store-consumer.js';
+
+const defaultHasChanged = (oldValue, newValue) => oldValue !== newValue;
+
+export default class ReactiveStore {
+	static createContextControllers() {
+		return createContextControllers(this);
+	}
+
+	constructor() {
+		this._pubSub = new PubSub();
+		this._state = {};
+		this._defineProperties(this.constructor.properties);
+	}
+
+	createConsumer() {
+		const store = this;
+		return class extends StoreConsumer {
+			constructor(host) {
+				super(host, store);
+			}
+		};
+	}
+
+	forceUpdate() {
+		this._pubSub.publish({ forceUpdate: true });
+	}
+
+	subscribe(callback) {
+		this._pubSub.subscribe(callback);
+	}
+
+	unsubscribe(callback) {
+		this._pubSub.unsubscribe(callback);
+	}
+
+	_defineProperties(properties) {
+		Object.keys(properties).forEach((property) => {
+			Object.defineProperty(this, property, {
+				get() {
+					return this._state[property];
+				},
+				set(value) {
+					const { hasChanged = defaultHasChanged } = properties[property];
+					if (!hasChanged(this._state[property], value)) return;
+
+					const prevValue = this._state[property];
+					this._state[property] = value;
+
+					this._pubSub.publish({ property, value, prevValue, forceUpdate: false });
+				}
+			});
+		});
+	}
+}

package/src/utilities/reactive-store/store-consumer.js

@@ -0,0 +1,66 @@
+export default class StoreConsumer {
+	constructor(host, store, properties = store.constructor.properties) {
+		this._host = host;
+		this._host.addController(this);
+		this._store = store;
+
+		this.changedProperties = new Map();
+
+		this._onPropertyChange = this._onPropertyChange.bind(this);
+		this._store.subscribe(this._onPropertyChange);
+
+		this._defineProperties(properties);
+		this._initializeChangedProperties(properties);
+	}
+
+	forceUpdate() {
+		this._store.forceUpdate();
+	}
+
+	hostDisconnected() {
+		this._store.unsubscribe(this._onPropertyChange);
+	}
+
+	_defineProperties(properties) {
+		Object.keys(properties).forEach((property) => {
+			Object.defineProperty(this, property, {
+				get() {
+					return this._store[property];
+				},
+				set(value) {
+					this._store[property] = value;
+				}
+			});
+		});
+	}
+
+	_initializeChangedProperties(properties) {
+		let shouldUpdate = false;
+		Object.keys(properties).forEach((property) => {
+			if (this._store[property] === undefined) return;
+
+			this.changedProperties.set(property, undefined);
+			shouldUpdate = true;
+		});
+
+		if (!shouldUpdate) return;
+
+		this._host.requestUpdate();
+		this._host.updateComplete.then(() => {
+			this.changedProperties.clear();
+		});
+	}
+
+	_onPropertyChange({
+		property,
+		prevValue,
+		forceUpdate = false,
+	}) {
+		if (!forceUpdate && !this.changedProperties.has(property)) this.changedProperties.set(property, prevValue);
+
+		this._host.requestUpdate();
+		this._host.updateComplete.then(() => {
+			this.changedProperties.clear();
+		});
+	}
+}