Upgrade to lit 2 (#3405)

* upgrade to lit 2

* add license to spread directive

* remove lit 2 binding artifacts from snippets

* Update comment to match current comment style

Author: e111077

packages/model-viewer/package-lock.json

@@ -70,8 +70,7 @@
   ],
   "dependencies": {
     "three": "^0.139.2",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1"
+    "lit": "^2.2.3"
   },
   "devDependencies": {
     "@open-wc/karma-esm": "^4.0.0",

packages/model-viewer/package.json

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {html} from 'lit-html';
+import {html} from 'lit';
 
 export default html`
 <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">

packages/model-viewer/src/assets/close-material-svg.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {html} from 'lit-html';
+import {html} from 'lit';
 
 export default html`
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="36">

packages/model-viewer/src/assets/controls-svg.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {html} from 'lit-html';
+import {html} from 'lit';
 
 export default html`
 <svg version="1.1" id="view_x5F_in_x5F_AR_x5F_icon"

packages/model-viewer/src/assets/view-in-ar-material-svg.ts

@@ -13,23 +13,23 @@
  * limitations under the License.
  */
 
-import {UpdatingElement} from 'lit-element/lib/updating-element';
+import {ReactiveElement} from 'lit';
 import {EvaluatedStyle, Intrinsics, StyleEvaluator} from './styles/evaluators';
 import {parseExpressions, Unit} from './styles/parsers';
 import {StyleEffector} from './styles/style-effector';
 
 // An IntrinsicsFactory generates up-to-date intrinsics for a given ModelViewer
 // element instance when it is invoked.
 export type IntrinsicsFactory<T extends Intrinsics<Array<Unit>>,
-                                        U extends UpdatingElement> =
+                                        U extends ReactiveElement> =
     (element: U) => T;
 
 // When applying the @style decorator, it needs to be configured with
 // corresponding Intrinsics and the property key of a method to receive updated
 // values. Optionally, it can also be configured to observe environment effects,
 // which causes a StyleEffector to be created for the property.
 export interface StyleDecoratorConfig<T extends Intrinsics<Array<Unit>>,
-                                                U extends UpdatingElement> {
+                                                U extends ReactiveElement> {
   intrinsics: T|IntrinsicsFactory<T, U>;
   updateHandler: symbol;
   observeEffects?: boolean;
@@ -66,14 +66,14 @@ export interface StyleDecoratorConfig<T extends Intrinsics<Array<Unit>>,
  * static).
  */
 export const style =
-    <T extends Intrinsics<Array<Unit>>, U extends UpdatingElement>(
+    <T extends Intrinsics<Array<Unit>>, U extends ReactiveElement>(
         config: StyleDecoratorConfig<T, U>) => {
       const observeEffects: boolean = config.observeEffects || false;
       const getIntrinsics = config.intrinsics instanceof Function ?
           config.intrinsics :
           (() => config.intrinsics) as IntrinsicsFactory<T, U>;
 
-      return <U extends typeof UpdatingElement['prototype']>(
+      return <U extends typeof ReactiveElement['prototype']>(
                  proto: U, propertyName: string) => {
         const originalUpdated = (proto as any).updated;
         const originalConnectedCallback = proto.connectedCallback;
@@ -93,7 +93,7 @@ export const style =
           [$updateEvaluator]: {
             value: function() {
               const ast = parseExpressions(
-                  this[propertyName as keyof UpdatingElement] as string);
+                  this[propertyName as keyof ReactiveElement] as string);
               this[$styleEvaluator] =
                   new StyleEvaluator(ast, getIntrinsics(this));
 

packages/model-viewer/src/decorators.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
+import {property} from 'lit/decorators.js';
 import {LoopOnce, LoopPingPong, LoopRepeat} from 'three';
 
 import ModelViewerElementBase, {$hasTransitioned, $needsRender, $onModelLoad, $renderer, $scene, $tick, $updateSource} from '../model-viewer-base.js';

packages/model-viewer/src/features/animation.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
+import {property} from 'lit/decorators.js';
 import {Event as ThreeEvent} from 'three';
 import {USDZExporter} from 'three/examples/jsm/exporters/USDZExporter.js';
 

packages/model-viewer/src/features/ar.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
+import {property} from 'lit/decorators.js';
 import {Event, PerspectiveCamera, Spherical, Vector3} from 'three';
 
 import {style} from '../decorators.js';
@@ -563,7 +563,8 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
       this.requestUpdate('fieldOfView');
       this.requestUpdate('minCameraOrbit');
       this.requestUpdate('maxCameraOrbit');
-      await this.requestUpdate('cameraOrbit');
+      this.requestUpdate('cameraOrbit');
+      await this.updateComplete;
     }
 
     [$syncFieldOfView](style: EvaluatedStyle<Intrinsics<['rad']>>) {
@@ -729,7 +730,8 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
 
       controls.updateAspect(this[$scene].aspect);
 
-      await this.requestUpdate('maxFieldOfView', this.maxFieldOfView);
+      this.requestUpdate('maxFieldOfView', this.maxFieldOfView);
+      await this.updateComplete;
       this[$controls].setFieldOfView(fov);
 
       this.jumpCameraToGoal();

packages/model-viewer/src/features/controls.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
+import {property} from 'lit/decorators.js';
 import {Event as ThreeEvent, Texture} from 'three';
 
 import ModelViewerElementBase, {$needsRender, $onModelLoad, $progressTracker, $renderer, $scene, $shouldAttemptPreload} from '../model-viewer-base.js';