Merge pull request #17 from proyecto26/develop

Release 1.1.9

Author: jdnichollsc

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.9] - 2020-11-02
+### Fixed
+- Use `disconnectedCallback()` instead of `componentDidUnload()`.
+- Update to `Stencil` v2.0.
+- Fix accessibility issues from GitHub page.
+
 ## [1.1.8] - 2020-05-07
 ### Fixed
 - Validate if the manager is initialized before to destroy the animation.
@@ -65,7 +71,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added GitHub page with Google Analytics to track some events.
 - Added README with instructions to integrate the Web component with any other framework (Angular, React, Vue, etc).
 
-[Unreleased]: https://github.com/proyecto26/animatable-component/compare/v1.1.7...HEAD
+[Unreleased]: https://github.com/proyecto26/animatable-component/compare/v1.1.9...HEAD
+[1.1.9]: https://github.com/proyecto26/animatable-component/compare/v1.1.8...v1.1.9
+[1.1.8]: https://github.com/proyecto26/animatable-component/compare/v1.1.7...v1.1.8
 [1.1.7]: https://github.com/proyecto26/animatable-component/compare/v1.1.6...v1.1.7
 [1.1.6]: https://github.com/proyecto26/animatable-component/compare/v1.1.5...v1.1.6
 [1.1.5]: https://github.com/proyecto26/animatable-component/compare/v1.1.4...v1.1.5

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "private": false,
   "description": "Animate once, use Everywhere! 💫",
   "author": "Proyecto 26",
   "homepage": "https://proyecto26.github.io/animatable-component",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
@@ -27,13 +28,14 @@
     "lint": "eslint src/**/*{.ts,.tsx}"
   },
   "devDependencies": {
-    "@stencil/core": "^1.17.3",
+    "typescript": "^4.0.5",
+    "@stencil/core": "^2.2.0",
     "@stencil/eslint-plugin": "^0.3.1",
-    "@stencil/react-output-target": "^0.0.8",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
-    "eslint": "^7.6.0",
-    "eslint-plugin-react": "^7.20.5",
+    "@stencil/react-output-target": "^0.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/parser": "^4.6.0",
+    "eslint": "^7.12.1",
+    "eslint-plugin-react": "^7.21.5",
     "gh-pages": "^3.1.0"
   },
   "license": "MIT",

package.json

@@ -3,7 +3,7 @@
 /* auto-generated react proxies */
 import { createReactComponent } from './react-component-lib';
 
-import { JSX } from '@proyecto26/animatable-component';
+import type { JSX } from '@proyecto26/animatable-component';
 
 import { applyPolyfills, defineCustomElements } from '@proyecto26/animatable-component/loader';
 

react/src/components.ts

@@ -7,7 +7,10 @@ import {
   isCoveredByReact,
   mergeRefs,
 } from './utils';
-import { HTMLStencilElement } from '@stencil/core/internal/stencil-public-runtime';
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+}
 
 interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
   forwardedRef: React.RefObject<ElementType>;
@@ -54,9 +57,11 @@ export const createReactComponent = <
       let propsToPass = Object.keys(cProps).reduce((acc, name) => {
         if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
           const eventName = name.substring(2).toLowerCase();
-          if (typeof document !== "undefined" && isCoveredByReact(eventName)) {
+          if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) {
             (acc as any)[name] = (cProps as any)[name];
           }
+        } else {
+          (acc as any)[name] = (cProps as any)[name];
         }
         return acc;
       }, {});
@@ -65,7 +70,7 @@ export const createReactComponent = <
         propsToPass = manipulatePropsFunction(this.props, propsToPass);
       }
 
-      const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
+      let newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
         ...propsToPass,
         ref: mergeRefs(forwardedRef, this.setComponentElRef),
         style,

react/src/react-component-lib/createComponent.tsx

@@ -24,7 +24,7 @@ export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}
         const eventName = name.substring(2);
         const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
 
-        if (!isCoveredByReact(eventNameLc)) {
+        if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {
           syncEvent(node, eventNameLc, newProps[name]);
         }
       } else {
@@ -68,7 +68,7 @@ export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: a
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
  */
-export const isCoveredByReact = (eventNameSuffix: string, doc: Document = document) => {
+export const isCoveredByReact = (eventNameSuffix: string, doc: Document) => {
   const eventName = 'on' + eventNameSuffix;
   let isSupported = eventName in doc;
 

react/src/react-component-lib/utils/attachProps.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StyleReactProps } from '../interfaces';
+import type { StyleReactProps } from '../interfaces';
 
 type Mutable<T> = { -readonly [P in keyof T]-?: T[P] }; // Remove readonly and ?
 

react/src/react-component-lib/utils/index.tsx

@@ -109,7 +109,7 @@ const easingOutCubic = EASING_FUNCTIONS[EASING.EASE_OUT_CUBIC];
 
 ### Script tag
 
-- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.1.8/dist/animatable-component.js'></script>` in the head of your index.html
+- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.1.9/dist/animatable-component.js'></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
 
 ### Node Modules

readme.md

@@ -323,7 +323,7 @@ export class AnimatableComponent implements IAnimatableComponent {
   /**
    * Initialize manager
    */
-  componentWillLoad() {
+  connectedCallback() {
     this.manager = new AnimationManager(this);
     this.manager.setState(this.element, this);
   }
@@ -332,15 +332,15 @@ export class AnimatableComponent implements IAnimatableComponent {
     this.manager.savedState();
   }
 
-  componentWillUpdate() {
+  componentShouldUpdate() {
     this.manager.setState(this.element, this);
   }
 
   componentDidUpdate() {
     this.manager.savedState();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.destroy();
   }
 

src/components/animatable-component/animatable-component.tsx

@@ -333,7 +333,7 @@ export class Cube implements IAnimatableComponent {
   /**
    * Initialize manager
    */
-  componentWillLoad() {
+  connectedCallback() {
     this.manager = new AnimationManager(this);
   }
 
@@ -342,15 +342,15 @@ export class Cube implements IAnimatableComponent {
     this.manager.savedState();
   }
 
-  componentWillUpdate() {
+  componentShouldUpdate() {
     this.manager.setState(this.element, this);
   }
 
   componentDidUpdate() {
     this.manager.savedState();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.destroy();
   }