lit-element - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

CHANGELOG.md

@@ -15,6 +15,11 @@ # Change Log
 <!-- ### Added -->
-<!-- ### Changed -->
 <!-- ### Removed -->
 <!-- ### Fixed -->
+<!-- ### Changed -->
 
+## [2.2.1] - 2019-07-23
+### Changed
+* Elements should now override the new `_getUpdateComplete` method instead of the `updateComplete` getter, for compatibility with TypeScript ES5 output, which does not support calling a superclass getter (e.g.`super.updateComplete.then(...)`) due to [TypeScript#338](https://github.com/microsoft/TypeScript/issues/338).
+### Fixed
+* Fixed compatibility with Closure JS Compiler optimizations relating to static properties ([#732](https://github.com/Polymer/lit-element/issues/732)).
 
@@ -21,0 +26,0 @@ ## [2.2.0] - 2019-06-11

lib/updating-element.d.ts

@@ -113,2 +113,9 @@ /**
 /**
+ * The Closure JS Compiler doesn't currently have good support for static
+ * property semantics where "this" is dynamic (e.g.
+ * https://github.com/google/closure-compiler/issues/3177 and others) so we use
+ * this hack to bypass any rewriting by the compiler.
+ */
+declare const finalized = "finalized";
+/**
  * Base element class which manages element properties and attributes. When
@@ -128,3 +135,3 @@ * properties change, the `update` method is asynchronously called. This method
      */
-    protected static finalized: boolean;
+    protected static [finalized]: boolean;
     /**
@@ -293,7 +300,9 @@ * Memoized list of all class properties, including any superclass properties.
      * a property was set inside `updated()`. If the Promise is rejected, an
-     * exception was thrown during the update. This getter can be implemented to
-     * await additional state. For example, it is sometimes useful to await a
-     * rendered element before fulfilling this Promise. To do this, first await
-     * `super.updateComplete` then any subsequent state.
+     * exception was thrown during the update.
      *
+     * To await additional asynchronous work, override the `_getUpdateComplete`
+     * method. For example, it is sometimes useful to await a rendered element
+     * before fulfilling this Promise. To do this, first await
+     * `super._getUpdateComplete()`, then any subsequent state.
+     *
      * @returns {Promise} The Promise returns a boolean that indicates if the
@@ -304,2 +313,19 @@ * update resolved without triggering another update.
     /**
+     * Override point for the `updateComplete` promise.
+     *
+     * It is not safe to override the `updateComplete` getter directly due to a
+     * limitation in TypeScript which means it is not possible to call a
+     * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
+     * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
+     * This method should be overridden instead. For example:
+     *
+     *   class MyElement extends LitElement {
+     *     async _getUpdateComplete() {
+     *       await super._getUpdateComplete();
+     *       await this._myChild.updateComplete;
+     *     }
+     *   }
+     */
+    protected _getUpdateComplete(): Promise<unknown>;
+    /**
      * Controls whether or not `update` should be called when the element requests
@@ -306,0 +332,0 @@ * an update. By default, this method always returns `true`, but this can be

lib/updating-element.js

@@ -14,2 +14,3 @@ /**
  */
+var _a;
 /**
@@ -71,2 +72,9 @@ * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
 /**
+ * The Closure JS Compiler doesn't currently have good support for static
+ * property semantics where "this" is dynamic (e.g.
+ * https://github.com/google/closure-compiler/issues/3177 and others) so we use
+ * this hack to bypass any rewriting by the compiler.
+ */
+const finalized = 'finalized';
+/**
  * Base element class which manages element properties and attributes. When
@@ -172,12 +180,8 @@ * properties change, the `update` method is asynchronously called. This method
     static finalize() {
-        if (this.hasOwnProperty(JSCompiler_renameProperty('finalized', this)) &&
-            this.finalized) {
-            return;
-        }
         // finalize any superclasses
         const superCtor = Object.getPrototypeOf(this);
-        if (typeof superCtor.finalize === 'function') {
+        if (!superCtor.hasOwnProperty(finalized)) {
             superCtor.finalize();
         }
-        this.finalized = true;
+        this[finalized] = true;
         this._ensureClassProperties();
@@ -537,7 +541,9 @@ // initialize Map populated in observedAttributes
      * a property was set inside `updated()`. If the Promise is rejected, an
-     * exception was thrown during the update. This getter can be implemented to
-     * await additional state. For example, it is sometimes useful to await a
-     * rendered element before fulfilling this Promise. To do this, first await
-     * `super.updateComplete` then any subsequent state.
+     * exception was thrown during the update.
      *
+     * To await additional asynchronous work, override the `_getUpdateComplete`
+     * method. For example, it is sometimes useful to await a rendered element
+     * before fulfilling this Promise. To do this, first await
+     * `super._getUpdateComplete()`, then any subsequent state.
+     *
      * @returns {Promise} The Promise returns a boolean that indicates if the
@@ -547,2 +553,21 @@ * update resolved without triggering another update.
     get updateComplete() {
+        return this._getUpdateComplete();
+    }
+    /**
+     * Override point for the `updateComplete` promise.
+     *
+     * It is not safe to override the `updateComplete` getter directly due to a
+     * limitation in TypeScript which means it is not possible to call a
+     * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
+     * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
+     * This method should be overridden instead. For example:
+     *
+     *   class MyElement extends LitElement {
+     *     async _getUpdateComplete() {
+     *       await super._getUpdateComplete();
+     *       await this._myChild.updateComplete;
+     *     }
+     *   }
+     */
+    _getUpdateComplete() {
         return this._updatePromise;
@@ -600,6 +625,7 @@ }
 }
+_a = finalized;
 /**
  * Marks class as having finished creating properties.
  */
-UpdatingElement.finalized = true;
+UpdatingElement[_a] = true;
 //# sourceMappingURL=updating-element.js.map

lit-element.d.ts

@@ -32,4 +32,7 @@ /**
      * it will not needlessly try to `finalize`.
+     *
+     * Note this property name is a string to prevent breaking Closure JS Compiler
+     * optimizations. See updating-element.ts for more information.
      */
-    protected static finalized: boolean;
+    protected static ['finalized']: boolean;
     /**
@@ -36,0 +39,0 @@ * Render method used to render the lit-html TemplateResult to the element's

lit-element.js

@@ -26,3 +26,3 @@ /**
 (window['litElementVersions'] || (window['litElementVersions'] = []))
-    .push('2.2.0');
+    .push('2.2.1');
 /**
@@ -50,3 +50,5 @@ * Minimal implementation of Array.prototype.flat
     static finalize() {
-        super.finalize();
+        // The Closure JS Compiler does not always preserve the correct "this"
+        // when calling static super methods (b/137460243), so explicitly bind.
+        super.finalize.call(this);
         // Prepare styling that is stamped at first render time. Styling
@@ -191,4 +193,7 @@ // is built from user provided `styles` or is inherited from the superclass.
  * it will not needlessly try to `finalize`.
+ *
+ * Note this property name is a string to prevent breaking Closure JS Compiler
+ * optimizations. See updating-element.ts for more information.
  */
-LitElement.finalized = true;
+LitElement['finalized'] = true;
 /**
@@ -195,0 +200,0 @@ * Render method used to render the lit-html TemplateResult to the element's

package.json

 {
   "name": "lit-element",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A simple base class for creating fast, lightweight web components",
@@ -48,2 +48,3 @@ "license": "BSD-3-Clause",
     "chai": "^4.0.2",
+    "clang-format": "^1.2.4",
     "lit-element-benchmarks": "^0.1.0",
@@ -50,0 +51,0 @@ "mocha": "^5.0.5",

src/env.d.ts

 interface ShadyCSS {
   styleElement(host: Element, overrideProps?: {[key: string]: string}): void;
   getComputedStyleValue(element: Element, property: string): string;
-  ScopingShim: {prepareAdoptedCssText(cssText: string[], name: string): void;};
+  ScopingShim: undefined|{prepareAdoptedCssText(cssText: string[], name: string): void;};
   nativeShadow: boolean;
@@ -6,0 +6,0 @@ }

src/lib/updating-element.ts

@@ -195,2 +195,10 @@ /**
 /**
+ * The Closure JS Compiler doesn't currently have good support for static
+ * property semantics where "this" is dynamic (e.g.
+ * https://github.com/google/closure-compiler/issues/3177 and others) so we use
+ * this hack to bypass any rewriting by the compiler.
+ */
+const finalized = 'finalized';
+
+/**
  * Base element class which manages element properties and attributes. When
@@ -217,3 +225,3 @@ * properties change, the `update` method is asynchronously called. This method
    */
-  protected static finalized = true;
+  protected static[finalized] = true;
 
@@ -320,12 +328,8 @@ /**
   protected static finalize() {
-    if (this.hasOwnProperty(JSCompiler_renameProperty('finalized', this)) &&
-        this.finalized) {
-      return;
-    }
     // finalize any superclasses
     const superCtor = Object.getPrototypeOf(this);
-    if (typeof superCtor.finalize === 'function') {
+    if (!superCtor.hasOwnProperty(finalized)) {
       superCtor.finalize();
     }
-    this.finalized = true;
+    this[finalized] = true;
     this._ensureClassProperties();
@@ -733,7 +737,9 @@ // initialize Map populated in observedAttributes
    * a property was set inside `updated()`. If the Promise is rejected, an
-   * exception was thrown during the update. This getter can be implemented to
-   * await additional state. For example, it is sometimes useful to await a
-   * rendered element before fulfilling this Promise. To do this, first await
-   * `super.updateComplete` then any subsequent state.
+   * exception was thrown during the update.
    *
+   * To await additional asynchronous work, override the `_getUpdateComplete`
+   * method. For example, it is sometimes useful to await a rendered element
+   * before fulfilling this Promise. To do this, first await
+   * `super._getUpdateComplete()`, then any subsequent state.
+   *
    * @returns {Promise} The Promise returns a boolean that indicates if the
@@ -743,2 +749,22 @@ * update resolved without triggering another update.
   get updateComplete() {
+    return this._getUpdateComplete();
+  }
+
+  /**
+   * Override point for the `updateComplete` promise.
+   *
+   * It is not safe to override the `updateComplete` getter directly due to a
+   * limitation in TypeScript which means it is not possible to call a
+   * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
+   * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
+   * This method should be overridden instead. For example:
+   *
+   *   class MyElement extends LitElement {
+   *     async _getUpdateComplete() {
+   *       await super._getUpdateComplete();
+   *       await this._myChild.updateComplete;
+   *     }
+   *   }
+   */
+  protected _getUpdateComplete() {
     return this._updatePromise;
@@ -745,0 +771,0 @@ }

src/lit-element.ts

@@ -35,3 +35,3 @@ /**
 (window['litElementVersions'] || (window['litElementVersions'] = []))
-    .push('2.2.0');
+    .push('2.2.1');
 
@@ -63,8 +63,11 @@ export interface CSSResultArray extends Array<CSSResult|CSSResultArray> {}
 export class LitElement extends UpdatingElement {
+
   /**
    * Ensure this class is marked as `finalized` as an optimization ensuring
    * it will not needlessly try to `finalize`.
+   *
+   * Note this property name is a string to prevent breaking Closure JS Compiler
+   * optimizations. See updating-element.ts for more information.
    */
-  protected static finalized = true;
-
+  protected static['finalized'] = true;
   /**
@@ -90,3 +93,5 @@ * Render method used to render the lit-html TemplateResult to the element's
   protected static finalize() {
-    super.finalize();
+    // The Closure JS Compiler does not always preserve the correct "this"
+    // when calling static super methods (b/137460243), so explicitly bind.
+    super.finalize.call(this);
     // Prepare styling that is stamped at first render time. Styling
@@ -186,3 +191,3 @@ // is built from user provided `styles` or is inherited from the superclass.
     if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {
-      window.ShadyCSS.ScopingShim.prepareAdoptedCssText(
+      window.ShadyCSS.ScopingShim!.prepareAdoptedCssText(
           styles.map((s) => s.cssText), this.localName);
@@ -189,0 +194,0 @@ } else if (supportsAdoptingStyleSheets) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

221773

increased by2.69%

Lines of code

2997

increased by3.06%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

24

increased by4.35%

No dependency changes