Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
176 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2024 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| import {html, LitElement} from 'lit'; | ||
| import {customElement} from 'lit/decorators.js'; | ||
| import {select} from '@lit-labs/redux'; | ||
| import type {RootState} from './store.js'; | ||
|
|
||
| @customElement('count-display') | ||
| export class CountDisplay extends LitElement { | ||
| @select((state: RootState) => state.counter.value) | ||
| _count!: number; | ||
|
|
||
| render() { | ||
| return html` <p>The count is: ${this._count}</p> `; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2024 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| import {ReactiveElement} from '@lit/reactive-element'; | ||
| import {Connector, type ConnectorOptions} from './connector.js'; | ||
| import type {Store} from '@reduxjs/toolkit'; | ||
|
|
||
| export function select<S extends Store, V>( | ||
| selector: ConnectorOptions<S, V>['selector'], | ||
| equalityCheck?: ConnectorOptions<S, V>['equalityCheck'] | ||
| ): ConnectorDecorator; | ||
| export function select<S extends Store, V>( | ||
| options: ConnectorOptions<S, V> | ||
| ): ConnectorDecorator; | ||
| export function select<S extends Store, V>( | ||
| selectorOrOptions: | ||
| | ConnectorOptions<S, V>['selector'] | ||
| | ConnectorOptions<S, V>, | ||
| equalityCheck?: ConnectorOptions<S, V>['equalityCheck'] | ||
| ): ConnectorDecorator { | ||
| return <C extends ReactiveElement>( | ||
| protoOrTarget: ClassAccessorDecoratorTarget<C, V>, | ||
| nameOrContext: PropertyKey | ClassAccessorDecoratorContext<C, V> | ||
| ) => { | ||
| let options: ConnectorOptions<S, V> = {}; | ||
| if (typeof selectorOrOptions === 'object') { | ||
| options = selectorOrOptions; | ||
| } else { | ||
| options.selector = selectorOrOptions; | ||
| options.equalityCheck = equalityCheck; | ||
| } | ||
| // Map of instances to controllers | ||
| const controllerMap = new WeakMap<ReactiveElement, Connector<S, V>>(); | ||
| if (typeof nameOrContext === 'object') { | ||
| // Standard decorators branch | ||
| nameOrContext.addInitializer(function (this: ReactiveElement) { | ||
| controllerMap.set(this, new Connector(this, options)); | ||
| }); | ||
| return { | ||
| get(this: ReactiveElement) { | ||
| return controllerMap.get(this)!.selected; | ||
| }, | ||
| }; | ||
| } else { | ||
| // Experimental decorators branch | ||
| (protoOrTarget.constructor as typeof ReactiveElement).addInitializer( | ||
| (element: ReactiveElement): void => { | ||
| controllerMap.set(element, new Connector(element, options)); | ||
| } | ||
| ); | ||
| Object.defineProperty(protoOrTarget, nameOrContext, { | ||
| get(this: ReactiveElement) { | ||
| return controllerMap.get(this)!.selected; | ||
| }, | ||
| }); | ||
| return; | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| export function dispatch<S extends Store>(): ConnectorDecorator { | ||
| return <C extends ReactiveElement>( | ||
| protoOrTarget: ClassAccessorDecoratorTarget<C, S['dispatch']>, | ||
| nameOrContext: PropertyKey | ClassAccessorDecoratorContext<C, S['dispatch']> | ||
| ) => { | ||
| // Map of instances to controllers | ||
| const controllerMap = new WeakMap<ReactiveElement, Connector<S, never>>(); | ||
| if (typeof nameOrContext === 'object') { | ||
| // Standard decorators branch | ||
| nameOrContext.addInitializer(function (this: ReactiveElement) { | ||
| controllerMap.set(this, new Connector(this)); | ||
| }); | ||
| return { | ||
| get(this: ReactiveElement) { | ||
| return controllerMap.get(this)!.dispatch; | ||
| }, | ||
| }; | ||
| } else { | ||
| // Experimental decorators branch | ||
| (protoOrTarget.constructor as typeof ReactiveElement).addInitializer( | ||
| (element: ReactiveElement): void => { | ||
| controllerMap.set(element, new Connector(element)); | ||
| } | ||
| ); | ||
| Object.defineProperty(protoOrTarget, nameOrContext, { | ||
| get(this: ReactiveElement) { | ||
| return controllerMap.get(this)!.dispatch; | ||
| }, | ||
| }); | ||
| return; | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Generates a public interface type that removes private and protected fields. | ||
| * This allows accepting otherwise compatible versions of the type (e.g. from | ||
| * multiple copies of the same package in `node_modules`). | ||
| */ | ||
| type Interface<T> = { | ||
| [K in keyof T]: T[K]; | ||
| }; | ||
|
|
||
| type ConnectorDecorator = { | ||
| // legacy | ||
| < | ||
| K extends PropertyKey, | ||
| Proto extends Interface<Omit<ReactiveElement, 'renderRoot'>>, | ||
| >( | ||
| protoOrDescriptor: Proto, | ||
| name?: K | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| ): any; | ||
|
|
||
| // standard | ||
| <C extends Interface<Omit<ReactiveElement, 'renderRoot'>>, V>( | ||
| value: ClassAccessorDecoratorTarget<C, V>, | ||
| context: ClassAccessorDecoratorContext<C, V> | ||
| ): void; | ||
| }; |