lit-element - npm Package Compare versions

Comparing version 3.0.0-rc.1 to 3.0.0-rc.2

CHANGELOG.md

@@ -20,2 +20,10 @@ # Change Log
 
+## 3.0.0-rc.2 - 2021-05-07
+
+### Fixed
+
+- (Since 3.0.0-rc.1) Improves support for customizing `observedAttributes` by
+  ensuring that `ReactiveElement.observedAttributes` is callable, allowing
+  mixins to directly reference it ([#1835](https://github.com/Polymer/lit-element/issues/#1835)).
+
 ## 3.0.0-rc.1 - 2021-04-20
@@ -22,0 +30,0 @@

development/lit-element.js

@@ -62,3 +62,3 @@ /**
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-((_a = (_f = globalThis)['litElementVersions']) !== null && _a !== void 0 ? _a : (_f['litElementVersions'] = [])).push('3.0.0-rc.1');
+((_a = (_f = globalThis)['litElementVersions']) !== null && _a !== void 0 ? _a : (_f['litElementVersions'] = [])).push('3.0.0-rc.2');
 /**
@@ -113,3 +113,3 @@ * Base element class that manages element properties and attributes, and
     // do not thrash directive callbacks
-    // https://github.com/Polymer/lit-html/issues/1457
+    // https://github.com/lit/lit/issues/1457
     /**
@@ -174,3 +174,3 @@ * @category lifecycle
                 // TODO(sorvell): add link to changelog when location has stabilized.
-                // + See the changelog at https://github.com/Polymer/lit-html/blob/main/packages/lit-element/CHANGELOG.md`
+                // + See the changelog at https://github.com/lit/lit/blob/main/packages/lit-element/CHANGELOG.md`
                 );
@@ -177,0 +177,0 @@ }

lit-element.js

@@ -6,3 +6,3 @@ import{ReactiveElement as t}from"@lit/reactive-element";export*from"@lit/reactive-element";import{render as e,noChange as r}from"lit-html";export*from"lit-html";
  * SPDX-License-Identifier: BSD-3-Clause
- */var i,l,o,s,n,a;const c=t;(null!==(i=(a=globalThis).litElementVersions)&&void 0!==i?i:a.litElementVersions=[]).push("3.0.0-rc.1");class h extends t{constructor(){super(...arguments),this.renderOptions={host:this},this.Φt=void 0}createRenderRoot(){var t,e;const r=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=r.firstChild),r}update(t){const r=this.render();super.update(t),this.Φt=e(r,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!1)}render(){return r}}h.finalized=!0,h._$litElement$=!0,null===(o=(l=globalThis).litElementHydrateSupport)||void 0===o||o.call(l,{LitElement:h}),null===(n=(s=globalThis).litElementPlatformSupport)||void 0===n||n.call(s,{LitElement:h});const u={K:(t,e,r)=>{t.K(e,r)},L:t=>t.L};export{h as LitElement,c as UpdatingElement,u as _Φ};
+ */var i,l,o,s,n,a;const c=t;(null!==(i=(a=globalThis).litElementVersions)&&void 0!==i?i:a.litElementVersions=[]).push("3.0.0-rc.2");class h extends t{constructor(){super(...arguments),this.renderOptions={host:this},this.Φt=void 0}createRenderRoot(){var t,e;const r=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=r.firstChild),r}update(t){const r=this.render();super.update(t),this.Φt=e(r,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!1)}render(){return r}}h.finalized=!0,h._$litElement$=!0,null===(o=(l=globalThis).litElementHydrateSupport)||void 0===o||o.call(l,{LitElement:h}),null===(n=(s=globalThis).litElementPlatformSupport)||void 0===n||n.call(s,{LitElement:h});const u={K:(t,e,r)=>{t.K(e,r)},L:t=>t.L};export{h as LitElement,c as UpdatingElement,u as _Φ};
 //# sourceMappingURL=lit-element.js.map

package.json

 {
   "name": "lit-element",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.2",
   "publishConfig": {
@@ -84,4 +84,4 @@ "access": "public"
   "dependencies": {
-    "@lit/reactive-element": "^1.0.0-rc.1",
-    "lit-html": "^2.0.0-rc.1"
+    "@lit/reactive-element": "^1.0.0-rc.2",
+    "lit-html": "^2.0.0-rc.3"
   },
@@ -88,0 +88,0 @@ "devDependencies": {

README.md

@@ -1,171 +0,22 @@
-# LitElement 3.0 Pre-release
+# LitElement 3.0 Release Candidate
 
-[![Build Status](https://github.com/polymer/lit-html/workflows/Tests/badge.svg)](https://github.com/Polymer/lit-html/actions?query=workflow%3ATests)
-[![Published on npm](https://img.shields.io/npm/v/lit-element/next-major)](https://www.npmjs.com/package/lit-html)
+A simple base class for creating fast, lightweight web components.
+
+[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
+[![Published on npm](https://img.shields.io/npm/v/lit-element/next)](https://www.npmjs.com/package/lit-element)
 [![Join our Slack](https://img.shields.io/badge/slack-join%20chat-4a154b.svg)](https://www.polymer-project.org/slack-invite)
 [![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)
 
-## 🚨 About this pre-release
+LitElement is the base class that powers the [Lit](https://lit.dev) library for building fast web components.
 
-This is a major version pre-release of LitElement 3.0. See issue
-[#1077](https://github.com/Polymer/lit-element/issues/1077) for the full list of
-changes planned/considered for this release.
+## About this release
 
-This pre-release is not yet feature complete or API stable. Please note the
-breaking changes, known issues, and limitations below, and use at your risk
-until the stable release is available. Issues are welcome
-for unexpected changes not noted below or in the changelog.
+This release candidate of lit-element 3.0 is intended to be feature complete and API stable. Please note the minor breaking changes from lit-element 2.0 in the [lit.dev upgrade guide](https://lit.dev/docs/releases/upgrade/).
 
-## 🚨 Breaking changes
-
-While `LitElement` 3.0 is intended to be a mostly backward-compatible change for the
-majority of 2.x users, please be aware of the following notable breaking
-changes:
-
-- This `LitElement` pre-release uses the `lit-html` pre-release as well.
-  Please see the `lit-html` pre-release [README](../lit-html/README.md) and
-  [changelog](../lit-html/CHANGELOG.md#200-pre1---2020-09-21) for information on
-  any breaking changes to `lit-html` features in your components.
-- Decorators are no longer exported from the top-level `lit-element` module.
-  Instead, import any decorators you use from `lit-element/decorators/*`.
-- `requestUpdate()` no longer returns a Promise. Instead await the
-  `updateComplete` Promise.
-
-See the full [changelog](CHANGELOG.md#300-pre1---2020-09-21) for more details on
-these and other minor breaking changes.
-
-<hr>
-
-# LitElement
-
-A simple base class for creating fast, lightweight web components with [lit-html](https://lit-html.polymer-project.org/).
-
 ## Documentation
 
-Full documentation is available at [lit-element.polymer-project.org](https://lit-element.polymer-project.org).
+Full documentation is available at [lit.dev](https://lit.dev).
 
-## Overview
-
-Note, the `LitElement` package has been replaced by the `lit` package. `LitElement` is provided only for backwards compatibility; when possible, users should upgrade to the `lit` package.
-
-LitElement uses [lit-html](https://lit-html.polymer-project.org/) to render into the
-element's [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
-and adds API to help manage element properties and attributes. LitElement reacts to changes in properties
-and renders declaratively using `lit-html`. See the [lit-html guide](https://lit-html.polymer-project.org/guide)
-for additional information on how to create templates for lit-element.
-
-```ts
-import {LitElement, html, css} from 'lit-element';
-import {customElement, property} from 'lit-element/decorators.js';
-
-// This decorator defines the element.
-@customElement('my-element')
-export class MyElement extends LitElement {
-  // This decorator creates a property accessor that triggers rendering and
-  // an observed attribute.
-  @property()
-  mood = 'great';
-
-  static styles = css`
-    span {
-      color: green;
-    }
-  `;
-
-  // Render element DOM by returning a `lit-html` template.
-  render() {
-    return html`Web Components are <span>${this.mood}</span>!`;
-  }
-}
-```
-
-```html
-<my-element mood="awesome"></my-element>
-```
-
-Note, this example uses decorators to create properties. Decorators are a proposed
-standard currently available in [TypeScript](https://www.typescriptlang.org/) or [Babel](https://babeljs.io/docs/en/babel-plugin-proposal-decorators). LitElement also supports a [vanilla JavaScript method](https://lit-element.polymer-project.org/guide/properties#declare) of declaring reactive properties.
-
-## 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
-
-From inside your project folder, run:
-
-```bash
-$ npm install lit-element
-```
-
-To install the web components polyfills needed for older browsers:
-
-```bash
-$ npm i -D @webcomponents/webcomponentsjs
-```
-
-## Development mode
-
-lit-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](https://www.npmjs.com/package/@webcomponents/webcomponentsjs)
-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-element/polyfill-support.js"></script>
-<!-- load application code -->
-```
-
 ## Contributing
 
 Please see [CONTRIBUTING.md](./CONTRIBUTING.md).

src/lit-element.ts

@@ -70,3 +70,3 @@ /**
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-((globalThis as any)['litElementVersions'] ??= []).push('3.0.0-rc.1');
+((globalThis as any)['litElementVersions'] ??= []).push('3.0.0-rc.2');
 
@@ -132,3 +132,3 @@ /**
   // do not thrash directive callbacks
-  // https://github.com/Polymer/lit-html/issues/1457
+  // https://github.com/lit/lit/issues/1457
   /**
@@ -188,3 +188,3 @@ * @category lifecycle
           // TODO(sorvell): add link to changelog when location has stabilized.
-          // + See the changelog at https://github.com/Polymer/lit-html/blob/main/packages/lit-element/CHANGELOG.md`
+          // + See the changelog at https://github.com/lit/lit/blob/main/packages/lit-element/CHANGELOG.md`
         );
@@ -191,0 +191,0 @@ }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

New author

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

298391

decreased by-1.58%

Number of lines in readme file

23

decreased by-86.63%

Dependency changes

• Updated@lit/reactive-element@^1.0.0-rc.2

• Updatedlit-html@^2.0.0-rc.3