Fix references to @polymer/lit-element in docs and README (#427)

* Fix references to @polymer/lit-element in docs and README * Remove unneeded `old` folder in `docs`.
lit · Jan 11, 2019 · a990482 · a990482
1 parent 8c0fe1e
commit a990482
Show file tree

Hide file tree

Showing 186 changed files with 335 additions and 1,286 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 <!-- ### Fixed -->
 
 ## Unreleased
+### Fixed
+* Fix references to `@polymer/lit-element` in README and docs
 
 ## [2.0.0-rc.1] - 2019-01-10
 ### Changed

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # LitElement
 
-[![Published on npm](https://img.shields.io/npm/v/@polymer/lit-element.svg)](https://www.npmjs.com/package/lit-element)
+[![Published on npm](https://img.shields.io/npm/v/lit-element.svg)](https://www.npmjs.com/package/lit-element)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/lit-element)
 [![Mentioned in Awesome lit-html](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit-html)
 
@@ -84,7 +84,7 @@ for additional information on how to create templates for lit-element.
 
     1. Add LitElement to your project:
 
-        ```npm i @polymer/lit-element```
+        ```npm i lit-element```
 
     1. Install the webcomponents polyfill. If you're developing a reusable package, this should be a dev dependency which you load in your tests, demos, etc.
 
@@ -101,7 +101,7 @@ for additional information on how to create templates for lit-element.
 
         ```polymer serve```
 
-    > LitElement is published on [npm](https://www.npmjs.com/package/@polymer/lit-element) using JavaScript Modules.
+    > LitElement is published on [npm](https://www.npmjs.com/package/lit-element) using JavaScript Modules.
     This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
     >
     > However, since LitElement uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
@@ -121,7 +121,7 @@ into the element.
 ```html
   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script type="module">
-    import {LitElement, html} from '@polymer/lit-element';
+    import {LitElement, html} from 'lit-element';
 
     class MyElement extends LitElement {
 
@@ -230,7 +230,7 @@ Note, this example uses decorators to create properties. Decorators are a propos
 standard currently available in [TypeScript](https://www.typescriptlang.org/) or [Babel](https://babeljs.io/docs/en/babel-plugin-proposal-decorators).
 
 ```ts
-import {LitElement, html, property} from '@polymer/lit-element';
+import {LitElement, html, property} from 'lit-element';
 
 class MyElement extends LitElement {
 

diff --git a/docs/_api/api-readme.md b/docs/_api/api-readme.md
@@ -3,10 +3,10 @@
 
 # LitElement API Documentation
 
-## Install @polymer/lit-element
+## Install lit-element
 
 ```
-npm install --save @polymer/lit-element
+npm install --save lit-element
 ```
 
 ## Modules
@@ -18,7 +18,7 @@ Extends [UpdatingElement](#lib-updating-element) to include lit-html templating.
 Import `LitElement` and `html` from this module to create a component:
 
 ```js
-import { LitElement, html } from '@polymer/lit-element';
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {
@@ -32,7 +32,7 @@ customElements.define('my-element', MyElement);
 ### [lib/updating-element](/api/modules/_lib_updating_element_.html)
 
 ```js
-import { UpdatingElement } from '@polymer/lit-element/lib/updating-element.js';
+import { UpdatingElement } from 'lit-element/lib/updating-element.js';
 ```
 
 Custom Element base class that supports declaring observable properties, reflecting attributes to properties, and the core update lifecycle methods.
diff --git a/docs/_guide/index.md b/docs/_guide/index.md
@@ -11,22 +11,22 @@ title: Introduction
 
 LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.
 
-LitElement uses [lit-html](https://lit-html.polymer-project.org/) to render into shadow DOM, and adds API to manage properties and attributes. Properties are observed by default, and elements update asynchronously when their properties change. 
+LitElement uses [lit-html](https://lit-html.polymer-project.org/) to render into shadow DOM, and adds API to manage properties and attributes. Properties are observed by default, and elements update asynchronously when their properties change.
 
 To build an app out of LitElement components, check out [PWA Starter Kit](https://pwa-starter-kit.polymer-project.org/).
 
-## Quick start 
+## Quick start
 
 Install:
 
 ```bash
-npm install --save @polymer/lit-element
+npm install --save lit-element
 ```
 
 Import:
 
 ```js
-import { LitElement, html } from '@polymer/lit-element';
+import { LitElement, html } from 'lit-element';
 ```
 
 [Download a sample LitElement project](https://github.com/PolymerLabs/start-lit-element).

diff --git a/docs/_includes/projects/docs/create/manifest.json b/docs/_includes/projects/docs/create/manifest.json
@@ -8,7 +8,7 @@
   "description": "lit-element code sample",
   "template": "typescript",
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   }
 }
diff --git a/docs/_includes/projects/docs/create/my-element.js b/docs/_includes/projects/docs/create/my-element.js
@@ -1,21 +1,21 @@
 // Import the LitElement base class and html helper function
-import { LitElement, html } from '@polymer/lit-element';
+import { LitElement, html } from 'lit-element';
 
 // Extend the LitElement base class
 class MyElement extends LitElement {
 
   /**
    * Implement `render` to define a template for your element.
-   * 
+   *
    * You must provide an implementation of `render` for any element
    * that uses LitElement as a base class.
    */
   render(){
-    /** 
-     * `render` must return a lit-html `TemplateResult`. 
+    /**
+     * `render` must return a lit-html `TemplateResult`.
      *
      * To create a `TemplateResult`, tag a JavaScript template literal
-     * with the `html` helper function: 
+     * with the `html` helper function:
      */
     return html`
       <!-- template content -->

diff --git a/docs/_includes/projects/docs/renderroot/default-root.js b/docs/_includes/projects/docs/renderroot/default-root.js
@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element';
+import { LitElement, html } from 'lit-element';
 
 /**
  * This element renders its template into the default location:

diff --git a/docs/_includes/projects/docs/renderroot/light-dom.js b/docs/_includes/projects/docs/renderroot/light-dom.js
@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element';
+import { LitElement, html } from 'lit-element';
 
 /**
  * This element renders its template as light DOM children.
@@ -12,7 +12,7 @@ class LightDom extends LitElement {
   /**
    * To customize an element's render root, implement createRenderRoot. Return
    * the node into which to render the element's template.
-   * 
+   *
    * This element renders child nodes into its light DOM.
    */
   createRenderRoot(){

diff --git a/docs/_includes/projects/docs/renderroot/manifest.json b/docs/_includes/projects/docs/renderroot/manifest.json
@@ -9,7 +9,7 @@
   "description": "lit-element code sample",
   "template": "typescript",
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   }
 }
diff --git a/docs/_includes/projects/docs/style/before/manifest.json b/docs/_includes/projects/docs/style/before/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/before/my-element.js b/docs/_includes/projects/docs/style/before/my-element.js
@@ -3,7 +3,7 @@
  * Starting code for 6. Style
  */
 
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   static get properties() {
@@ -13,7 +13,7 @@ class MyElement extends LitElement {
       myBool: { type: Boolean }
     };
   }
-  
+
   constructor() {
     super();
     this.message='Hello world! From my-element';

diff --git a/docs/_includes/projects/docs/style/bestpracs/manifest.json b/docs/_includes/projects/docs/style/bestpracs/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/bestpracs/my-element.js b/docs/_includes/projects/docs/style/bestpracs/my-element.js
@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {

diff --git a/docs/_includes/projects/docs/style/customproperties/manifest.json b/docs/_includes/projects/docs/style/customproperties/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/customproperties/my-element.js b/docs/_includes/projects/docs/style/customproperties/my-element.js
@@ -1,11 +1,11 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {
     return html`
       <style>
         :host[hidden] { display: none; }
-        :host { display: block; 
+        :host { display: block;
           background-color: var(--myBackground, yellow);
           color: var(--myColor, black);
           padding: var(--myPadding, 8px);

diff --git a/docs/_includes/projects/docs/style/expressions/manifest.json b/docs/_includes/projects/docs/style/expressions/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/expressions/my-element.js b/docs/_includes/projects/docs/style/expressions/my-element.js
@@ -1,15 +1,15 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
-  render() { 
+  render() {
     return html`
       <style>${this.myStyles}</style>
       <p>hi world</p>
-    `; 
+    `;
+  }
+  get myStyles() {
+    return html`p { color: red }`;
   }
-  get myStyles() { 
-    return html`p { color: red }`; 
-  } 
 }
 
 customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/docs/style/host/manifest.json b/docs/_includes/projects/docs/style/host/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/host/my-element.js b/docs/_includes/projects/docs/style/host/my-element.js
@@ -1,12 +1,12 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {
     return html`
       <style>
         :host[hidden] { display: none; }
-        :host { 
-          display: block; 
+        :host {
+          display: block;
           font-family: Roboto;
           font-size: 20;
           color: blue;

diff --git a/docs/_includes/projects/docs/style/hostselector/manifest.json b/docs/_includes/projects/docs/style/hostselector/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/hostselector/my-element.js b/docs/_includes/projects/docs/style/hostselector/my-element.js
@@ -1,11 +1,11 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {
     return html`
       <style>
         :host[hidden] { display: none; }
-        :host { display: block; 
+        :host { display: block;
           border: 1px solid black;
         }
       </style>

diff --git a/docs/_includes/projects/docs/style/inherited/manifest.json b/docs/_includes/projects/docs/style/inherited/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/inherited/my-element.js b/docs/_includes/projects/docs/style/inherited/my-element.js
@@ -1,12 +1,12 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {
     return html`
       <style>
         :host[hidden] { display: none; }
-        :host { 
-          display: block; 
+        :host {
+          display: block;
           font-family: Roboto;
           font-size: 20;
           color: blue;

diff --git a/docs/_includes/projects/docs/style/inherited2/manifest.json b/docs/_includes/projects/docs/style/inherited2/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/inherited2/my-element.js b/docs/_includes/projects/docs/style/inherited2/my-element.js
@@ -1,4 +1,4 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {

diff --git a/docs/_includes/projects/docs/style/maindocument/manifest.json b/docs/_includes/projects/docs/style/maindocument/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"

diff --git a/docs/_includes/projects/docs/style/maindocument/my-element.js b/docs/_includes/projects/docs/style/maindocument/my-element.js
@@ -1,12 +1,12 @@
-import { LitElement, html } from '@polymer/lit-element'; 
+import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   render() {
     return html`
       <style>
         :host[hidden] { display: none; }
-        :host { 
-          display: block; 
+        :host {
+          display: block;
         }
         div {
           color: red;

diff --git a/docs/_includes/projects/docs/style/slotted/manifest.json b/docs/_includes/projects/docs/style/slotted/manifest.json
@@ -7,7 +7,7 @@
     "index.ts"
   ],
   "dependencies": {
-    "@polymer/lit-element": "latest",
+    "lit-element": "latest",
     "@webcomponents/webcomponentsjs": "latest"
   },
   "template": "typescript"