@lit/reactive-element - npm Package Compare versions

Comparing version 1.0.0-pre.1 to 1.0.0-pre.2

CHANGELOG.md

@@ -20,2 +20,19 @@ # Change Log
 
+## [1.0.0-pre.2] - 2021-02-11
+
+### Added
+
+- (Since 1.0.0-pre.1) Added `removeController(controller)` which can be used to remove a controller from a `ReactiveElement`.
+
+### Changed
+
+- (Since 1.0.0-pre.1) Fixed `@query` decorator when cache flag is used and code is compiled with Babel ([#1591](https://github.com/Polymer/lit-html/pull/1591)).
+
+- (Since 1.0.0-pre.1) Renamed all decorator modules to use kebab-case filename convention rather than camelCase.
+- (Since 1.0.0-pre.1) `ReactiveController` callbacks all now begin with `host`, for example `hostConnected`, `hostDisconnected`, `hostUpdate`, `hostUpdated`.
+- (Since 1.0.0-pre.1) If a `Controller` is added after a host element is connected, its `connected` will be called.
+- (Since 1.0.0-pre.1) Removed `willUpdate` from `ReactiveController`.
+- (Since 1.0.0-pre.1) Renamed `Controller`'s `dis/connectedCallback` methods.
+- (Since 1.0.0-pre.1) Renamed `Controller` to `ReactiveController`.
+
 ## [1.0.0-pre.1] - 2020-12-16
@@ -22,0 +39,0 @@

decorators.d.ts

@@ -14,10 +14,10 @@ /**
  */
-export * from './decorators/customElement.js';
+export * from './decorators/custom-element.js';
 export * from './decorators/property.js';
 export * from './decorators/state.js';
-export * from './decorators/eventOptions.js';
+export * from './decorators/event-options.js';
 export * from './decorators/query.js';
-export * from './decorators/queryAll.js';
-export * from './decorators/queryAsync.js';
-export * from './decorators/queryAssignedNodes.js';
+export * from './decorators/query-all.js';
+export * from './decorators/query-async.js';
+export * from './decorators/query-assigned-nodes.js';
 //# sourceMappingURL=decorators.d.ts.map

decorators.js

@@ -1,2 +0,2 @@
-export{customElement}from"./decorators/customElement.js";export{property}from"./decorators/property.js";export{state}from"./decorators/state.js";export{eventOptions}from"./decorators/eventOptions.js";export{query}from"./decorators/query.js";export{queryAll}from"./decorators/queryAll.js";export{queryAsync}from"./decorators/queryAsync.js";export{queryAssignedNodes}from"./decorators/queryAssignedNodes.js";
+export{customElement}from"./decorators/custom-element.js";export{property}from"./decorators/property.js";export{state}from"./decorators/state.js";export{eventOptions}from"./decorators/event-options.js";export{query}from"./decorators/query.js";export{queryAll}from"./decorators/query-all.js";export{queryAsync}from"./decorators/query-async.js";export{queryAssignedNodes}from"./decorators/query-assigned-nodes.js";
 //# sourceMappingURL=decorators.js.map

decorators/query.js

@@ -14,3 +14,3 @@ import{legacyPrototypeMethod as t,standardPrototypeMethod as o}from"./base.js";
  * http://polymer.github.io/PATENTS.txt
- */function r(r,e){return(i,n)=>{const s={get(){return this.renderRoot?.querySelector(r)},enumerable:!0,configurable:!0};if(e){const t="symbol"==typeof n?Symbol():"__"+n;s.get=function(){return void 0===this[t]&&(this[t]=this.renderRoot?.querySelector(r)),this[t]}}return void 0!==n?t(s,i,n):o(s,i)}}export{r as query};
+ */function i(i,r){return(e,n)=>{const s={get(){return this.renderRoot?.querySelector(i)},enumerable:!0,configurable:!0};if(r){const t=void 0!==n?n:e.key,o="symbol"==typeof t?Symbol():"__"+t;s.get=function(){return void 0===this[o]&&(this[o]=this.renderRoot?.querySelector(i)),this[o]}}return void 0!==n?t(s,e,n):o(s,e)}}export{i as query};
 //# sourceMappingURL=query.js.map

development/decorators.d.ts

@@ -14,10 +14,10 @@ /**
  */
-export * from './decorators/customElement.js';
+export * from './decorators/custom-element.js';
 export * from './decorators/property.js';
 export * from './decorators/state.js';
-export * from './decorators/eventOptions.js';
+export * from './decorators/event-options.js';
 export * from './decorators/query.js';
-export * from './decorators/queryAll.js';
-export * from './decorators/queryAsync.js';
-export * from './decorators/queryAssignedNodes.js';
+export * from './decorators/query-all.js';
+export * from './decorators/query-async.js';
+export * from './decorators/query-assigned-nodes.js';
 //# sourceMappingURL=decorators.d.ts.map

development/decorators.js

@@ -20,10 +20,10 @@ /**
  */
-export * from './decorators/customElement.js';
+export * from './decorators/custom-element.js';
 export * from './decorators/property.js';
 export * from './decorators/state.js';
-export * from './decorators/eventOptions.js';
+export * from './decorators/event-options.js';
 export * from './decorators/query.js';
-export * from './decorators/queryAll.js';
-export * from './decorators/queryAsync.js';
-export * from './decorators/queryAssignedNodes.js';
+export * from './decorators/query-all.js';
+export * from './decorators/query-async.js';
+export * from './decorators/query-assigned-nodes.js';
 //# sourceMappingURL=decorators.js.map

development/decorators/query.js

@@ -54,3 +54,4 @@ /**
         if (cache) {
-            const key = typeof name === 'symbol' ? Symbol() : `__${name}`;
+            const prop = name !== undefined ? name : protoOrDescriptor.key;
+            const key = typeof prop === 'symbol' ? Symbol() : `__${prop}`;
             descriptor.get = function () {
@@ -57,0 +58,0 @@ if (this[key] === undefined) {

development/reactive-element.d.ts

@@ -20,3 +20,5 @@ /**
 import { CSSResultGroup, CSSResultFlatArray } from './css-tag.js';
+import type { ReactiveController, ReactiveControllerHost } from './reactive-controller.js';
 export * from './css-tag.js';
+export type { ReactiveController, ReactiveControllerHost, } from './reactive-controller.js';
 declare global {
@@ -133,10 +135,2 @@ const JSCompiler_renameProperty: <P extends PropertyKey>(prop: P, _obj: unknown) => P;
 export declare const notEqual: HasChanged;
-export interface Controller {
-    connectedCallback?(): void;
-    disconnectedCallback?(): void;
-    willUpdate?(): void;
-    update?(): void;
-    updated?(): void;
-    requestUpdate?(): void;
-}
 /**
@@ -156,5 +150,8 @@ * The Closure JS Compiler doesn't currently have good support for static
  */
-export declare abstract class ReactiveElement extends HTMLElement {
+export declare abstract class ReactiveElement extends HTMLElement implements ReactiveControllerHost {
+    /** @nocollapse */
     static enabledWarnings?: Warnings[];
+    /** @nocollapse */
     static enableWarning?: (type: Warnings) => void;
+    /** @nocollapse */
     static disableWarning?: (type: Warnings) => void;
@@ -165,2 +162,3 @@ /**
      * class.
+     * @nocollapse
      */
@@ -175,2 +173,3 @@ private static __attributeToPropertyMap;
      * Created lazily on user subclasses when finalizing the class.
+     * @nocollapse
      */
@@ -200,2 +199,3 @@ static elementProperties?: PropertyDeclarationMap;
      * facilitate complex interactions.
+     * @nocollapse
      */
@@ -206,2 +206,3 @@ static properties: PropertyDeclarations;
      * Created lazily on user subclasses when finalizing the class.
+     * @nocollapse
      */
@@ -212,2 +213,3 @@ static elementStyles?: CSSResultFlatArray;
      * using the [[`css`]] tag function or via constructible stylesheets.
+     * @nocollapse
      */
@@ -300,2 +302,3 @@ static styles?: CSSResultGroup;
      * is customized, options should be respected if possible.
+     * @nocollapse
      */
@@ -334,7 +337,2 @@ static shadowRootOptions: ShadowRootInit;
     /**
-     * Map with keys for any properties that have changed since the last
-     * update cycle with previous values.
-     */
-    private __changedProperties;
-    /**
      * Map with keys of properties that should be reflected when updated.
@@ -352,3 +350,4 @@ */
     constructor();
-    addController(controller: Controller): void;
+    addController(controller: ReactiveController): void;
+    removeController(controller: ReactiveController): void;
     /**
@@ -386,3 +385,3 @@ * Fixes any properties set on the instance before upgrade time.
      */
-    protected enableUpdating(): void;
+    protected enableUpdating(_requestedUpdate: boolean): void;
     /**
@@ -399,4 +398,2 @@ * Allows for `super.disconnectedCallback()` in extensions while
     private __propertyToAttribute;
-    /** @internal */
-    _$attributeToProperty(name: string, value: string | null): void;
     /**
@@ -415,5 +412,3 @@ * Requests an update which is processed asynchronously. This should be called
      */
-    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): {
-        then: (onfulfilled?: ((value: boolean) => void) | undefined, _onrejected?: (() => void) | undefined) => void;
-    } | undefined;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     /**
@@ -441,3 +436,2 @@ * Sets up the element to asynchronously update.
     willUpdate(_changedProperties: PropertyValues): void;
-    _$didUpdate(changedProperties: PropertyValues): void;
     private __markUpdated;
@@ -459,3 +453,3 @@ /**
      */
-    get updateComplete(): Promise<unknown>;
+    get updateComplete(): Promise<boolean>;
     /**
@@ -477,3 +471,3 @@ * Override point for the `updateComplete` promise.
      */
-    protected getUpdateComplete(): Promise<unknown>;
+    protected getUpdateComplete(): Promise<boolean>;
     /**
@@ -480,0 +474,0 @@ * Controls whether or not `update` should be called when the element requests

development/reactive-element.js

@@ -15,2 +15,3 @@ /**
 var _a;
+var _b;
 /**
@@ -33,3 +34,3 @@ * Use this module if you want to create your own base class extending
         console.warn(`Shadow DOM is being polyfilled via ShadyDOM but ` +
-            `the \`platform-support\` module has not been loaded.`);
+            `the \`polyfill-support\` module has not been loaded.`);
     }
@@ -134,8 +135,3 @@ requestUpdateThenable = {
         this.__reflectingProperty = null;
-        this.__updatePromise = new Promise((res) => (this.enableUpdating = res));
-        this.__changedProperties = new Map();
-        this.__saveInstanceProperties();
-        // ensures first update will be caught by an early access of
-        // `updateComplete`
-        this.requestUpdate();
+        this._initialize();
     }
@@ -358,5 +354,27 @@ /**
     }
+    /**
+     * Internal only override point for customizing work done when elements
+     * are constructed.
+     *
+     * @internal
+     */
+    _initialize() {
+        this.__updatePromise = new Promise((res) => (this.enableUpdating = res));
+        this._$changedProperties = new Map();
+        this.__saveInstanceProperties();
+        // ensures first update will be caught by an early access of
+        // `updateComplete`
+        this.requestUpdate();
+    }
     addController(controller) {
         (this.__controllers ?? (this.__controllers = [])).push(controller);
+        if (this.isConnected) {
+            controller.hostConnected?.();
+        }
     }
+    removeController(controller) {
+        // Note, if the indexOf is -1, the >>> will flip the sign which makes the
+        // splice do nothing.
+        this.__controllers?.splice(this.__controllers.indexOf(controller) >>> 0, 1);
+    }
     /**
@@ -407,4 +425,4 @@ * Fixes any properties set on the instance before upgrade time.
         }
-        this.enableUpdating();
-        this.__controllers?.forEach((c) => c.connectedCallback?.());
+        this.enableUpdating(true);
+        this.__controllers?.forEach((c) => c.hostConnected?.());
         // If we were disconnected, re-enable updating by resolving the pending
@@ -422,3 +440,3 @@ // connection promise
      */
-    enableUpdating() { }
+    enableUpdating(_requestedUpdate) { }
     /**
@@ -430,3 +448,3 @@ * Allows for `super.disconnectedCallback()` in extensions while
     disconnectedCallback() {
-        this.__controllers?.forEach((c) => c.disconnectedCallback?.());
+        this.__controllers?.forEach((c) => c.hostDisconnected?.());
         this.__pendingConnectionPromise = new Promise((r) => (this.__enableConnection = r));
@@ -520,4 +538,4 @@ }
             if (hasChanged(this[name], oldValue)) {
-                if (!this.__changedProperties.has(name)) {
-                    this.__changedProperties.set(name, oldValue);
+                if (!this._$changedProperties.has(name)) {
+                    this._$changedProperties.set(name, oldValue);
                 }
@@ -632,9 +650,8 @@ // Add to reflecting properties set.
         let shouldUpdate = false;
-        const changedProperties = this.__changedProperties;
+        const changedProperties = this._$changedProperties;
         try {
             shouldUpdate = this.shouldUpdate(changedProperties);
             if (shouldUpdate) {
-                this.__controllers?.forEach((c) => c.willUpdate?.());
                 this.willUpdate(changedProperties);
-                this.__controllers?.forEach((c) => c.update?.());
+                this.__controllers?.forEach((c) => c.hostUpdate?.());
                 this.update(changedProperties);
@@ -660,3 +677,3 @@ }
     willUpdate(_changedProperties) { }
-    // Note, this is an override point for platform-support.
+    // Note, this is an override point for polyfill-support.
     // @internal
@@ -668,3 +685,3 @@ _$didUpdate(changedProperties) {
         }
-        this.__controllers?.forEach((c) => c.updated?.());
+        this.__controllers?.forEach((c) => c.hostUpdated?.());
         this.updated(changedProperties);
@@ -681,3 +698,3 @@ if (DEV_MODE &&
     __markUpdated() {
-        this.__changedProperties = new Map();
+        this._$changedProperties = new Map();
         this.isUpdatePending = false;
@@ -770,7 +787,7 @@ }
 }
-_a = finalized;
+_b = finalized;
 /**
  * Marks class as having finished creating properties.
  */
-ReactiveElement[_a] = true;
+ReactiveElement[_b] = true;
 /**
@@ -783,2 +800,3 @@ * Options used when calling `attachShadow`. Set this property to customize
  * is customized, options should be respected if possible.
+ * @nocollapse
  */
@@ -815,3 +833,4 @@ ReactiveElement.shadowRootOptions = { mode: 'open' };
 // TODO(justinfagnani): inject version number at build time
-(window['reactiveElementVersions'] || (window['reactiveElementVersions'] = [])).push('1.0.0-pre.1');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+((_a = globalThis)['reactiveElementVersions'] ?? (_a['reactiveElementVersions'] = [])).push('1.0.0-pre.2');
 //# sourceMappingURL=reactive-element.js.map

development/test/decorators/customElement_test.js

@@ -20,3 +20,3 @@ /**
 };
-import { customElement } from '../../decorators/customElement.js';
+import { customElement } from '../../decorators/custom-element.js';
 import { generateElementName } from '../test-helpers.js';
@@ -23,0 +23,0 @@ import { assert } from '@esm-bundle/chai';

development/test/decorators/eventOptions_test.js

@@ -21,3 +21,3 @@ /**
 import { ReactiveElement } from '../../reactive-element.js';
-import { eventOptions } from '../../decorators/eventOptions.js';
+import { eventOptions } from '../../decorators/event-options.js';
 import { canTestReactiveElement, generateElementName, RenderingElement, html, } from '../test-helpers.js';
@@ -24,0 +24,0 @@ import { assert } from '@esm-bundle/chai';

development/test/decorators/property_test.js

@@ -273,9 +273,10 @@ /**
         class E extends ReactiveElement {
+            static get properties() {
+                return { foo: { type: Number, reflect: true } };
+            }
             constructor() {
-                super(...arguments);
+                super();
+                // Avoiding class fields for Babel compat.
                 this.foo = 1;
             }
-            static get properties() {
-                return { foo: { type: Number, reflect: true } };
-            }
         }
@@ -311,2 +312,3 @@ customElements.define(generateElementName(), E);
                 super();
+                // Avoiding class fields for Babel compat.
                 this.foo = 'foo';
@@ -343,3 +345,3 @@ }
             constructor() {
-                super(...arguments);
+                super();
                 // provide custom deorator expecting extended type
@@ -350,2 +352,3 @@ this.foo = 5;
                 this.zot = '';
+                // Avoiding class fields for Babel compat.
                 this.zot2 = '';
@@ -352,0 +355,0 @@ this.foo2 = 5;

development/test/decorators/query_test.js

@@ -28,3 +28,4 @@ /**
         constructor() {
-            super(...arguments);
+            super();
+            // Avoiding class fields for Babel compat.
             this.condition = false;
@@ -45,2 +46,5 @@ }
     __decorate([
+        query('#blah', true)
+    ], C.prototype, "divCached", void 0);
+    __decorate([
         query('span', true)
@@ -74,2 +78,5 @@ ], C.prototype, "span", void 0);
         await el.updateComplete;
+        // trigger caching, so we can verify that multiple elements can be cached
+        el.divCached;
+        assert.equal(el.divCached, el.renderRoot.querySelector('#blah'));
         assert.equal(el.span, el.renderRoot.querySelector('span'));
@@ -76,0 +83,0 @@ assert.instanceOf(el.span, HTMLSpanElement);

development/test/decorators/queryAll_test.js

@@ -20,3 +20,3 @@ /**
 };
-import { queryAll } from '../../decorators/queryAll.js';
+import { queryAll } from '../../decorators/query-all.js';
 import { canTestReactiveElement, generateElementName, RenderingElement, html, } from '../test-helpers.js';
@@ -23,0 +23,0 @@ import { assert } from '@esm-bundle/chai';

development/test/decorators/queryAssignedNodes_test.js

@@ -20,3 +20,3 @@ /**
 };
-import { queryAssignedNodes } from '../../decorators/queryAssignedNodes.js';
+import { queryAssignedNodes } from '../../decorators/query-assigned-nodes.js';
 import { canTestReactiveElement, generateElementName, RenderingElement, html, } from '../test-helpers.js';
@@ -23,0 +23,0 @@ import { assert } from '@esm-bundle/chai';

development/test/decorators/queryAsync_test.js

@@ -20,3 +20,3 @@ /**
 };
-import { queryAsync } from '../../decorators/queryAsync.js';
+import { queryAsync } from '../../decorators/query-async.js';
 import { canTestReactiveElement, generateElementName, RenderingElement, html, } from '../test-helpers.js';
@@ -29,3 +29,4 @@ import { assert } from '@esm-bundle/chai';
         constructor() {
-            super(...arguments);
+            super();
+            // Avoiding class fields for Babel compat.
             this.foo = false;
@@ -32,0 +33,0 @@ }

development/test/reactive-element_dev_mode_test.js

@@ -51,4 +51,4 @@ /**
             });
-            (missingPlatformSupport ? test : test.skip)('warns for missing platform-support', async () => {
-                assert.include(warnings[1], 'platform-support');
+            (missingPlatformSupport ? test : test.skip)('warns for missing polyfill-support', async () => {
+                assert.include(warnings[1], 'polyfill-support');
             });
@@ -55,0 +55,0 @@ });

development/test/reactive-element-controllers_test.js

@@ -20,3 +20,2 @@ /**
         constructor(host) {
-            this.willUpdateCount = 0;
             this.updateCount = 0;
@@ -30,21 +29,17 @@ this.updatedCount = 0;
         }
-        connectedCallback() {
+        hostConnected() {
             this.connectedCount++;
-            this.callbackOrder.push('connectedCallback');
+            this.callbackOrder.push('hostConnected');
         }
-        disconnectedCallback() {
+        hostDisconnected() {
             this.disconnectedCount++;
-            this.callbackOrder.push('disconnectedCallback');
+            this.callbackOrder.push('hostDisconnected');
         }
-        willUpdate() {
-            this.willUpdateCount++;
-            this.callbackOrder.push('willUpdate');
-        }
-        update() {
+        hostUpdate() {
             this.updateCount++;
-            this.callbackOrder.push('update');
+            this.callbackOrder.push('hostUpdate');
         }
-        updated() {
+        hostUpdated() {
             this.updatedCount++;
-            this.callbackOrder.push('updated');
+            this.callbackOrder.push('hostUpdated');
         }
@@ -56,3 +51,2 @@ }
             this.foo = 'foo';
-            this.willUpdateCount = 0;
             this.updateCount = 0;
@@ -72,6 +66,2 @@ this.updatedCount = 0;
         }
-        willUpdate(changedProperties) {
-            this.willUpdateCount++;
-            super.willUpdate(changedProperties);
-        }
         update(changedProperties) {
@@ -102,3 +92,3 @@ this.updateCount++;
     });
-    test('controllers can implement connectedCallback/disconnectedCallback', () => {
+    test('controllers can implement hostConnected/hostDisconnected', () => {
         assert.equal(el.connectedCount, 1);
@@ -119,7 +109,16 @@ assert.equal(el.disconnectedCount, 0);
     });
-    test('controllers can implement willUpdate/update/updated', async () => {
-        assert.equal(el.willUpdateCount, 1);
+    test('controllers added after an element is connected call `hostConnected`', () => {
+        const controller = new MyController(el);
+        el.addController(controller);
+        assert.equal(el.controller.connectedCount, 1);
+        assert.equal(el.controller.disconnectedCount, 0);
+        container.removeChild(el);
+        assert.equal(el.controller.disconnectedCount, 1);
+        container.appendChild(el);
+        assert.equal(el.controller.connectedCount, 2);
+        assert.equal(el.controller.disconnectedCount, 1);
+    });
+    test('controllers can implement hostUpdate/hostUpdated', async () => {
         assert.equal(el.updateCount, 1);
         assert.equal(el.updatedCount, 1);
-        assert.equal(el.controller.willUpdateCount, 1);
         assert.equal(el.controller.updateCount, 1);
@@ -129,15 +128,26 @@ assert.equal(el.controller.updatedCount, 1);
         await el.updateComplete;
-        assert.equal(el.willUpdateCount, 2);
         assert.equal(el.updateCount, 2);
         assert.equal(el.updatedCount, 2);
-        assert.equal(el.controller.willUpdateCount, 2);
         assert.equal(el.controller.updateCount, 2);
         assert.equal(el.controller.updatedCount, 2);
     });
+    test('controllers can be removed', async () => {
+        assert.equal(el.controller.connectedCount, 1);
+        assert.equal(el.controller.disconnectedCount, 0);
+        assert.equal(el.controller.updateCount, 1);
+        assert.equal(el.controller.updatedCount, 1);
+        el.removeController(el.controller);
+        el.foo = 'new';
+        await el.updateComplete;
+        el.remove();
+        assert.equal(el.controller.connectedCount, 1);
+        assert.equal(el.controller.disconnectedCount, 0);
+        assert.equal(el.controller.updateCount, 1);
+        assert.equal(el.controller.updatedCount, 1);
+    });
     test('controllers callback order', async () => {
         assert.deepEqual(el.controller.callbackOrder, [
-            'connectedCallback',
-            'willUpdate',
-            'update',
-            'updated',
+            'hostConnected',
+            'hostUpdate',
+            'hostUpdated',
         ]);
@@ -148,11 +158,10 @@ el.controller.callbackOrder = [];
         assert.deepEqual(el.controller.callbackOrder, [
-            'willUpdate',
-            'update',
-            'updated',
+            'hostUpdate',
+            'hostUpdated',
         ]);
         el.controller.callbackOrder = [];
         container.removeChild(el);
-        assert.deepEqual(el.controller.callbackOrder, ['disconnectedCallback']);
+        assert.deepEqual(el.controller.callbackOrder, ['hostDisconnected']);
     });
 });
 //# sourceMappingURL=reactive-element-controllers_test.js.map

development/test/test-helpers.d.ts

@@ -24,3 +24,2 @@ /**
     render(): string | undefined;
-    createRenderRoot(): HTMLSpanElement;
     update(changedProperties: PropertyValues): void;
@@ -27,0 +26,0 @@ }

development/test/test-helpers.js

@@ -30,8 +30,2 @@ /**
     }
-    createRenderRoot() {
-        const renderRoot = super.createRenderRoot();
-        const span = document.createElement('span');
-        renderRoot.appendChild(span);
-        return span;
-    }
     update(changedProperties) {
@@ -41,3 +35,7 @@ const result = this.render();
         if (result !== undefined) {
+            // Save and replace any existing styles in root to simulate
+            // adoptedStylesheets.
+            const styles = this.renderRoot.querySelectorAll('style');
             this.renderRoot.innerHTML = result;
+            this.renderRoot.append(...styles);
         }
@@ -44,0 +42,0 @@ }

package.json

 {
   "name": "@lit/reactive-element",
-  "version": "1.0.0-pre.1",
+  "version": "1.0.0-pre.2",
   "publishConfig": {
@@ -20,5 +20,5 @@ "access": "public"
     },
-    "./platform-support.js": {
-      "development": "./development/platform-support.js",
-      "default": "./platform-support.js"
+    "./polyfill-support.js": {
+      "development": "./development/polyfill-support.js",
+      "default": "./polyfill-support.js"
     },
@@ -29,5 +29,5 @@ "./css-tag.js": {
     },
-    "./decorators.js": {
-      "development": "./development/decorators.js",
-      "default": "./decorators.js"
+    "./reactive-controller.js": {
+      "development": "./development/reactive-controller.js",
+      "default": "./reactive-controller.js"
     },
@@ -37,12 +37,17 @@ "./decorators/": {
       "default": "./decorators/"
+    },
+    "./decorators.js": {
+      "development": "./development/decorators.js",
+      "default": "./decorators.js"
     }
   },
   "scripts": {
-    "build": "npm run clean && tsc && rollup -c",
+    "build": "npm run clean && tsc --build && rollup -c && npm run build:babel",
     "build:watch": "rollup -c --watch",
-    "build:ts": "tsc",
-    "build:ts:watch": "tsc --watch",
+    "build:ts": "tsc --build",
+    "build:ts:watch": "tsc --build --watch",
+    "build:babel": "babel --extensions '.ts' src/test/decorators  --out-dir development/test/decorators-babel",
     "check-version": "node scripts/check-version-tracker.js",
     "checksize": "rollup -c --environment=CHECKSIZE",
-    "clean": "rm -rf reactive-element.{js,js.map,d.ts} decorators.{js,js.map,d.ts} css-tag.{js,js.map,d.ts} platform-support.{js,js.map,d.ts} decorators/ development/",
+    "clean": "rm -rf {css-tag,decorators,polyfill-support,reactive-controller,reactive-element}.{js,js.map,d.ts} test/ decorators/ development/ *.tsbuildinfo",
     "dev": "scripts/dev.sh",
@@ -59,30 +64,20 @@ "prepublishOnly": "npm run check-version",
   "files": [
-    "/css-tag.d.ts",
-    "/css-tag.d.ts.map",
-    "/css-tag.js",
-    "/css-tag.js.map",
-    "/decorators.d.ts",
-    "/decorators.d.ts.map",
-    "/decorators.js",
-    "/decorators.js.map",
+    "/css-tag.{d.ts,d.ts.map,js,js.map}",
+    "/decorators.{d.ts,d.ts.map,js,js.map}",
+    "/polyfill-support.{d.ts,d.ts.map,js,js.map}",
+    "/reactive-controller.{d.ts,d.ts.map,js,js.map}",
+    "/reactive-element.{d.ts,d.ts.map,js,js.map}",
     "/decorators/",
     "/development/",
-    "/platform-support.d.ts",
-    "/platform-support.d.ts.map",
-    "/platform-support.js",
-    "/platform-support.js.map",
     "/src/",
     "!/src/demo/",
-    "!/src/test/",
-    "/reactive-element.d.ts",
-    "/reactive-element.d.ts.map",
-    "/reactive-element.js",
-    "/reactive-element.js.map"
+    "!/src/test/"
   ],
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-proposal-decorators": "^7.2.3",
-    "@babel/plugin-transform-typescript": "^7.2.0",
+    "@babel/core": "^7.12.10",
+    "@babel/cli": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.12",
+    "@babel/plugin-transform-typescript": "^7.12.1",
     "@esm-bundle/chai": "^4.1.5",
@@ -93,2 +88,3 @@ "@types/chai": "^4.0.1",
     "@webcomponents/webcomponentsjs": "^2.5.0",
+    "@webcomponents/template": "^1.4.4",
     "chokidar-cli": "^2.1.0",
@@ -95,0 +91,0 @@ "mocha": "^8.1.1",

reactive-element.d.ts

@@ -20,3 +20,5 @@ /**
 import { CSSResultGroup, CSSResultFlatArray } from './css-tag.js';
+import type { ReactiveController, ReactiveControllerHost } from './reactive-controller.js';
 export * from './css-tag.js';
+export type { ReactiveController, ReactiveControllerHost, } from './reactive-controller.js';
 declare global {
@@ -133,10 +135,2 @@ const JSCompiler_renameProperty: <P extends PropertyKey>(prop: P, _obj: unknown) => P;
 export declare const notEqual: HasChanged;
-export interface Controller {
-    connectedCallback?(): void;
-    disconnectedCallback?(): void;
-    willUpdate?(): void;
-    update?(): void;
-    updated?(): void;
-    requestUpdate?(): void;
-}
 /**
@@ -156,5 +150,8 @@ * The Closure JS Compiler doesn't currently have good support for static
  */
-export declare abstract class ReactiveElement extends HTMLElement {
+export declare abstract class ReactiveElement extends HTMLElement implements ReactiveControllerHost {
+    /** @nocollapse */
     static enabledWarnings?: Warnings[];
+    /** @nocollapse */
     static enableWarning?: (type: Warnings) => void;
+    /** @nocollapse */
     static disableWarning?: (type: Warnings) => void;
@@ -165,2 +162,3 @@ /**
      * class.
+     * @nocollapse
      */
@@ -175,2 +173,3 @@ private static __attributeToPropertyMap;
      * Created lazily on user subclasses when finalizing the class.
+     * @nocollapse
      */
@@ -200,2 +199,3 @@ static elementProperties?: PropertyDeclarationMap;
      * facilitate complex interactions.
+     * @nocollapse
      */
@@ -206,2 +206,3 @@ static properties: PropertyDeclarations;
      * Created lazily on user subclasses when finalizing the class.
+     * @nocollapse
      */
@@ -212,2 +213,3 @@ static elementStyles?: CSSResultFlatArray;
      * using the [[`css`]] tag function or via constructible stylesheets.
+     * @nocollapse
      */
@@ -300,2 +302,3 @@ static styles?: CSSResultGroup;
      * is customized, options should be respected if possible.
+     * @nocollapse
      */
@@ -334,7 +337,2 @@ static shadowRootOptions: ShadowRootInit;
     /**
-     * Map with keys for any properties that have changed since the last
-     * update cycle with previous values.
-     */
-    private __changedProperties;
-    /**
      * Map with keys of properties that should be reflected when updated.
@@ -352,3 +350,4 @@ */
     constructor();
-    addController(controller: Controller): void;
+    addController(controller: ReactiveController): void;
+    removeController(controller: ReactiveController): void;
     /**
@@ -386,3 +385,3 @@ * Fixes any properties set on the instance before upgrade time.
      */
-    protected enableUpdating(): void;
+    protected enableUpdating(_requestedUpdate: boolean): void;
     /**
@@ -399,4 +398,2 @@ * Allows for `super.disconnectedCallback()` in extensions while
     private __propertyToAttribute;
-    /** @internal */
-    _$attributeToProperty(name: string, value: string | null): void;
     /**
@@ -415,5 +412,3 @@ * Requests an update which is processed asynchronously. This should be called
      */
-    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): {
-        then: (onfulfilled?: ((value: boolean) => void) | undefined, _onrejected?: (() => void) | undefined) => void;
-    } | undefined;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     /**
@@ -441,3 +436,2 @@ * Sets up the element to asynchronously update.
     willUpdate(_changedProperties: PropertyValues): void;
-    _$didUpdate(changedProperties: PropertyValues): void;
     private __markUpdated;
@@ -459,3 +453,3 @@ /**
      */
-    get updateComplete(): Promise<unknown>;
+    get updateComplete(): Promise<boolean>;
     /**
@@ -477,3 +471,3 @@ * Override point for the `updateComplete` promise.
      */
-    protected getUpdateComplete(): Promise<unknown>;
+    protected getUpdateComplete(): Promise<boolean>;
     /**
@@ -480,0 +474,0 @@ * Controls whether or not `update` should be called when the element requests

reactive-element.js

@@ -14,3 +14,3 @@ import{getCompatibleStyle as t,adoptStyles as s}from"./css-tag.js";export{CSSResult,adoptStyles,css,getCompatibleStyle,supportsAdoptingStyleSheets,unsafeCSS}from"./css-tag.js";
  * http://polymer.github.io/PATENTS.txt
- */window.JSCompiler_renameProperty=(t,s)=>t;const i={toAttribute(t,s){switch(s){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},e=(t,s)=>s!==t&&(s==s||t==t),h={attribute:!0,type:String,converter:i,reflect:!1,hasChanged:e};class r extends HTMLElement{constructor(){super(),this.Πi=new Map,this.Πo=void 0,this.Πh=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.Πl=null,this.Πu=new Promise((t=>this.enableUpdating=t)),this.Πp=new Map,this.Πm(),this.requestUpdate()}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((s,i)=>{const e=this.Πv(i,s);void 0!==e&&(this.Πg.set(e,i),t.push(e))})),t}static createProperty(t,s=h){if(s.state&&(s.attribute=!1),this.finalize(),this.elementProperties.set(t,s),!s.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,i,s);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){return{get(){return this[s]},set(e){const h=this[t];this[s]=e,this.requestUpdate(t,h,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||h}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this.Πg=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,s=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of s)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(t(s))}else void 0!==s&&i.push(t(s));return i}static Πv(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}addController(t){(this.Π_??(this.Π_=[])).push(t)}Πm(){this.constructor.elementProperties.forEach(((t,s)=>{this.hasOwnProperty(s)&&(this.Πi.set(s,this[s]),delete this[s])}))}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(t,this.constructor.elementStyles),t}connectedCallback(){this.hasUpdated||(this.renderRoot=this.createRenderRoot()),this.enableUpdating(),this.Π_?.forEach((t=>t.connectedCallback?.())),this.Πh&&(this.Πh(),this.Πo=this.Πh=void 0)}enableUpdating(){}disconnectedCallback(){this.Π_?.forEach((t=>t.disconnectedCallback?.())),this.Πo=new Promise((t=>this.Πh=t))}attributeChangedCallback(t,s,i){this.O(t,i)}ΠU(t,s,e=h){const r=this.constructor.Πv(t,e);if(void 0!==r&&!0===e.reflect){const h=(e.converter?.toAttribute??i.toAttribute)(s,e.type);this.Πl=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this.Πl=null}}O(t,s){const e=this.constructor,h=e.Πg.get(t);if(void 0!==h&&this.Πl!==h){const t=e.getPropertyOptions(h),r=t.converter,o=r?.fromAttribute??("function"==typeof r?r:null)??i.fromAttribute;this.Πl=h,this[h]=o(s,t.type),this.Πl=null}}requestUpdate(t,s,i){let h=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||e)(this[t],s)?(this.Πp.has(t)||this.Πp.set(t,s),!0===i.reflect&&this.Πl!==t&&(void 0===this.Πj&&(this.Πj=new Map),this.Πj.set(t,i))):h=!1),!this.isUpdatePending&&h&&(this.Πu=this.Πk())}async Πk(){this.isUpdatePending=!0;try{for(await this.Πu;this.Πo;)await this.Πo}catch(t){Promise.reject(t)}const t=this.performUpdate();return null!=t&&await t,!this.isUpdatePending}performUpdate(){if(!this.isUpdatePending)return;this.hasUpdated,this.Πi&&(this.Πi.forEach(((t,s)=>this[s]=t)),this.Πi=void 0);let t=!1;const s=this.Πp;try{t=this.shouldUpdate(s),t?(this.Π_?.forEach((t=>t.willUpdate?.())),this.willUpdate(s),this.Π_?.forEach((t=>t.update?.())),this.update(s)):this.Πq()}catch(s){throw t=!1,this.Πq(),s}t&&this.H(s)}willUpdate(t){}H(t){this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.Π_?.forEach((t=>t.updated?.())),this.updated(t)}Πq(){this.Πp=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.Πu}shouldUpdate(t){return!0}update(t){void 0!==this.Πj&&(this.Πj.forEach(((t,s)=>this.ΠU(s,this[s],t))),this.Πj=void 0),this.Πq()}updated(t){}firstUpdated(t){}}r.finalized=!0,r.shadowRootOptions={mode:"open"},globalThis.reactiveElementPlatformSupport?.({ReactiveElement:r}),(window.reactiveElementVersions||(window.reactiveElementVersions=[])).push("1.0.0-pre.1");export{r as ReactiveElement,i as defaultConverter,e as notEqual};
+ */var i;window.JSCompiler_renameProperty=(t,s)=>t;const e={toAttribute(t,s){switch(s){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},h=(t,s)=>s!==t&&(s==s||t==t),r={attribute:!0,type:String,converter:e,reflect:!1,hasChanged:h};class o extends HTMLElement{constructor(){super(),this.Πi=new Map,this.Πo=void 0,this.Πh=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.Πl=null,this.u()}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((s,i)=>{const e=this.Πp(i,s);void 0!==e&&(this.Πm.set(e,i),t.push(e))})),t}static createProperty(t,s=r){if(s.state&&(s.attribute=!1),this.finalize(),this.elementProperties.set(t,s),!s.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,i,s);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){return{get(){return this[s]},set(e){const h=this[t];this[s]=e,this.requestUpdate(t,h,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||r}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this.Πm=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,s=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of s)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(t(s))}else void 0!==s&&i.push(t(s));return i}static Πp(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){this.Πv=new Promise((t=>this.enableUpdating=t)),this.P=new Map,this.Πg(),this.requestUpdate()}addController(t){(this.Π_??(this.Π_=[])).push(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.Π_?.splice(this.Π_.indexOf(t)>>>0,1)}Πg(){this.constructor.elementProperties.forEach(((t,s)=>{this.hasOwnProperty(s)&&(this.Πi.set(s,this[s]),delete this[s])}))}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(t,this.constructor.elementStyles),t}connectedCallback(){this.hasUpdated||(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this.Π_?.forEach((t=>t.hostConnected?.())),this.Πh&&(this.Πh(),this.Πo=this.Πh=void 0)}enableUpdating(t){}disconnectedCallback(){this.Π_?.forEach((t=>t.hostDisconnected?.())),this.Πo=new Promise((t=>this.Πh=t))}attributeChangedCallback(t,s,i){this.O(t,i)}Πj(t,s,i=r){const h=this.constructor.Πp(t,i);if(void 0!==h&&!0===i.reflect){const r=(i.converter?.toAttribute??e.toAttribute)(s,i.type);this.Πl=t,null==r?this.removeAttribute(h):this.setAttribute(h,r),this.Πl=null}}O(t,s){const i=this.constructor,h=i.Πm.get(t);if(void 0!==h&&this.Πl!==h){const t=i.getPropertyOptions(h),r=t.converter,o=r?.fromAttribute??("function"==typeof r?r:null)??e.fromAttribute;this.Πl=h,this[h]=o(s,t.type),this.Πl=null}}requestUpdate(t,s,i){let e=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||h)(this[t],s)?(this.P.has(t)||this.P.set(t,s),!0===i.reflect&&this.Πl!==t&&(void 0===this.Πk&&(this.Πk=new Map),this.Πk.set(t,i))):e=!1),!this.isUpdatePending&&e&&(this.Πv=this.Πq())}async Πq(){this.isUpdatePending=!0;try{for(await this.Πv;this.Πo;)await this.Πo}catch(t){Promise.reject(t)}const t=this.performUpdate();return null!=t&&await t,!this.isUpdatePending}performUpdate(){if(!this.isUpdatePending)return;this.hasUpdated,this.Πi&&(this.Πi.forEach(((t,s)=>this[s]=t)),this.Πi=void 0);let t=!1;const s=this.P;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this.Π_?.forEach((t=>t.hostUpdate?.())),this.update(s)):this.Π$()}catch(s){throw t=!1,this.Π$(),s}t&&this.H(s)}willUpdate(t){}H(t){this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.Π_?.forEach((t=>t.hostUpdated?.())),this.updated(t)}Π$(){this.P=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.Πv}shouldUpdate(t){return!0}update(t){void 0!==this.Πk&&(this.Πk.forEach(((t,s)=>this.Πj(s,this[s],t))),this.Πk=void 0),this.Π$()}updated(t){}firstUpdated(t){}}o.finalized=!0,o.shadowRootOptions={mode:"open"},globalThis.reactiveElementPlatformSupport?.({ReactiveElement:o}),((i=globalThis).reactiveElementVersions??(i.reactiveElementVersions=[])).push("1.0.0-pre.2");export{o as ReactiveElement,e as defaultConverter,h as notEqual};
 //# sourceMappingURL=reactive-element.js.map

README.md

@@ -28,8 +28,8 @@ # ReactiveElement 1.0 Pre-release
 
-ReactiveElement is a low level base class for creating custom elements that
-render content to shadowRoot via a user implemented method. It adds API to help
-manage element properties and attributes. ReactiveElement reacts to changes in
-properties and calls the update method which should be implemented to update
-the rendered state of the element.
+`ReactiveElement` is a base class for writing web components that react to changes in properties and attributes. `ReactiveElement` adds reactive properties and a batching, asynchronous update lifecycle to the standard web component APIs. Subclasses can respond to changes and update the DOM to reflect the element state.
 
+`ReactiveElement` doesn't include a DOM template system, but can easily be extended to add one by overriding the `update()` method to call the template library. `LitElement` is such an extension that adds `lit-html` templating.
+
+## Example
+
 ```ts
@@ -84,11 +84,2 @@ import {
 
-## Examples
-
-- Runs in all [supported](#supported-browsers) browsers: [Glitch](https://glitch.com/edit/#!/hello-lit-element?path=index.html)
-
-- Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [Stackblitz](https://stackblitz.com/edit/lit-element-demo?file=src%2Fmy-element.js), [JSFiddle](https://jsfiddle.net/sorvell1/801f9cdu/), [JSBin](http://jsbin.com/vecuyan/edit?html,output),
-  [CodePen](https://codepen.io/sorvell/pen/RYQyoe?editors=1000).
-
-- You can also copy [this HTML file](https://gist.githubusercontent.com/sorvell/48f4b7be35c8748e8f6db5c66d36ee29/raw/67346e4e8bc4c81d5a7968d18f0a6a8bc00d792e/index.html) into a local file and run it in any browser that supports [JavaScript Modules](<(https://caniuse.com/#search=modules)>).
-
 ## Installation
@@ -110,3 +101,3 @@
 
-@lit/reactive-element includes a development mode which adds additional checks that are
+`@lit/reactive-element` includes a development mode which adds additional checks that are
 reported in the console.
@@ -119,4 +110,2 @@
 
-> NOTE: Requires [rollup#540](https://github.com/rollup/plugins/pull/540)
-
 ```js
@@ -132,4 +121,2 @@ {
 
-> NOTE: Requires [rollup#540](https://github.com/rollup/plugins/pull/540)
-
 ```js
@@ -162,6 +149,13 @@ {
 
-Edge and Internet Explorer 11 require the web components polyfills.
+Edge and Internet Explorer 11 require the web components polyfills and the
+`polyfill-support` module included in this package.
 
+```html
+<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+<script src="node_modules/@lit/reactive-element/polyfill-support.js"></script>
+<!-- load application code -->
+```
+
 ## Contributing
 
 Please see [CONTRIBUTING.md](./CONTRIBUTING.md).

src/decorators.ts

@@ -22,9 +22,9 @@ /**
 
-export * from './decorators/customElement.js';
+export * from './decorators/custom-element.js';
 export * from './decorators/property.js';
 export * from './decorators/state.js';
-export * from './decorators/eventOptions.js';
+export * from './decorators/event-options.js';
 export * from './decorators/query.js';
-export * from './decorators/queryAll.js';
-export * from './decorators/queryAsync.js';
-export * from './decorators/queryAssignedNodes.js';
+export * from './decorators/query-all.js';
+export * from './decorators/query-async.js';
+export * from './decorators/query-assigned-nodes.js';

src/decorators/query.ts

@@ -70,3 +70,5 @@ /**
     if (cache) {
-      const key = typeof name === 'symbol' ? Symbol() : `__${name}`;
+      const prop =
+        name !== undefined ? name : (protoOrDescriptor as ClassElement).key;
+      const key = typeof prop === 'symbol' ? Symbol() : `__${prop}`;
       descriptor.get = function (this: ReactiveElement) {
@@ -73,0 +75,0 @@ if (

src/env.d.ts

@@ -23,2 +23,5 @@ interface ShadyCSS {
   flush: () => void;
+  noPatch: boolean | string;
+  wrap: (node: Node) => Node;
+  patchElementProto: (node: Object) => void;
 }
@@ -25,0 +28,0 @@

src/reactive-element.ts

@@ -28,3 +28,12 @@ /**
 } from './css-tag.js';
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from './reactive-controller.js';
+
 export * from './css-tag.js';
+export type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from './reactive-controller.js';
 
@@ -52,3 +61,3 @@ const DEV_MODE = true;
       `Shadow DOM is being polyfilled via ShadyDOM but ` +
-        `the \`platform-support\` module has not been loaded.`
+        `the \`polyfill-support\` module has not been loaded.`
     );
@@ -274,11 +283,2 @@ }
 
-export interface Controller {
-  connectedCallback?(): void;
-  disconnectedCallback?(): void;
-  willUpdate?(): void;
-  update?(): void;
-  updated?(): void;
-  requestUpdate?(): void;
-}
-
 /**
@@ -300,6 +300,11 @@ * The Closure JS Compiler doesn't currently have good support for static
  */
-export abstract class ReactiveElement extends HTMLElement {
+export abstract class ReactiveElement
+  extends HTMLElement
+  implements ReactiveControllerHost {
   // Note, these are patched in only in DEV_MODE.
+  /** @nocollapse */
   static enabledWarnings?: Warnings[];
+  /** @nocollapse */
   static enableWarning?: (type: Warnings) => void;
+  /** @nocollapse */
   static disableWarning?: (type: Warnings) => void;
@@ -316,2 +321,3 @@ /*
    * class.
+   * @nocollapse
    */
@@ -328,2 +334,3 @@ private static __attributeToPropertyMap: AttributeMap;
    * Created lazily on user subclasses when finalizing the class.
+   * @nocollapse
    */
@@ -354,2 +361,3 @@ static elementProperties?: PropertyDeclarationMap;
    * facilitate complex interactions.
+   * @nocollapse
    */
@@ -361,2 +369,3 @@ static properties: PropertyDeclarations;
    * Created lazily on user subclasses when finalizing the class.
+   * @nocollapse
    */
@@ -368,2 +377,3 @@ static elementStyles?: CSSResultFlatArray;
    * using the [[`css`]] tag function or via constructible stylesheets.
+   * @nocollapse
    */
@@ -573,2 +583,3 @@ static styles?: CSSResultGroup;
    * is customized, options should be respected if possible.
+   * @nocollapse
    */
@@ -634,3 +645,3 @@ static shadowRootOptions: ShadowRootInit = {mode: 'open'};
   // connected before first update.
-  private __updatePromise!: Promise<unknown>;
+  private __updatePromise!: Promise<boolean>;
 
@@ -646,4 +657,6 @@ private __pendingConnectionPromise: Promise<void> | undefined = undefined;
    * update cycle with previous values.
+   *
+   * @internal
    */
-  private __changedProperties!: PropertyValues;
+  _$changedProperties!: PropertyValues;
 
@@ -663,10 +676,20 @@ /**
    */
-  private __controllers?: Controller[];
+  private __controllers?: ReactiveController[];
 
   constructor() {
     super();
-    this.__updatePromise = new Promise<void>(
+    this._initialize();
+  }
+
+  /**
+   * Internal only override point for customizing work done when elements
+   * are constructed.
+   *
+   * @internal
+   */
+  _initialize() {
+    this.__updatePromise = new Promise<boolean>(
       (res) => (this.enableUpdating = res)
     );
-    this.__changedProperties = new Map();
+    this._$changedProperties = new Map();
     this.__saveInstanceProperties();
@@ -678,6 +701,15 @@ // ensures first update will be caught by an early access of
 
-  addController(controller: Controller) {
+  addController(controller: ReactiveController) {
     (this.__controllers ??= []).push(controller);
+    if (this.isConnected) {
+      controller.hostConnected?.();
+    }
   }
 
+  removeController(controller: ReactiveController) {
+    // Note, if the indexOf is -1, the >>> will flip the sign which makes the
+    // splice do nothing.
+    this.__controllers?.splice(this.__controllers.indexOf(controller) >>> 0, 1);
+  }
+
   /**
@@ -740,4 +772,4 @@ * Fixes any properties set on the instance before upgrade time.
     }
-    this.enableUpdating();
-    this.__controllers?.forEach((c) => c.connectedCallback?.());
+    this.enableUpdating(true);
+    this.__controllers?.forEach((c) => c.hostConnected?.());
     // If we were disconnected, re-enable updating by resolving the pending
@@ -756,3 +788,3 @@ // connection promise
    */
-  protected enableUpdating() {}
+  protected enableUpdating(_requestedUpdate: boolean) {}
 
@@ -765,3 +797,3 @@ /**
   disconnectedCallback() {
-    this.__controllers?.forEach((c) => c.disconnectedCallback?.());
+    this.__controllers?.forEach((c) => c.hostDisconnected?.());
     this.__pendingConnectionPromise = new Promise(
@@ -874,3 +906,3 @@ (r) => (this.__enableConnection = r)
     options?: PropertyDeclaration
-  ) {
+  ): void {
     let shouldRequestUpdate = true;
@@ -884,4 +916,4 @@ // If we have a property key, perform property update steps.
       if (hasChanged(this[name as keyof this], oldValue)) {
-        if (!this.__changedProperties.has(name)) {
-          this.__changedProperties.set(name, oldValue);
+        if (!this._$changedProperties.has(name)) {
+          this._$changedProperties.set(name, oldValue);
         }
@@ -908,3 +940,3 @@ // Add to reflecting properties set.
     // thenable which warns if it's called.
-    return DEV_MODE ? requestUpdateThenable : undefined;
+    return DEV_MODE ? ((requestUpdateThenable as unknown) as void) : undefined;
   }
@@ -1001,9 +1033,8 @@
     let shouldUpdate = false;
-    const changedProperties = this.__changedProperties;
+    const changedProperties = this._$changedProperties;
     try {
       shouldUpdate = this.shouldUpdate(changedProperties);
       if (shouldUpdate) {
-        this.__controllers?.forEach((c) => c.willUpdate?.());
         this.willUpdate(changedProperties);
-        this.__controllers?.forEach((c) => c.update?.());
+        this.__controllers?.forEach((c) => c.hostUpdate?.());
         this.update(changedProperties);
@@ -1029,3 +1060,3 @@ } else {
 
-  // Note, this is an override point for platform-support.
+  // Note, this is an override point for polyfill-support.
   // @internal
@@ -1037,3 +1068,3 @@ _$didUpdate(changedProperties: PropertyValues) {
     }
-    this.__controllers?.forEach((c) => c.updated?.());
+    this.__controllers?.forEach((c) => c.hostUpdated?.());
     this.updated(changedProperties);
@@ -1057,3 +1088,3 @@ if (
   private __markUpdated() {
-    this.__changedProperties = new Map();
+    this._$changedProperties = new Map();
     this.isUpdatePending = false;
@@ -1077,3 +1108,3 @@ }
    */
-  get updateComplete() {
+  get updateComplete(): Promise<boolean> {
     return this.getUpdateComplete();
@@ -1098,3 +1129,3 @@ }
    */
-  protected getUpdateComplete() {
+  protected getUpdateComplete(): Promise<boolean> {
     return this.__updatePromise;
@@ -1170,3 +1201,6 @@ }
   };
-  ReactiveElement.enableWarning = function (warning: Warnings) {
+  ReactiveElement.enableWarning = function (
+    this: typeof ReactiveElement,
+    warning: Warnings
+  ) {
     ensureOwnWarnings(this);
@@ -1177,3 +1211,6 @@ if (this.enabledWarnings!.indexOf(warning) < 0) {
   };
-  ReactiveElement.disableWarning = function (warning: Warnings) {
+  ReactiveElement.disableWarning = function (
+    this: typeof ReactiveElement,
+    warning: Warnings
+  ) {
     ensureOwnWarnings(this);
@@ -1196,4 +1233,3 @@ const i = this.enabledWarnings!.indexOf(warning);
 // TODO(justinfagnani): inject version number at build time
-(
-  window['reactiveElementVersions'] || (window['reactiveElementVersions'] = [])
-).push('1.0.0-pre.1');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+((globalThis as any)['reactiveElementVersions'] ??= []).push('1.0.0-pre.2');

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

Improved metrics

Total package byte prevSize

1176894

increased by17.12%

Number of package files

189

increased by7.39%

Lines of code

13182

increased by19.93%

Worsened metrics

Dev dependency count

15

increased by15.38%

Number of lines in readme file

156

decreased by-3.7%

No dependency changes