lit-element-notify icon indicating copy to clipboard operation
lit-element-notify copied to clipboard

lit v2

Open bennypowers opened this issue 2 years ago • 0 comments

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @morbidick/[email protected] for the project I'm working on.

this patch updates the type definitions to use lit v2.

NB: the patch also updates the runtime code to use the ReactiveElement interface NB: this patch updates the imports in sync.js but does not update the directive definition

Here is the diff that solved my problem:

diff --git a/node_modules/@morbidick/lit-element-notify/notify.d.ts b/node_modules/@morbidick/lit-element-notify/notify.d.ts
index 3524496..996443e 100644
--- a/node_modules/@morbidick/lit-element-notify/notify.d.ts
+++ b/node_modules/@morbidick/lit-element-notify/notify.d.ts
@@ -1,14 +1,12 @@
-import { PropertyDeclaration, LitElement, UpdatingElement } from 'lit-element';
+import { LitElement, ReactiveElement } from 'lit';
 
 type Constructor<T = LitElement> = new (...args: any[]) => T;
 
-interface AugmentedPropertyDeclaration extends PropertyDeclaration {
-  /** When true will notify. Pass a string to define the event name to fire. */
-  notify: string|Boolean
+declare module '@lit/reactive-element/reactive-element' {
+  export interface PropertyDeclaration<Type = unknown, TypeHint = unknown> {
+    /** When true will notify. Pass a string to define the event name to fire. */
+    notify?: string|Boolean
+  }
 }
 
-declare class NotifyingElement {
-  static createProperty(name: string, options: AugmentedPropertyDeclaration): void
-}
-
-export function LitNotify<T extends UpdatingElement>(baseElement: Constructor<T>): T & NotifyingElement
+export function LitNotify<T extends Constructor<ReactiveElement>>(baseElement: T): T
diff --git a/node_modules/@morbidick/lit-element-notify/notify.js b/node_modules/@morbidick/lit-element-notify/notify.js
index 7d6dda5..9ef5306 100644
--- a/node_modules/@morbidick/lit-element-notify/notify.js
+++ b/node_modules/@morbidick/lit-element-notify/notify.js
@@ -29,7 +29,7 @@ export const LitNotify = (baseElement) => class NotifyingElement extends baseEle
         super.update(changedProps);
 
         for (const prop of changedProps.keys()) {
-            const declaration = this.constructor._classProperties.get(prop)
+            const declaration = this.constructor.elementProperties.get(prop)
             if (!declaration || !declaration.notify) continue;
             const type = eventNameForProperty(prop, declaration)
             const value = this[prop]
diff --git a/node_modules/@morbidick/lit-element-notify/sync.d.ts b/node_modules/@morbidick/lit-element-notify/sync.d.ts
index 99476e3..1c986db 100644
--- a/node_modules/@morbidick/lit-element-notify/sync.d.ts
+++ b/node_modules/@morbidick/lit-element-notify/sync.d.ts
@@ -1,4 +1,4 @@
-import { LitElement, UpdatingElement } from 'lit-element';
+import { LitElement, ReactiveElement } from 'lit';
 
 type Constructor<T = LitElement> = new (...args: any[]) => T;
 
@@ -6,4 +6,4 @@ declare class SyncElement {
   sync(property: string, eventName?: string): void
 }
 
-export function LitSync<T extends UpdatingElement>(baseElement: Constructor<T>): T & SyncElement
+export function LitSync<T extends ReactiveElement>(baseElement: Constructor<T>): T & SyncElement
diff --git a/node_modules/@morbidick/lit-element-notify/sync.js b/node_modules/@morbidick/lit-element-notify/sync.js
index e7a479e..ccdabd1 100644
--- a/node_modules/@morbidick/lit-element-notify/sync.js
+++ b/node_modules/@morbidick/lit-element-notify/sync.js
@@ -1,4 +1,4 @@
-import {directive} from "lit-html/lib/directive.js";
+import {directive} from "lit/directive.js";
 import {eventNameForProperty} from "./notify.js";
 
 // eslint-disable-next-line valid-jsdoc

This issue body was partially generated by patch-package.

bennypowers avatar Aug 31 '21 09:08 bennypowers