@polymer/iron-image - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

iron-image.js

@@ -10,2 +10,8 @@ /**
 */
+import '@polymer/polymer/polymer-legacy.js';
+
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+import {resolveUrl} from '@polymer/polymer/lib/utils/resolve-url.js';
+
 /**
@@ -68,12 +74,2 @@ `iron-image` is an element for displaying an image that provides useful sizing and
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-import '@polymer/polymer/polymer-legacy.js';
-
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { resolveUrl } from '@polymer/polymer/lib/utils/resolve-url.js';
 Polymer({
@@ -360,4 +356,3 @@ _template: html`
   _resolveSrc: function(testSrc) {
-    var resolved =
-        resolveUrl(testSrc, this.$.baseURIAnchor.href);
+    var resolved = resolveUrl(testSrc, this.$.baseURIAnchor.href);
     // NOTE: Use of `URL` was removed here because IE11 doesn't support
@@ -364,0 +359,0 @@ // constructing it. If this ends up being problematic, we should

package.json

@@ -15,23 +15,15 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
     "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21",
-    "@polymer/paper-styles": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
     "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "main": "iron-image.js",
@@ -38,0 +30,0 @@ "author": "The Polymer Authors",

README.md

@@ -0,70 +1,87 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-image.svg)](https://www.npmjs.com/package/@polymer/iron-image)
 [![Build status](https://travis-ci.org/PolymerElements/iron-image.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-image)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-image)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-image)_
-
-
 ## <iron-image>
 
-`iron-image` is an element for displaying an image that provides useful sizing and
-preloading options not found on the standard `<img>` tag.
+`iron-image` is an element for displaying an image that provides useful sizing
+and preloading options not found on the standard `<img>` tag.
 
-The `sizing` option allows the image to be either cropped (`cover`) or
-letterboxed (`contain`) to fill a fixed user-size placed on the element.
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-image),
+  [Demo](https://www.webcomponents.org/element/@polymer/iron-image/demo/demo/index.html).
 
-The `preload` option prevents the browser from rendering the image until the
-image is fully loaded.  In the interim, either the element's CSS `background-color`
-can be be used as the placeholder, or the `placeholder` property can be
-set to a URL (preferably a data-URI, for instant rendering) for an
-placeholder image.
+## Usage
 
-The `fade` option (only valid when `preload` is set) will cause the placeholder
-image/color to be faded out once the image is rendered.
+### Installation
 
-Examples:
+```
+npm install --save @polymer/iron-image
+```
 
-  Basically identical to `<img src="...">` tag:
+### In an HTML file
 
 ```html
-<iron-image src="http://lorempixel.com/400/400"></iron-image>
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/iron-image/iron-image.js';
+    </script>
+    <style>
+      iron-image {
+        width: 400px;
+        height: 400px;
+        background-color: lightgray;
+      }
+    </style>
+  </head>
+  <body>
+    <iron-image sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
+  </body>
+</html>
 ```
 
-  Will letterbox the image to fit:
+### In a Polymer 3 element
 
-```html
-<iron-image style="width:400px; height:400px;" sizing="contain"
-  src="http://lorempixel.com/600/400"></iron-image>
-```
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
-  Will crop the image to fit:
+import '@polymer/iron-image/iron-image.js';
 
-```html
-<iron-image style="width:400px; height:400px;" sizing="cover"
-  src="http://lorempixel.com/600/400"></iron-image>
+class ExampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <iron-image sizing="contain" fade src="http://lorempixel.com/600/400"></iron-image>
+    `;
+  }
+}
+
+customElements.define('example-element', ExampleElement);
 ```
 
-  Will show light-gray background until the image loads:
+## Contributing
 
-```html
-<iron-image style="width:400px; height:400px; background-color: lightgray;"
-  sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-image
+cd iron-image
+npm install
+npm install -g polymer-cli
 ```
 
-  Will show a base-64 encoded placeholder image until the image loads:
+### Running the demo locally
 
-```html
-<iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..."
-  sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
 ```
 
-  Will fade the light-gray background out once the image is loaded:
+### Running the tests
 
-```html
-<iron-image style="width:400px; height:400px; background-color: lightgray;"
-  sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image>
+```sh
+polymer test --npm
 ```
-
-| Custom property | Description | Default |
-| --- | --- | --- |
-| `--iron-image-placeholder` | Mixin applied to #placeholder | `{}` |
-| `--iron-image-width` | Sets the width of the wrapped image | `auto` |
-| `--iron-image-height` | Sets the height of the wrapped image | `auto` |

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

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

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

Dev dependency count

6

decreased by-25%

Lines of code

475

increased by40.53%

Number of lines in readme file

88

increased by23.94%

Worsened metrics

Total package byte prevSize

48011

decreased by-25.66%

Number of package files

9

decreased by-40%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes