[lit/context] Use access.set for setting context values

`access.set` is the correct way to set values in decorators. It supports nested decorators and private fields.
lit · Mar 24, 2024 · a96bd95 · a96bd95
1 parent dd74c60
commit a96bd95
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/packages/context/src/lib/decorators/consume.ts b/packages/context/src/lib/decorators/consume.ts
@@ -47,18 +47,19 @@ export function consume<ValueType>({
   context: Context<unknown, ValueType>;
   subscribe?: boolean;
 }): ConsumeDecorator<ValueType> {
-  return (<C extends ReactiveElement, V extends ValueType>(
-    protoOrTarget: ClassAccessorDecoratorTarget<C, V>,
-    nameOrContext: PropertyKey | ClassAccessorDecoratorContext<C, V>
+  return ((
+    protoOrTarget: ClassAccessorDecoratorTarget<ReactiveElement, ValueType>,
+    nameOrContext:
+      | PropertyKey
+      | ClassAccessorDecoratorContext<ReactiveElement, ValueType>
   ) => {
     if (typeof nameOrContext === 'object') {
       // Standard decorators branch
-      nameOrContext.addInitializer(function (this: ReactiveElement): void {
+      nameOrContext.addInitializer(function (): void {
         new ContextConsumer(this, {
           context,
-          callback: (value: ValueType) => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (this as any)[nameOrContext.name] = value;
+          callback: (value) => {
+            nameOrContext.access.set(this, value);
           },
           subscribe,
         });
@@ -69,7 +70,7 @@ export function consume<ValueType>({
         (element: ReactiveElement): void => {
           new ContextConsumer(element, {
             context,
-            callback: (value: ValueType) => {
+            callback: (value) => {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               (element as any)[nameOrContext] = value;
             },