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
google · May 2, 2022 · 0ec49c5 · 0ec49c5
1 parent 4734ba3
commit 0ec49c5
Show file tree

Hide file tree

Showing 109 changed files with 2,290 additions and 1,014 deletions.
diff --git a/packages/model-viewer/package-lock.json b/packages/model-viewer/package-lock.json
diff --git a/packages/model-viewer/package.json b/packages/model-viewer/package.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",

diff --git a/packages/model-viewer/src/assets/close-material-svg.ts b/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" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">

diff --git a/packages/model-viewer/src/assets/controls-svg.ts b/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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="36">

diff --git a/packages/model-viewer/src/assets/view-in-ar-material-svg.ts b/packages/model-viewer/src/assets/view-in-ar-material-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"

diff --git a/packages/model-viewer/src/decorators.ts b/packages/model-viewer/src/decorators.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));
 

diff --git a/packages/model-viewer/src/features/animation.ts b/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 {LoopOnce, LoopPingPong, LoopRepeat} from 'three';
 
 import ModelViewerElementBase, {$hasTransitioned, $needsRender, $onModelLoad, $renderer, $scene, $tick, $updateSource} from '../model-viewer-base.js';

diff --git a/packages/model-viewer/src/features/ar.ts b/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 as ThreeEvent} from 'three';
 import {USDZExporter} from 'three/examples/jsm/exporters/USDZExporter.js';
 

diff --git a/packages/model-viewer/src/features/controls.ts b/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, 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();

diff --git a/packages/model-viewer/src/features/environment.ts b/packages/model-viewer/src/features/environment.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';

diff --git a/packages/model-viewer/src/features/loading.ts b/packages/model-viewer/src/features/loading.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
+import {property} from 'lit/decorators.js';
 
 import ModelViewerElementBase, {$altDefaulted, $announceModelVisibility, $getModelIsVisible, $hasTransitioned, $isElementInViewport, $progressTracker, $scene, $sceneIsReady, $shouldAttemptPreload, $updateSource, $updateStatus, $userInputElement, toVector3D, Vector3D} from '../model-viewer-base.js';
 import {$loader, CachingGLTFLoader} from '../three-components/CachingGLTFLoader.js';

diff --git a/packages/model-viewer/src/features/scene-graph.ts b/packages/model-viewer/src/features/scene-graph.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
+import {property} from 'lit/decorators.js';
 import {Euler, RepeatWrapping, sRGBEncoding, Texture, TextureLoader} from 'three';
 import {GLTFExporter, GLTFExporterOptions} from 'three/examples/jsm/exporters/GLTFExporter.js';
 

diff --git a/packages/model-viewer/src/features/staging.ts b/packages/model-viewer/src/features/staging.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
+import {property} from 'lit/decorators.js';
 import {style} from '../decorators.js';
 import ModelViewerElementBase, {$hasTransitioned, $renderer, $scene, $tick} from '../model-viewer-base.js';
 import {degreesToRadians} from '../styles/conversions.js';

diff --git a/packages/model-viewer/src/model-viewer-base.ts b/packages/model-viewer/src/model-viewer-base.ts
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import {property} from 'lit-element';
-import {UpdatingElement} from 'lit-element/lib/updating-element';
+import {ReactiveElement} from 'lit';
+import {property} from 'lit/decorators.js';
 import {Event as ThreeEvent, Vector2, Vector3} from 'three';
 
 import {HAS_INTERSECTION_OBSERVER, HAS_RESIZE_OBSERVER} from './constants.js';
@@ -129,7 +129,7 @@ export interface RendererInterface {
 /**
  * Definition for a basic <model-viewer> element.
  */
-export default class ModelViewerElementBase extends UpdatingElement {
+export default class ModelViewerElementBase extends ReactiveElement {
   static get is() {
     return 'model-viewer';
   }

diff --git a/packages/model-viewer/src/template.ts b/packages/model-viewer/src/template.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {html, render} from 'lit-html';
+import {html, render} from 'lit';
 
 import CloseIcon from './assets/close-material-svg.js';
 import ControlsPrompt from './assets/controls-svg.js';
@@ -318,7 +318,7 @@ canvas.show {
           <canvas></canvas>
         </slot>
       </div>
-      
+
   </div>
 
   <!-- NOTE(cdata): We need to wrap slots because browsers without ShadowDOM
@@ -341,7 +341,7 @@ canvas.show {
 
   <div class="slot pan-target">
     <slot name="pan-target">
-      <div id="default-pan-target">      
+      <div id="default-pan-target">
       </div>
     </slot>
   </div>
@@ -365,7 +365,7 @@ canvas.show {
         </div>
       </slot>
     </div>
-    
+
     <div class="slot exit-webxr-ar-button">
       <slot name="exit-webxr-ar-button">
         <a id="default-exit-webxr-ar-button" part="default-exit-webxr-ar-button"

diff --git a/packages/model-viewer/src/test/decorators-spec.ts b/packages/model-viewer/src/test/decorators-spec.ts
@@ -12,7 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {property, UpdatingElement} from 'lit-element';
+import {property} from 'lit/decorators.js';
+import {ReactiveElement} from 'lit';
 
 import {style} from '../decorators.js';
 import {numberNode} from '../styles/parsers.js';
@@ -27,7 +28,7 @@ const fooIntrinsics = {
   keywords: {auto: [null, numberNode(200, '%')]}
 };
 
-class StyleableElement extends UpdatingElement {
+class StyleableElement extends ReactiveElement {
   @style({intrinsics: fooIntrinsics, updateHandler: $updateFoo})
   @property({type: String})
   foo: string = '200cm 1rad';

diff --git a/packages/model-viewer/src/three-components/ModelScene.ts b/packages/model-viewer/src/three-components/ModelScene.ts
@@ -383,7 +383,8 @@ export class ModelScene extends Scene {
     const {center} = this.boundingSphere;
 
     if (this.tightBounds === true) {
-      await this.element.requestUpdate('cameraTarget');
+      this.element.requestUpdate('cameraTarget');
+      await this.element.updateComplete;
       center.copy(this.getTarget());
     } else {
       this.boundingBox.getCenter(center);