Feat/lit2 (#369)

* wip: upgrade to lit 2

* Replacing references of NodePart to ChildPart per Lit 2.0 upgrade guide.
Upgrading testing dependency to use Lit 2.0.
Five failing tests.

* WIP: Virtual components w/ Lit 2.0. Three failing tests.

* Some tweaks, but still have failing tests.

* Switching to AsyncDirective per the lit 2.0 upgrade guide.
One failing test.

* The lit 2 upgrade guide had indicated that the weakmaps should be
removed in favor of state within the directive class. In our case
it turns out we needed those weakmaps because that is how we keep
track of schedulers for the virtual components.

* Upgrading some dev dependencies in an effort to purge older versions
of lit from the lock file. Only partially successful.

* Updating check in virtual component update() method to address issue #337.

* Reverting rocket dev dependencies.

Co-authored-by: Benny Powers <[email protected]>

Makefile

@@ -11,11 +11,11 @@ lib/*.js: src/*.ts
 
 haunted.js: lib/*.js
 	$(COMPILE) -f es -o $@ -e lit-html lib/haunted.js
-	./sed.sh -i.bu 's/lit-html/https:\/\/unpkg\.com\/lit-html@\^1\.0\.0\/lit-html\.js/' $@
+	./sed.sh -i.bu 's/lit/https:\/\/unpkg\.com\/lit\?module/' $@
 	rm -f $@.bu
 
 web.js: haunted.js
-	./sed.sh 's/https:\/\/unpkg\.com\/lit-html@\^1\.0\.0\/lit-html\.js/\.\.\/lit-html\/lit-html\.js/' $^ > $@
+	./sed.sh 's/https:\/\/unpkg\.com\/lit\?module/\.\.\/lit\/index.js/' $^ > $@
 
 clean:
 	@rm -rf lib haunted.js web.js

custom-elements.json

@@ -300,15 +300,15 @@
           "name": "html",
           "declaration": {
             "name": "html",
-            "package": "https://unpkg.com/lit-html@^1.0.0/lit-html.js"
+            "package": "https://unpkg.com/lit?module"
           }
         },
         {
           "kind": "js",
           "name": "render",
           "declaration": {
             "name": "render",
-            "package": "https://unpkg.com/lit-html@^1.0.0/lit-html.js"
+            "package": "https://unpkg.com/lit?module"
           }
         },
         {

docs/docs/guides/getting-started.md

@@ -59,7 +59,7 @@ The main entry point is intended for [lit-html](https://github.com/Polymer/lit-h
 **Haunted** can work directly in the browser without using any build tools. Simply import the `haunted.js` bundle. You can use the [unpkg](https://unpkg.com/) or [pika](https://www.pika.dev/cdn) CDNs. This works great for demo pages and small apps. Here's an example with unpkg:
 
 ```js
-import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+import { html } from 'https://unpkg.com/lit?module';
 import { component, useState } from 'https://unpkg.com/haunted/haunted.js';
 ```
 

docs/index.md

@@ -16,7 +16,7 @@ callToActionItems:
 </style>
 
 ```js playground example my-counter.js
-import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+import { html } from 'https://unpkg.com/lit?module';
 import { component, useState } from 'https://unpkg.com/haunted/haunted.js';
 
 function Counter() {

examples/counter.html

@@ -3,7 +3,7 @@
 <my-counter></my-counter>
 
 <script type="module">
-  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+  import { html } from 'https://unpkg.com/lit?module';
   import { component, useState } from '../haunted.js';
 
   function Counter() {
@@ -16,4 +16,4 @@
   }
 
   customElements.define('my-counter', component(Counter));
-</script>
+</script>

examples/lit/app.js

@@ -1,4 +1,4 @@
-import { html } from 'https://unpkg.com/lit[email protected]/lit-element.js?module';
+import { html } from 'https://unpkg.com/lit?module';
 import { useState } from '../../haunted.js';
 import LitHauntedElement, { litHaunted } from './lit-haunted-element.js';
 
@@ -32,7 +32,7 @@ function App() {
   return html`
     <p>A paragraph</p>
     <click-element @increment=${() => setCount(count + 1)}></click-element>
-    
+
     <p><strong>Count:</strong> ${count}</p>
   `;
 }

examples/lit/lit-haunted-element.js

@@ -1,4 +1,4 @@
-import { LitElement } from 'https://unpkg.com/lit[email protected]/lit-element.js?module';
+import { LitElement } from 'https://unpkg.com/lit?module';
 import { State } from '../../haunted.js';
 
 export default class LitHauntedElement extends LitElement {
@@ -25,4 +25,4 @@ export const litHaunted = (renderer) => {
       return renderer.call(this, this);
     }
   }
-};
+};

examples/lit/make-base.js

@@ -1,4 +1,4 @@
-import { LitElement } from 'https://unpkg.com/lit[email protected]/lit-element.js?module';
+import { LitElement } from 'https://unpkg.com/lit?module';
 import { State } from '../../haunted.js';
 
 export default function(renderer) {
@@ -30,4 +30,4 @@ export default function(renderer) {
       super.disconnectedCallback();
     }
   }
-}
+}

examples/memo.html

@@ -3,7 +3,7 @@
 <my-app></my-app>
 
 <script type="module">
-  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+  import { html } from 'https://unpkg.com/lit?module';
   import { component, useMemo, useState } from '../haunted.js';
 
   function fibonacci(num) {

examples/props.html

@@ -2,7 +2,7 @@
 <my-parent></my-parent>
 
 <script type="module">
-  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+  import { html } from 'https://unpkg.com/lit?module';
   import { component, useState } from '../haunted.js';
 
   function MyParent() {

examples/reducer.html

@@ -4,7 +4,7 @@
 
 
 <script type="module">
-  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+  import { html } from 'https://unpkg.com/lit?module';
   import { component, useReducer } from '../haunted.js';
 
   const initialState = {count: 0};

examples/title.html

@@ -4,7 +4,7 @@
 
 
 <script type="module">
-  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+  import { html } from 'https://unpkg.com/lit?module';
   import { component, useState, useEffect } from '../haunted.js';
 
   function Counter() {

examples/use-controller.html

@@ -3,7 +3,7 @@
 <mouse-tracker></mouse-tracker>
 
 <script type="module">
-  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
+  import { html } from 'https://unpkg.com/lit?module';
   import { component, useController } from '../haunted.js';
 
   // imagine this was imported from npm