Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lit v2 #30

Open
bennypowers opened this issue Aug 31, 2021 · 0 comments
Open

lit v2 #30

bennypowers opened this issue Aug 31, 2021 · 0 comments

Comments

@bennypowers
Copy link
Contributor

bennypowers commented Aug 31, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant