@power-elements/stripe-elements - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

CHANGELOG.md

@@ -1,2 +0,2 @@
-## [2.2.3](https://github.com/bennypowers/stripe-elements/compare/v2.2.2...v2.2.3) (2020-01-27)
+## [2.2.4](https://github.com/bennypowers/stripe-elements/compare/v2.2.3...v2.2.4) (2020-01-29)
 
@@ -6,3 +6,4 @@
 
-* fix patch-package script ([e347aaa](https://github.com/bennypowers/stripe-elements/commit/e347aaa183cef7604f00e192dd3a9da05e41f272))
+* more semantic HTML for error output ([21443f5](https://github.com/bennypowers/stripe-elements/commit/21443f5836e851e308eb5d72a6fcbaf1376a5d1d))
+* unmount element before removing mountpoints when initializing ([8f2dd6f](https://github.com/bennypowers/stripe-elements/commit/8f2dd6f179e494fbff0e6c9f253fbb13f632682b))
 
@@ -9,0 +10,0 @@ # Changelog

karma.conf.js

@@ -20,10 +20,2 @@ /* eslint-disable valid-jsdoc */
       babel: true,
-      coverageExclude: [
-        'src/*.test.js',
-        'src/**/*.test.js',
-        'node_modules',
-        'stories/*',
-        'test/*',
-        'src/lib/strings.test.js',
-      ],
     },
@@ -30,0 +22,0 @@ coverageIstanbulReporter: {

package.json

 {
   "name": "@power-elements/stripe-elements",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Web Component wrapper for stripe elements",
@@ -19,3 +19,3 @@ "main": "index.js",
     "test": "karma start --coverage",
-    "test:watch": "karma start --auto-watch=true --single-run=false --reporters mocha,osx",
+    "test:watch": "npm t -- --auto-watch=true --single-run=false --reporters mocha,osx",
     "test:update-snapshots": "karma start --update-snapshots",
@@ -57,20 +57,2 @@ "test:prune-snapshots": "karma start --prune-snapshots",
   "homepage": "https://bennypowers.dev/stripe-elements",
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run build:analyze:markdown && npm run build:analyze:json && git add README.md && git add custom-elements.json"
-    }
-  },
-  "release": {
-    "branches": [
-      "master"
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/github",
-      "@semantic-release/npm",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/git",
-      "@semantic-release/changelog"
-    ]
-  },
   "devDependencies": {
@@ -77,0 +59,0 @@ "@apollo-elements/eslint-config": "^1.1.1",

shared.js

@@ -65,5 +65,5 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
  * @template TBase
- * @param {Constructor<TBase>} baseElement
+ * @param {Constructor<TBase>} superclass
  */
-const ReadOnlyPropertiesMixin = baseElement => {
+const ReadOnlyPropertiesMixin = superclass => {
   var _temp;
@@ -77,3 +77,3 @@
 
-  return _temp = class ReadOnlyPropertiesClass extends baseElement {
+  return _temp = class ReadOnlyPropertiesClass extends superclass {
     /**
@@ -718,7 +718,12 @@ * @inheritdoc
         return html`
-      <div id="stripe" part="stripe" tabindex="0" @focus="${this.focus}" @blur="${this.blur}">
+      <div id="stripe" part="stripe">
         <slot id="stripe-slot" name="stripe-card"></slot>
       </div>
 
-      <div id="error" part="error" ?hidden="${!showError}">${ifDefined(errorMessage)}</div>
+      <output id="error"
+          for="stripe"
+          part="error"
+          ?hidden="${!showError}">
+        ${ifDefined(errorMessage)}
+      </output>
     `;
@@ -895,2 +900,14 @@ }
       /**
+       * Removes all mount points from the DOM
+       * @private
+       */
+
+    }, {
+      kind: "method",
+      key: "destroyMountPoints",
+      value: function destroyMountPoints() {
+        this.shadowHosts.forEach(removeAllMounts);
+        if (this.stripeMount) this.stripeMount.remove();
+      }
+      /**
        * Reinitializes Stripe and mounts the element.
@@ -904,4 +921,2 @@ * @private
       value: async function init() {
-        this.destroyMountPoints();
-        this.initMountPoints();
         await this.unmount();
@@ -911,17 +926,7 @@ await this.initStripe();
         this.initElementListeners();
+        this.destroyMountPoints();
+        this.initMountPoints();
         this.mount();
       }
       /**
-       * Removes all mount points from the DOM
-       * @private
-       */
-
-    }, {
-      kind: "method",
-      key: "destroyMountPoints",
-      value: function destroyMountPoints() {
-        this.shadowHosts.forEach(removeAllMounts);
-        if (this.stripeMount) this.stripeMount.remove();
-      }
-      /**
        * Adds `ready`, `focus`, and `blur` listeners to the Stripe Element
@@ -1050,3 +1055,3 @@ * @private
       key: "onBlur",
-      value: async function onBlur(event) {
+      value: async function onBlur() {
         await this.set({
@@ -1065,3 +1070,3 @@ focused: false
       key: "onFocus",
-      value: async function onFocus(event) {
+      value: async function onFocus() {
         await this.set({
@@ -1068,0 +1073,0 @@ focused: true

src/lib/read-only-properties.js

@@ -13,5 +13,5 @@ /** @typedef {import('lit-element').PropertyDeclaration & { readOnly: Boolean }} AugmentedPropertyDeclaration */
  * @template TBase
- * @param {Constructor<TBase>} baseElement
+ * @param {Constructor<TBase>} superclass
  */
-export const ReadOnlyPropertiesMixin = baseElement => {
+export const ReadOnlyPropertiesMixin = superclass => {
   /**
@@ -23,3 +23,3 @@ * @type {Map<string, symbol>}
 
-  return class ReadOnlyPropertiesClass extends baseElement {
+  return class ReadOnlyPropertiesClass extends superclass {
     /**
@@ -26,0 +26,0 @@ * @inheritdoc

src/stripe-elements.test.js

@@ -0,1 +1,2 @@
+/* istanbul ignore file */
 import '../stripe-elements.js';
@@ -379,2 +380,3 @@
           beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
+          beforeEach(nextFrame);
           it('rebuilds its DOM', function() {
@@ -381,0 +383,0 @@ const { stripeMountId } = element;

src/stripe-payment-request.test.js

@@ -0,1 +1,2 @@
+/* istanbul ignore file */
 import '../stripe-payment-request.js';
@@ -398,2 +399,3 @@
               beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
+              beforeEach(nextFrame);
               it('rebuilds its DOM', function() {
@@ -400,0 +402,0 @@ const { stripeMountId } = element;

src/StripeBase.js

@@ -5,2 +5,3 @@ import { LitElement, property, html } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
+
 import bound from 'bound-decorator';
@@ -261,7 +262,12 @@
     return html`
-      <div id="stripe" part="stripe" tabindex="0" @focus="${this.focus}" @blur="${this.blur}">
+      <div id="stripe" part="stripe">
         <slot id="stripe-slot" name="stripe-card"></slot>
       </div>
 
-      <div id="error" part="error" ?hidden="${!showError}">${ifDefined(errorMessage)}</div>
+      <output id="error"
+          for="stripe"
+          part="error"
+          ?hidden="${!showError}">
+        ${ifDefined(errorMessage)}
+      </output>
     `;
@@ -378,2 +384,11 @@ }
   /**
+   * Removes all mount points from the DOM
+   * @private
+   */
+  destroyMountPoints() {
+    this.shadowHosts.forEach(removeAllMounts);
+    if (this.stripeMount) this.stripeMount.remove();
+  }
+
+  /**
    * Reinitializes Stripe and mounts the element.
@@ -383,4 +398,2 @@ * @private
   async init() {
-    this.destroyMountPoints();
-    this.initMountPoints();
     await this.unmount();
@@ -390,2 +403,4 @@ await this.initStripe();
     this.initElementListeners();
+    this.destroyMountPoints();
+    this.initMountPoints();
     this.mount();
@@ -395,11 +410,2 @@ }
   /**
-   * Removes all mount points from the DOM
-   * @private
-   */
-  destroyMountPoints() {
-    this.shadowHosts.forEach(removeAllMounts);
-    if (this.stripeMount) this.stripeMount.remove();
-  }
-
-  /**
    * Adds `ready`, `focus`, and `blur` listeners to the Stripe Element
@@ -491,3 +497,3 @@ * @private
    */
-  @bound async onBlur(event) {
+  @bound async onBlur() {
     await this.set({ focused: false });
@@ -500,3 +506,3 @@ }
    */
-  @bound async onFocus(event) {
+  @bound async onFocus() {
     await this.set({ focused: true });
@@ -503,0 +509,0 @@ }

StripeBase.d.ts

@@ -1,13 +0,1 @@
-declare const StripeBase_base: {
-    new (): {
-        _readOnlyPropertyInitializedMap: Map<string, boolean>;
-        _setPropEntry([name, newVal]: [string, unknown]): Promise<unknown>;
-        set(props: {
-            [x: string]: unknown;
-        }): Promise<void>;
-    };
-    createProperty(name: string, options: import("lit-element").PropertyDeclaration<any, any> & {
-        readOnly: boolean;
-    }): void;
-};
 /**
@@ -30,3 +18,3 @@ * @fires 'error' - The validation error, or the error returned from stripe.com
  */
-export class StripeBase extends StripeBase_base {
+export class StripeBase {
     /**
@@ -232,11 +220,11 @@ * billing_details object sent to create the payment representation. (optional)
     /**
-     * Reinitializes Stripe and mounts the element.
+     * Removes all mount points from the DOM
      * @private
      */
-    private init(): Promise<void>;
+    private destroyMountPoints(): void;
     /**
-     * Removes all mount points from the DOM
+     * Reinitializes Stripe and mounts the element.
      * @private
      */
-    private destroyMountPoints(): void;
+    private init(): Promise<void>;
     /**
@@ -276,5 +264,3 @@ * Adds `ready`, `focus`, and `blur` listeners to the Stripe Element
      */
-    private onBlur(event: {
-        elementType: stripe.elements.elementsType;
-    }): Promise<void>;
+    private onBlur(): Promise<void>;
     /**
@@ -284,5 +270,3 @@ * @param  {StripeFocusEvent} event
      */
-    private onFocus(event: {
-        elementType: stripe.elements.elementsType;
-    }): Promise<void>;
+    private onFocus(): Promise<void>;
     /**
@@ -299,3 +283,3 @@ * Sets the `ready` property when the stripe element is ready to receive focus.
      */
-    private postRepresentation(): Promise<void>;
+    private postRepresentation(): Promise<any>;
     /**
@@ -302,0 +286,0 @@ * @param {string} name

No alert changes

Worsened metrics

Total package byte prevSize

447917

decreased by-0.22%

Lines of code

7396

decreased by-0.14%

No dependency changes