Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@lit/reactive-element

Package Overview
Dependencies
Maintainers
7
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lit/reactive-element - npm Package Compare versions

Comparing version 1.0.0-rc.4 to 1.0.0

2

css-tag.js

@@ -6,3 +6,3 @@ /**

*/
const t=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e=Symbol(),s=new Map;class n{constructor(t,s){if(this._$cssResult$=!0,s!==e)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let e=s.get(this.cssText);return t&&void 0===e&&(s.set(this.cssText,e=new CSSStyleSheet),e.replaceSync(this.cssText)),e}toString(){return this.cssText}}const o=t=>new n("string"==typeof t?t:t+"",e),r=(t,...s)=>{const o=1===t.length?t[0]:s.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new n(o,e)},S=(e,s)=>{t?e.adoptedStyleSheets=s.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):s.forEach((t=>{const s=document.createElement("style");s.textContent=t.cssText,e.appendChild(s)}))},i=t?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return o(e)})(t):t;export{n as CSSResult,S as adoptStyles,r as css,i as getCompatibleStyle,t as supportsAdoptingStyleSheets,o as unsafeCSS};
const t=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e=Symbol(),n=new Map;class s{constructor(t,n){if(this._$cssResult$=!0,n!==e)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let e=n.get(this.cssText);return t&&void 0===e&&(n.set(this.cssText,e=new CSSStyleSheet),e.replaceSync(this.cssText)),e}toString(){return this.cssText}}const o=t=>new s("string"==typeof t?t:t+"",e),r=(t,...n)=>{const o=1===t.length?t[0]:n.reduce(((e,n,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+t[s+1]),t[0]);return new s(o,e)},i=(e,n)=>{t?e.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((t=>{const n=document.createElement("style"),s=window.litNonce;void 0!==s&&n.setAttribute("nonce",s),n.textContent=t.cssText,e.appendChild(n)}))},S=t?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const n of t.cssRules)e+=n.cssText;return o(e)})(t):t;export{s as CSSResult,i as adoptStyles,r as css,S as getCompatibleStyle,t as supportsAdoptingStyleSheets,o as unsafeCSS};
//# sourceMappingURL=css-tag.js.map

5

development/css-tag.js

@@ -99,2 +99,7 @@ /**

const style = document.createElement('style');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const nonce = window['litNonce'];
if (nonce !== undefined) {
style.setAttribute('nonce', nonce);
}
style.textContent = s.cssText;

@@ -101,0 +106,0 @@ renderRoot.appendChild(style);

1

development/polyfill-support.d.ts

@@ -40,2 +40,3 @@ /**

}
declare var DEV_MODE: boolean;
//# sourceMappingURL=polyfill-support.d.ts.map

7

development/polyfill-support.js

@@ -8,4 +8,9 @@ "use strict";

var _a;
var _b;
var SCOPED = '__scoped';
(_a = globalThis.reactiveElementPlatformSupport) !== null && _a !== void 0 ? _a : (globalThis.reactiveElementPlatformSupport = function (_a) {
// Note, explicitly use `var` here so that this can be re-defined when
// bundled.
// eslint-disable-next-line no-var
var DEV_MODE = true;
(_a = globalThis[_b = "reactiveElementPolyfillSupport" + (DEV_MODE ? "DevMode" : "")]) !== null && _a !== void 0 ? _a : (globalThis[_b] = function (_a) {
var ReactiveElement = _a.ReactiveElement;

@@ -12,0 +17,0 @@ // polyfill-support is only needed if ShadyCSS or the ApplyShim is in use

93

development/reactive-element.d.ts

@@ -20,3 +20,3 @@ /**

/**
* Function called to convert an attribute value to a property
* Called to convert an attribute value to a property
* value.

@@ -26,3 +26,3 @@ */

/**
* Function called to convert a property value to an attribute
* Called to convert a property value to an attribute
* value.

@@ -130,3 +130,3 @@ *

/**
* A string representing one of the supported dev mode warnings classes.
* A string representing one of the supported dev mode warning categories.
*/

@@ -143,3 +143,3 @@ export declare type WarningKind = 'change-in-update' | 'migration';

/**
* Read or set all the enabled warning kinds for this class.
* Read or set all the enabled warning categories for this class.
*

@@ -153,3 +153,3 @@ * This property is only used in development builds.

/**
* Enable the given warning kind for this class.
* Enable the given warning category for this class.
*

@@ -160,6 +160,6 @@ * This method only exists in development builds, so it should be accessed

* ```ts
* // Enable for all ReactiveElement classes
* // Enable for all ReactiveElement subclasses
* ReactiveElement.enableWarning.?('migration');
*
* // Enable for all MyElement only
* // Enable for only MyElement and subclasses
* MyElement.enableWarning.?('migration');

@@ -173,3 +173,3 @@ * ```

/**
* Disable the given warning kind for this class.
* Disable the given warning category for this class.
*

@@ -180,6 +180,6 @@ * This method only exists in development builds, so it should be accessed

* ```ts
* // Disable for all ReactiveElement classes
* // Disable for all ReactiveElement subclasses
* ReactiveElement.disableWarning.?('migration');
*
* // Disable for all MyElement only
* // Disable for only MyElement and subclasses
* MyElement.disableWarning.?('migration');

@@ -193,2 +193,32 @@ * ```

/**
* Adds an initializer function to the class that is called during instance
* construction.
*
* This is useful for code that runs against a `ReactiveElement`
* subclass, such as a decorator, that needs to do work for each
* instance, such as setting up a `ReactiveController`.
*
* ```ts
* const myDecorator = (target: typeof ReactiveElement, key: string) => {
* target.addInitializer((instance: ReactiveElement) => {
* // This is run during construction of the element
* new MyController(instance);
* });
* }
* ```
*
* Decorating a field will then cause each instance to run an initializer
* that adds a controller:
*
* ```ts
* class MyElement extends LitElement {
* @myDecorator foo;
* }
* ```
*
* Initializers are stored per-constructor. Adding an initializer to a
* subclass does not add it to a superclass. Since initializers are run in
* constructors, initializers will run in order of the class hierarchy,
* starting with superclasses and progressing to the instance's class.
*
* @nocollapse

@@ -251,3 +281,23 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the [[`css`]] tag function or via constructible stylesheets.
* using the [[`css`]] tag function, via constructible stylesheets, or
* imported from native CSS module scripts.
*
* Note on Content Security Policy:
*
* Element styles are implemented with `<style>` tags when the browser doesn't
* support adopted StyleSheets. To use such `<style>` tags with the style-src
* CSP directive, the style-src value must either include 'unsafe-inline' or
* 'nonce-<base64-value>' with <base64-value> replaced be a server-generated
* nonce.
*
* To provide a nonce to use on generated <style> elements, set
* `window.litNonce` to a server-generated nonce in your page's HTML, before
* loading application code:
*
* ```html
* <script>
* // Generated and unique per request:
* window.litNonce = 'a1b2c3d4';
* </script>
* ```
* @nocollapse

@@ -265,3 +315,3 @@ * @category styles

* Creates a property accessor on the element prototype if one does not exist
* and stores a PropertyDeclaration for the property with the given options.
* and stores a `PropertyDeclaration` for the property with the given options.
* The property setter calls the property's `hasChanged` property option

@@ -325,3 +375,3 @@ * or uses a strict identity check to determine whether or not to request

* Returns the property options associated with the given property.
* These options are defined with a PropertyDeclaration via the `properties`
* These options are defined with a `PropertyDeclaration` via the `properties`
* object or the `@property` decorator and are registered in

@@ -331,3 +381,3 @@ * `createProperty(...)`.

* Note, this method should be considered "final" and not overridden. To
* customize the options for a given property, override `createProperty`.
* customize the options for a given property, override [[`createProperty`]].
*

@@ -386,2 +436,4 @@ * @nocollapse

/**
* True if there is a pending update as a result of calling `requestUpdate()`.
* Should only be read.
* @category updates

@@ -391,2 +443,4 @@ */

/**
* Is set to `true` after the first update. The element code cannot assume
* that `renderRoot` exists before the element `hasUpdated`.
* @category updates

@@ -409,2 +463,8 @@ */

/**
* Registers a `ReactiveController` to participate in the element's reactive
* update cycle. The element automatically calls into any registered
* controllers during its lifecycle callbacks.
*
* If the element is connected when `addController()` is called, the
* controller's `hostConnected()` callback will be immediately called.
* @category controllers

@@ -414,2 +474,3 @@ */

/**
* Removes a `ReactiveController` from the element.
* @category controllers

@@ -508,3 +569,3 @@ */

*
* Call performUpdate() to immediately process a pending update. This should
* Call `performUpdate()` to immediately process a pending update. This should
* generally not be needed, but it can be done in rare cases when you need to

@@ -570,3 +631,3 @@ * update synchronously.

/**
* Controls whether or not `update` should be called when the element requests
* Controls whether or not `update()` should be called when the element requests
* an update. By default, this method always returns `true`, but this can be

@@ -573,0 +634,0 @@ * customized to control when to update.

62

development/reactive-element.js

@@ -31,5 +31,6 @@ /**

issueWarning('dev-mode', `Lit is in dev mode. Not recommended for production!`);
// Issue platform support warning.
// Issue polyfill support warning.
if (((_b = window.ShadyDOM) === null || _b === void 0 ? void 0 : _b.inUse) &&
globalThis.reactiveElementPlatformSupport === undefined) {
globalThis[`reactiveElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`] ===
undefined) {
issueWarning('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +

@@ -130,2 +131,4 @@ `the \`polyfill-support\` module has not been loaded.`);

/**
* True if there is a pending update as a result of calling `requestUpdate()`.
* Should only be read.
* @category updates

@@ -135,2 +138,4 @@ */

/**
* Is set to `true` after the first update. The element code cannot assume
* that `renderRoot` exists before the element `hasUpdated`.
* @category updates

@@ -146,2 +151,32 @@ */

/**
* Adds an initializer function to the class that is called during instance
* construction.
*
* This is useful for code that runs against a `ReactiveElement`
* subclass, such as a decorator, that needs to do work for each
* instance, such as setting up a `ReactiveController`.
*
* ```ts
* const myDecorator = (target: typeof ReactiveElement, key: string) => {
* target.addInitializer((instance: ReactiveElement) => {
* // This is run during construction of the element
* new MyController(instance);
* });
* }
* ```
*
* Decorating a field will then cause each instance to run an initializer
* that adds a controller:
*
* ```ts
* class MyElement extends LitElement {
* @myDecorator foo;
* }
* ```
*
* Initializers are stored per-constructor. Adding an initializer to a
* subclass does not add it to a superclass. Since initializers are run in
* constructors, initializers will run in order of the class hierarchy,
* starting with superclasses and progressing to the instance's class.
*
* @nocollapse

@@ -176,3 +211,3 @@ */

* Creates a property accessor on the element prototype if one does not exist
* and stores a PropertyDeclaration for the property with the given options.
* and stores a `PropertyDeclaration` for the property with the given options.
* The property setter calls the property's `hasChanged` property option

@@ -268,3 +303,3 @@ * or uses a strict identity check to determine whether or not to request

* Returns the property options associated with the given property.
* These options are defined with a PropertyDeclaration via the `properties`
* These options are defined with a `PropertyDeclaration` via the `properties`
* object or the `@property` decorator and are registered in

@@ -274,3 +309,3 @@ * `createProperty(...)`.

* Note, this method should be considered "final" and not overridden. To
* customize the options for a given property, override `createProperty`.
* customize the options for a given property, override [[`createProperty`]].
*

@@ -398,2 +433,8 @@ * @nocollapse

/**
* Registers a `ReactiveController` to participate in the element's reactive
* update cycle. The element automatically calls into any registered
* controllers during its lifecycle callbacks.
*
* If the element is connected when `addController()` is called, the
* controller's `hostConnected()` callback will be immediately called.
* @category controllers

@@ -413,2 +454,3 @@ */

/**
* Removes a `ReactiveController` from the element.
* @category controllers

@@ -654,3 +696,3 @@ */

*
* Call performUpdate() to immediately process a pending update. This should
* Call `performUpdate()` to immediately process a pending update. This should
* generally not be needed, but it can be done in rare cases when you need to

@@ -806,3 +848,3 @@ * update synchronously.

/**
* Controls whether or not `update` should be called when the element requests
* Controls whether or not `update()` should be called when the element requests
* an update. By default, this method always returns `true`, but this can be

@@ -889,3 +931,5 @@ * customized to control when to update.

// Apply polyfills if available
(_c = globalThis.reactiveElementPlatformSupport) === null || _c === void 0 ? void 0 : _c.call(globalThis, { ReactiveElement });
(_c = globalThis[`reactiveElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`]) === null || _c === void 0 ? void 0 : _c.call(globalThis, {
ReactiveElement,
});
// Dev mode warnings...

@@ -917,3 +961,3 @@ if (DEV_MODE) {

// TODO(justinfagnani): inject version number at build time
((_d = globalThis.reactiveElementVersions) !== null && _d !== void 0 ? _d : (globalThis.reactiveElementVersions = [])).push('1.0.0-rc.4');
((_d = globalThis.reactiveElementVersions) !== null && _d !== void 0 ? _d : (globalThis.reactiveElementVersions = [])).push('1.0.0');
if (DEV_MODE && globalThis.reactiveElementVersions.length > 1) {

@@ -920,0 +964,0 @@ issueWarning('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +

2

package.json
{
"name": "@lit/reactive-element",
"version": "1.0.0-rc.4",
"version": "1.0.0",
"publishConfig": {

@@ -5,0 +5,0 @@ "access": "public"

1

polyfill-support.d.ts

@@ -40,2 +40,3 @@ /**

}
declare var DEV_MODE: boolean;
//# sourceMappingURL=polyfill-support.d.ts.map

2

polyfill-support.js

@@ -6,3 +6,3 @@ !function(i){"function"==typeof define&&define.amd?define(i):i()}((function(){"use strict";

* SPDX-License-Identifier: BSD-3-Clause
*/var i,n="__scoped";null!==(i=globalThis.reactiveElementPlatformSupport)&&void 0!==i||(globalThis.reactiveElementPlatformSupport=function(i){var t=i.ReactiveElement;if(void 0!==window.ShadyCSS&&(!window.ShadyCSS.nativeShadow||window.ShadyCSS.ApplyShim)){var o=t.prototype;window.ShadyDOM&&window.ShadyDOM.inUse&&!0===window.ShadyDOM.noPatch&&window.ShadyDOM.patchElementProto(o);var d=o.createRenderRoot;o.createRenderRoot=function(){var i,t,o,w=this.localName;if(window.ShadyCSS.nativeShadow)return d.call(this);if(!this.constructor.hasOwnProperty(n)){this.constructor[n]=!0;var s=this.constructor.elementStyles.map((function(i){return i instanceof CSSStyleSheet?Array.from(i.cssRules).reduce((function(i,n){return i+n.cssText}),""):i.cssText}));null===(t=null===(i=window.ShadyCSS)||void 0===i?void 0:i.ScopingShim)||void 0===t||t.prepareAdoptedCssText(s,w),void 0===this.constructor._$AJ&&window.ShadyCSS.prepareTemplateStyles(document.createElement("template"),w)}return null!==(o=this.shadowRoot)&&void 0!==o?o:this.attachShadow(this.constructor.shadowRootOptions)};var w=o.connectedCallback;o.connectedCallback=function(){w.call(this),this.hasUpdated&&window.ShadyCSS.styleElement(this)};var s=o._$AE;o._$AE=function(i){this.hasUpdated||window.ShadyCSS.styleElement(this),s.call(this,i)}}})}));
*/var i,n="__scoped";null!==(i=globalThis.reactiveElementPolyfillSupport)&&void 0!==i||(globalThis.reactiveElementPolyfillSupport=function(i){var t=i.ReactiveElement;if(void 0!==window.ShadyCSS&&(!window.ShadyCSS.nativeShadow||window.ShadyCSS.ApplyShim)){var o=t.prototype;window.ShadyDOM&&window.ShadyDOM.inUse&&!0===window.ShadyDOM.noPatch&&window.ShadyDOM.patchElementProto(o);var d=o.createRenderRoot;o.createRenderRoot=function(){var i,t,o,w=this.localName;if(window.ShadyCSS.nativeShadow)return d.call(this);if(!this.constructor.hasOwnProperty(n)){this.constructor[n]=!0;var s=this.constructor.elementStyles.map((function(i){return i instanceof CSSStyleSheet?Array.from(i.cssRules).reduce((function(i,n){return i+n.cssText}),""):i.cssText}));null===(t=null===(i=window.ShadyCSS)||void 0===i?void 0:i.ScopingShim)||void 0===t||t.prepareAdoptedCssText(s,w),void 0===this.constructor._$AJ&&window.ShadyCSS.prepareTemplateStyles(document.createElement("template"),w)}return null!==(o=this.shadowRoot)&&void 0!==o?o:this.attachShadow(this.constructor.shadowRootOptions)};var w=o.connectedCallback;o.connectedCallback=function(){w.call(this),this.hasUpdated&&window.ShadyCSS.styleElement(this)};var s=o._$AE;o._$AE=function(i){this.hasUpdated||window.ShadyCSS.styleElement(this),s.call(this,i)}}})}));
//# sourceMappingURL=polyfill-support.js.map

93

reactive-element.d.ts

@@ -20,3 +20,3 @@ /**

/**
* Function called to convert an attribute value to a property
* Called to convert an attribute value to a property
* value.

@@ -26,3 +26,3 @@ */

/**
* Function called to convert a property value to an attribute
* Called to convert a property value to an attribute
* value.

@@ -130,3 +130,3 @@ *

/**
* A string representing one of the supported dev mode warnings classes.
* A string representing one of the supported dev mode warning categories.
*/

@@ -143,3 +143,3 @@ export declare type WarningKind = 'change-in-update' | 'migration';

/**
* Read or set all the enabled warning kinds for this class.
* Read or set all the enabled warning categories for this class.
*

@@ -153,3 +153,3 @@ * This property is only used in development builds.

/**
* Enable the given warning kind for this class.
* Enable the given warning category for this class.
*

@@ -160,6 +160,6 @@ * This method only exists in development builds, so it should be accessed

* ```ts
* // Enable for all ReactiveElement classes
* // Enable for all ReactiveElement subclasses
* ReactiveElement.enableWarning.?('migration');
*
* // Enable for all MyElement only
* // Enable for only MyElement and subclasses
* MyElement.enableWarning.?('migration');

@@ -173,3 +173,3 @@ * ```

/**
* Disable the given warning kind for this class.
* Disable the given warning category for this class.
*

@@ -180,6 +180,6 @@ * This method only exists in development builds, so it should be accessed

* ```ts
* // Disable for all ReactiveElement classes
* // Disable for all ReactiveElement subclasses
* ReactiveElement.disableWarning.?('migration');
*
* // Disable for all MyElement only
* // Disable for only MyElement and subclasses
* MyElement.disableWarning.?('migration');

@@ -193,2 +193,32 @@ * ```

/**
* Adds an initializer function to the class that is called during instance
* construction.
*
* This is useful for code that runs against a `ReactiveElement`
* subclass, such as a decorator, that needs to do work for each
* instance, such as setting up a `ReactiveController`.
*
* ```ts
* const myDecorator = (target: typeof ReactiveElement, key: string) => {
* target.addInitializer((instance: ReactiveElement) => {
* // This is run during construction of the element
* new MyController(instance);
* });
* }
* ```
*
* Decorating a field will then cause each instance to run an initializer
* that adds a controller:
*
* ```ts
* class MyElement extends LitElement {
* @myDecorator foo;
* }
* ```
*
* Initializers are stored per-constructor. Adding an initializer to a
* subclass does not add it to a superclass. Since initializers are run in
* constructors, initializers will run in order of the class hierarchy,
* starting with superclasses and progressing to the instance's class.
*
* @nocollapse

@@ -251,3 +281,23 @@ */

* Array of styles to apply to the element. The styles should be defined
* using the [[`css`]] tag function or via constructible stylesheets.
* using the [[`css`]] tag function, via constructible stylesheets, or
* imported from native CSS module scripts.
*
* Note on Content Security Policy:
*
* Element styles are implemented with `<style>` tags when the browser doesn't
* support adopted StyleSheets. To use such `<style>` tags with the style-src
* CSP directive, the style-src value must either include 'unsafe-inline' or
* 'nonce-<base64-value>' with <base64-value> replaced be a server-generated
* nonce.
*
* To provide a nonce to use on generated <style> elements, set
* `window.litNonce` to a server-generated nonce in your page's HTML, before
* loading application code:
*
* ```html
* <script>
* // Generated and unique per request:
* window.litNonce = 'a1b2c3d4';
* </script>
* ```
* @nocollapse

@@ -265,3 +315,3 @@ * @category styles

* Creates a property accessor on the element prototype if one does not exist
* and stores a PropertyDeclaration for the property with the given options.
* and stores a `PropertyDeclaration` for the property with the given options.
* The property setter calls the property's `hasChanged` property option

@@ -325,3 +375,3 @@ * or uses a strict identity check to determine whether or not to request

* Returns the property options associated with the given property.
* These options are defined with a PropertyDeclaration via the `properties`
* These options are defined with a `PropertyDeclaration` via the `properties`
* object or the `@property` decorator and are registered in

@@ -331,3 +381,3 @@ * `createProperty(...)`.

* Note, this method should be considered "final" and not overridden. To
* customize the options for a given property, override `createProperty`.
* customize the options for a given property, override [[`createProperty`]].
*

@@ -386,2 +436,4 @@ * @nocollapse

/**
* True if there is a pending update as a result of calling `requestUpdate()`.
* Should only be read.
* @category updates

@@ -391,2 +443,4 @@ */

/**
* Is set to `true` after the first update. The element code cannot assume
* that `renderRoot` exists before the element `hasUpdated`.
* @category updates

@@ -409,2 +463,8 @@ */

/**
* Registers a `ReactiveController` to participate in the element's reactive
* update cycle. The element automatically calls into any registered
* controllers during its lifecycle callbacks.
*
* If the element is connected when `addController()` is called, the
* controller's `hostConnected()` callback will be immediately called.
* @category controllers

@@ -414,2 +474,3 @@ */

/**
* Removes a `ReactiveController` from the element.
* @category controllers

@@ -508,3 +569,3 @@ */

*
* Call performUpdate() to immediately process a pending update. This should
* Call `performUpdate()` to immediately process a pending update. This should
* generally not be needed, but it can be done in rare cases when you need to

@@ -570,3 +631,3 @@ * update synchronously.

/**
* Controls whether or not `update` should be called when the element requests
* Controls whether or not `update()` should be called when the element requests
* an update. By default, this method always returns `true`, but this can be

@@ -573,0 +634,0 @@ * customized to control when to update.

2

reactive-element.js

@@ -6,3 +6,3 @@ import{getCompatibleStyle as t,adoptStyles as i}from"./css-tag.js";export{CSSResult,adoptStyles,css,getCompatibleStyle,supportsAdoptingStyleSheets,unsafeCSS}from"./css-tag.js";

* SPDX-License-Identifier: BSD-3-Clause
*/var s,e;const r={toAttribute(t,i){switch(i){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},h=(t,i)=>i!==t&&(i==i||t==t),o={attribute:!0,type:String,converter:r,reflect:!1,hasChanged:h};class n extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Eh(s,i);void 0!==e&&(this._$Eu.set(e,s),t.push(e))})),t}static createProperty(t,i=o){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,i,s){return{get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||o}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._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(t(i))}else void 0!==i&&s.push(t(i));return s}static _$Eh(t,i){const s=i.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Ep(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,s;(null!==(i=this._$Em)&&void 0!==i?i:this._$Em=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var i;null===(i=this._$Em)||void 0===i||i.splice(this._$Em.indexOf(t)>>>0,1)}_$Ep(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i])}))}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,s){this._$AK(t,s)}_$Eg(t,i,s=o){var e,h;const n=this.constructor._$Eh(t,s);if(void 0!==n&&!0===s.reflect){const o=(null!==(h=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==h?h:r.toAttribute)(i,s.type);this._$Ei=t,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Ei=null}}_$AK(t,i){var s,e,h;const o=this.constructor,n=o._$Eu.get(t);if(void 0!==n&&this._$Ei!==n){const t=o.getPropertyOptions(n),l=t.converter,a=null!==(h=null!==(e=null===(s=l)||void 0===s?void 0:s.fromAttribute)&&void 0!==e?e:"function"==typeof l?l:null)&&void 0!==h?h:r.fromAttribute;this._$Ei=n,this[n]=a(i,t.type),this._$Ei=null}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||h)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$ES&&(this._$ES=new Map),this._$ES.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$Ev=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$ET()}catch(t){throw i=!1,this._$ET(),t}i&&this._$AE(s)}willUpdate(t){}_$AE(t){var i;null===(i=this._$Em)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$ET(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return!0}update(t){void 0!==this._$ES&&(this._$ES.forEach(((t,i)=>this._$Eg(i,this[i],t))),this._$ES=void 0),this._$ET()}updated(t){}firstUpdated(t){}}n.finalized=!0,n.elementProperties=new Map,n.elementStyles=[],n.shadowRootOptions={mode:"open"},null===(s=globalThis.reactiveElementPlatformSupport)||void 0===s||s.call(globalThis,{ReactiveElement:n}),(null!==(e=globalThis.reactiveElementVersions)&&void 0!==e?e:globalThis.reactiveElementVersions=[]).push("1.0.0-rc.4");export{n as ReactiveElement,r as defaultConverter,h as notEqual};
*/var s,e;const r={toAttribute(t,i){switch(i){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},h=(t,i)=>i!==t&&(i==i||t==t),o={attribute:!0,type:String,converter:r,reflect:!1,hasChanged:h};class n extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Eh(s,i);void 0!==e&&(this._$Eu.set(e,s),t.push(e))})),t}static createProperty(t,i=o){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,i,s){return{get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||o}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._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(t(i))}else void 0!==i&&s.push(t(i));return s}static _$Eh(t,i){const s=i.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Ep(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,s;(null!==(i=this._$Em)&&void 0!==i?i:this._$Em=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var i;null===(i=this._$Em)||void 0===i||i.splice(this._$Em.indexOf(t)>>>0,1)}_$Ep(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i])}))}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,s){this._$AK(t,s)}_$Eg(t,i,s=o){var e,h;const n=this.constructor._$Eh(t,s);if(void 0!==n&&!0===s.reflect){const o=(null!==(h=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==h?h:r.toAttribute)(i,s.type);this._$Ei=t,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Ei=null}}_$AK(t,i){var s,e,h;const o=this.constructor,n=o._$Eu.get(t);if(void 0!==n&&this._$Ei!==n){const t=o.getPropertyOptions(n),l=t.converter,a=null!==(h=null!==(e=null===(s=l)||void 0===s?void 0:s.fromAttribute)&&void 0!==e?e:"function"==typeof l?l:null)&&void 0!==h?h:r.fromAttribute;this._$Ei=n,this[n]=a(i,t.type),this._$Ei=null}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||h)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$ES&&(this._$ES=new Map),this._$ES.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$Ev=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$Em)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$ET()}catch(t){throw i=!1,this._$ET(),t}i&&this._$AE(s)}willUpdate(t){}_$AE(t){var i;null===(i=this._$Em)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$ET(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return!0}update(t){void 0!==this._$ES&&(this._$ES.forEach(((t,i)=>this._$Eg(i,this[i],t))),this._$ES=void 0),this._$ET()}updated(t){}firstUpdated(t){}}n.finalized=!0,n.elementProperties=new Map,n.elementStyles=[],n.shadowRootOptions={mode:"open"},null===(s=globalThis.reactiveElementPolyfillSupport)||void 0===s||s.call(globalThis,{ReactiveElement:n}),(null!==(e=globalThis.reactiveElementVersions)&&void 0!==e?e:globalThis.reactiveElementVersions=[]).push("1.0.0");export{n as ReactiveElement,r as defaultConverter,h as notEqual};
//# sourceMappingURL=reactive-element.js.map

78

README.md

@@ -1,2 +0,2 @@

# ReactiveElement 1.0 Pre-release
# ReactiveElement 1.0

@@ -8,16 +8,10 @@ [![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)

## 🚨 About this pre-release
# ReactiveElement
This is a major version pre-release of ReactiveElement 1.0. This package
has been migrated out of LitElement. See issue
[#1077](https://github.com/Polymer/lit-element/issues/1077) for more info.
A simple low level base class for creating fast, lightweight web components.
This pre-release is not yet feature complete or API stable.
## About this release
<hr>
This is a stable release of `@lit/reactive-element` 1.0.0 (part of the Lit 2.0 release). If upgrading from previous versions of `UpdatingElement`, please see the [Upgrade Guide](https://lit.dev/docs/releases/upgrade/).
# ReactiveElement
A simple low level base class for creating fast, lightweight web components.
## Documentation

@@ -86,4 +80,2 @@

From inside your project folder, run:
```bash

@@ -93,66 +85,10 @@ $ npm install @lit/reactive-element

To install the web components polyfills needed for older browsers:
Or use from `lit`:
```bash
$ npm i -D @webcomponents/webcomponentsjs
$ npm install lit
```
## Development mode
`@lit/reactive-element` includes a development mode which adds additional checks that are
reported in the console.
To enable development mode, add the `development` exports condition to your node
resolve configuration.
#### @web/dev-server
```js
{
nodeResolve: {
exportConditions: ['development'],
}
}
```
#### Rollup
```js
{
plugins: [
nodeResolve({
exportConditions: ['development'],
}),
],
}
```
#### Webpack
> NOTE: Requires [Webpack v5](https://webpack.js.org/migrate/5/)
```js
{
resolve: {
conditionNames: ['development'],
}
}
```
## Supported Browsers
The last 2 versions of all modern browsers are supported, including
Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.
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).
css-tag.d.ts.map

Sorry, the diff of this file is not supported yet

css-tag.js.map

Sorry, the diff of this file is not supported yet

development/css-tag.d.ts.map

Sorry, the diff of this file is not supported yet

development/css-tag.js.map

Sorry, the diff of this file is not supported yet

development/polyfill-support.d.ts.map

Sorry, the diff of this file is not supported yet

development/polyfill-support.js.map

Sorry, the diff of this file is not supported yet

development/reactive-element.d.ts.map

Sorry, the diff of this file is not supported yet

development/reactive-element.js.map

Sorry, the diff of this file is not supported yet

polyfill-support.d.ts.map

Sorry, the diff of this file is not supported yet

polyfill-support.js.map

Sorry, the diff of this file is not supported yet

reactive-element.d.ts.map

Sorry, the diff of this file is not supported yet

reactive-element.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc