refactor(): minor updates for next stencil version (#20787)

This commit is contained in:
Manu MA
2020-03-24 16:59:07 +01:00
committed by GitHub
parent 7a4ddde5ce
commit 976e68da5b
38 changed files with 6825 additions and 6862 deletions

View File

@ -1,3 +1,4 @@
/* eslint-disable */
/* tslint:disable */
import { fromEvent } from 'rxjs';
@ -31,7 +32,6 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
}
// tslint:disable-next-line: only-arrow-functions
export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
const decorator = function(cls: any){
if (opts.inputs) {

File diff suppressed because it is too large Load Diff

View File

@ -34,9 +34,9 @@
"tslib": "^1.10.0"
},
"devDependencies": {
"@stencil/core": "1.8.11",
"@stencil/sass": "1.0.1",
"@types/jest": "24.0.21",
"@stencil/core": "1.11.2",
"@stencil/sass": "1.1.1",
"@types/jest": "24.9.0",
"@types/node": "12.12.3",
"@types/puppeteer": "1.19.1",
"@types/swiper": "4.4.4",
@ -49,7 +49,7 @@
"np": "^5.0.3",
"pixelmatch": "4.0.2",
"puppeteer": "1.20.0",
"rollup": "1.19.4",
"rollup": "1.32.0",
"rollup-plugin-node-resolve": "5.2.0",
"rollup-plugin-virtual": "^1.0.1",
"sass": "^1.22.9",

3401
core/src/components.d.ts vendored

File diff suppressed because it is too large Load Diff

View File

@ -25,7 +25,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
presented = false;
animation?: any;
mode = getIonMode(this);
@Element() el!: HTMLIonActionSheetElement;

View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
@ -30,7 +30,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
private processedButtons: AlertButton[] = [];
presented = false;
mode = getIonMode(this);
@Element() el!: HTMLIonAlertElement;
@ -215,13 +214,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
}
this.activeId = selectedInput.id;
safeCall(selectedInput.handler, selectedInput);
this.el.forceUpdate();
forceUpdate(this);
}
private cbClick(selectedInput: AlertInput) {
selectedInput.checked = !selectedInput.checked;
safeCall(selectedInput.handler, selectedInput);
this.el.forceUpdate();
forceUpdate(this);
}
private buttonClick(button: AlertButton) {

View File

@ -19,7 +19,6 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
})
export class BackButton implements ComponentInterface, ButtonInterface {
mode = getIonMode(this);
@Element() el!: HTMLElement;
/**
@ -61,7 +60,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
return icon;
}
if (this.mode === 'ios') {
if (getIonMode(this) === 'ios') {
// default ios back button icon
return config.get('backButtonIcon', 'chevron-back');
}
@ -71,7 +70,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
}
get backButtonText() {
const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
}
@ -100,8 +99,9 @@ export class BackButton implements ComponentInterface, ButtonInterface {
}
render() {
const { color, defaultHref, disabled, type, mode, hasIconOnly, backButtonIcon, backButtonText } = this;
const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText } = this;
const showBackButton = defaultHref !== undefined;
const mode = getIonMode(this);
return (
<Host

View File

@ -1,18 +1,28 @@
import { newSpecPage } from '@stencil/core/testing';
import { BackButton } from "../back-button";
import { config } from "../../../global/config";
import { setMode } from '@stencil/core';
describe('back button', () => {
let bb: BackButton;
beforeEach(() => {
config.reset({});
bb = new BackButton();
});
const newBackButton = async (mode: string = 'md'): Promise<BackButton> => {
setMode(() => mode);
const { rootInstance } = await newSpecPage({
components: [BackButton],
html: `<ion-back-button></ion-back-button>`
})
return rootInstance;
};
describe('backButtonIcon', () => {
it('set custom icon on the instance, override config', () => {
it('set custom icon on the instance, override config', async () => {
const bb = await newBackButton();
bb.icon = 'custom-icon-instance';
config.reset({
backButtonIcon: 'custom-icon-config'
@ -20,24 +30,27 @@ describe('back button', () => {
expect(bb.backButtonIcon).toBe('custom-icon-instance');
});
it('set custom icon in the config', () => {
it('set custom icon in the config', async () => {
const bb = await newBackButton();
config.reset({
backButtonIcon: 'custom-icon-config'
});
expect(bb.backButtonIcon).toBe('custom-icon-config');
});
it('set custom icon on the instance', () => {
it('set custom icon on the instance', async () => {
const bb = await newBackButton();
bb.icon = 'custom-icon-instance';
expect(bb.backButtonIcon).toBe('custom-icon-instance');
});
it('default icon for ios mode', () => {
bb.mode = 'ios';
it('default icon for ios mode', async () => {
const bb = await newBackButton('ios');
expect(bb.backButtonIcon).toBe('chevron-back');
});
it('default icon', () => {
it('default icon', async () => {
const bb = await newBackButton();
expect(bb.backButtonIcon).toBe('arrow-back-sharp');
});
@ -45,12 +58,13 @@ describe('back button', () => {
describe('backButtonText', () => {
it('default text for ios mode', () => {
bb.mode = 'ios';
it('default text for ios mode', async () => {
const bb = await newBackButton('ios');
expect(bb.backButtonText).toBe('Back');
});
it('default text', () => {
it('default text', async () => {
const bb = await newBackButton();
expect(bb.backButtonText).toBe(null);
});

View File

@ -14,8 +14,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
* @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
*
* @part button - The native button or anchor tag that is rendered.
* @part button-inner - The span inside of the native button or anchor.
* @TODOpart button - The native button or anchor tag that is rendered.
* @TODOpart button-inner - The span inside of the native button or anchor.
*/
@Component({
tag: 'ion-button',

View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Host, Listen, Prop, h } from '@stencil/core';
import { Component, ComponentInterface, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { matchBreakpoint } from '../../utils/media';
@ -14,8 +14,6 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
})
export class Col implements ComponentInterface {
@Element() el!: HTMLIonColElement;
/**
* The amount to offset the column, in terms of how many columns it should shift to the end
* of the total available.
@ -158,7 +156,7 @@ export class Col implements ComponentInterface {
@Listen('resize', { target: 'window' })
onResize() {
this.el.forceUpdate();
forceUpdate(this);
}
// Loop through all of the breakpoints to see if the media query

View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, h, readTask } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
@ -24,7 +24,6 @@ export class Content implements ComponentInterface {
private cTop = -1;
private cBottom = -1;
private scrollEl!: HTMLElement;
private mode = getIonMode(this);
// Detail is used in a hot loop in the scroll event, by allocating it here
// V8 will be able to inline any read/write to it since it's a monomorphic class.
@ -120,7 +119,8 @@ export class Content implements ComponentInterface {
}
private shouldForceOverscroll() {
const { forceOverscroll, mode } = this;
const { forceOverscroll } = this;
const mode = getIonMode(this);
return forceOverscroll === undefined
? mode === 'ios' && isPlatform('ios')
: forceOverscroll;
@ -131,7 +131,7 @@ export class Content implements ComponentInterface {
readTask(this.readDimensions.bind(this));
} else if (this.cTop !== 0 || this.cBottom !== 0) {
this.cTop = this.cBottom = 0;
this.el.forceUpdate();
forceUpdate(this);
}
}
@ -143,7 +143,7 @@ export class Content implements ComponentInterface {
if (dirty) {
this.cTop = top;
this.cBottom = bottom;
this.el.forceUpdate();
forceUpdate(this);
}
}

View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Host, Listen, Prop, State, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Host, Listen, Prop, State, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface';
@ -123,7 +123,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
}
if (hasStyleChange) {
this.itemStyles.set(tagName, newStyles);
this.el.forceUpdate();
forceUpdate(this);
}
}

View File

@ -27,7 +27,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
private durationTimeout: any;
presented = false;
mode = getIonMode(this);
@Element() el!: HTMLIonLoadingElement;

View File

@ -2,7 +2,6 @@ import { Animation, Side } from '../../interface';
export interface MenuI {
el: HTMLIonMenuElement;
mode: string;
side: Side;
menuId?: string;
disabled: boolean;

View File

@ -28,11 +28,6 @@ export class Menu implements ComponentInterface, MenuI {
private gesture?: Gesture;
private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
mode = getIonMode(this);
private easing: string = this.mode === 'ios' ? iosEasing : mdEasing;
private easingReverse: string = this.mode === 'ios' ? iosEasingReverse : mdEasingReverse;
isAnimating = false;
width!: number; // TODO
_isOpen = false;
@ -335,9 +330,12 @@ AFTER:
private async startAnimation(shouldOpen: boolean, animated: boolean): Promise<void> {
const isReversed = !shouldOpen;
const mode = getIonMode(this);
const easing = mode === 'ios' ? iosEasing : mdEasing;
const easingReverse = mode === 'ios' ? iosEasingReverse : mdEasingReverse;
const ani = (this.animation as Animation)!
.direction((isReversed) ? 'reverse' : 'normal')
.easing((isReversed) ? this.easingReverse : this.easing)
.easing((isReversed) ? easingReverse : easing)
.onFinish(() => {
if (ani.getDirection() === 'reverse') {
ani.direction('normal');
@ -554,7 +552,8 @@ AFTER:
}
render() {
const { isEndSide, type, disabled, mode, isPaneVisible } = this;
const { isEndSide, type, disabled, isPaneVisible } = this;
const mode = getIonMode(this);
return (
<Host

View File

@ -35,7 +35,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
private gestureAnimationDismissing = false;
presented = false;
animation?: Animation;
mode = getIonMode(this);
@Element() el!: HTMLIonModalElement;

View File

@ -22,8 +22,6 @@ import { iosLeaveAnimation } from './animations/ios.leave';
export class Picker implements ComponentInterface, OverlayInterface {
private durationTimeout: any;
mode = getIonMode(this);
@Element() el!: HTMLIonPickerElement;
@State() presented = false;

View File

@ -28,7 +28,6 @@ export class Popover implements ComponentInterface, OverlayInterface {
private usersElement?: HTMLElement;
presented = false;
mode = getIonMode(this);
@Element() el!: HTMLIonPopoverElement;

View File

@ -1,4 +1,4 @@
import * as pd from '@stencil/core/dist/testing/puppeteer/puppeteer-declarations';
import * as pd from '@stencil/core/testing';
import { dragElementBy, queryDeep } from '../../../utils/test/utils';

View File

@ -2,7 +2,6 @@ import { ComponentProps } from '../../../interface';
export interface HTMLStencilElement extends HTMLElement {
componentOnReady(): Promise<this>;
forceUpdate(): void;
}
export interface NavOutlet {

View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
@ -179,7 +179,7 @@ export class Searchbar implements ComponentInterface {
protected showCancelButtonChanged() {
requestAnimationFrame(() => {
this.positionElements();
this.el.forceUpdate();
forceUpdate(this);
});
}

View File

@ -12,10 +12,10 @@ import { SelectCompareFn } from './select-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part placeholder - The text displayed in the select when there is no value.
* @part text - The displayed value of the select.
* @part icon - The select icon container.
* @part icon-inner - The select icon.
* @TODOpart placeholder - The text displayed in the select when there is no value.
* @TODOpart text - The displayed value of the select.
* @TODOpart icon - The select icon container.
* @TODOpart icon-inner - The select icon.
*/
@Component({
tag: 'ion-select',

View File

@ -27,7 +27,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
private durationTimeout: any;
presented = false;
mode = getIonMode(this);
@Element() el!: HTMLIonToastElement;

View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Host, Listen, Prop, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, CssClassMap, StyleEventDetail } from '../../interface';
@ -76,7 +76,7 @@ export class Toolbar implements ComponentInterface {
if (hasStyleChange) {
this.childrenStyles.set(tagName, newStyles);
this.el.forceUpdate();
forceUpdate(this);
}
}

View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, FunctionalComponent, Host, Listen, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
import { Component, ComponentInterface, Element, FunctionalComponent, Host, Listen, Method, Prop, State, Watch, forceUpdate, h, readTask, writeTask } from '@stencil/core';
import { Cell, DomRenderFn, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
@ -310,7 +310,7 @@ export class VirtualScroll implements ComponentInterface {
} else if (this.domRender) {
this.domRender(this.virtualDom);
} else if (this.renderItem) {
this.el.forceUpdate();
forceUpdate(this);
}
}

View File

@ -1,3 +1,4 @@
import { getIonMode } from '../../../global/ionic-global';
import { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
@ -30,7 +31,8 @@ export const menuOverlayAnimation = (menu: MenuI): Animation => {
.addElement(menu.menuInnerEl!)
.fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
const isIos = menu.mode === 'ios';
const mode = getIonMode(menu);
const isIos = mode === 'ios';
const opacity = isIos ? 0.2 : 0.25;
backdropAnimation

View File

@ -1,3 +1,4 @@
import { getIonMode } from '../../../global/ionic-global';
import { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
@ -12,6 +13,7 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
let contentOpenedX: string;
let menuClosedX: string;
const mode = getIonMode(menu);
const width = menu.width;
if (menu.isEndSide) {
@ -35,5 +37,5 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
.addElement(menu.backdropEl!)
.fromTo('opacity', 0.01, 0.32);
return baseAnimation(menu.mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
};

View File

@ -1,3 +1,4 @@
import { getIonMode } from '../../../global/ionic-global';
import { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
@ -9,11 +10,11 @@ import { baseAnimation } from './base';
* The menu itself, which is under the content, does not move.
*/
export const menuRevealAnimation = (menu: MenuI): Animation => {
const mode = getIonMode(menu);
const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
const contentOpen = createAnimation()
.addElement(menu.contentEl!) // REVIEW
.fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
return baseAnimation(menu.mode === 'ios').addAnimation(contentOpen);
return baseAnimation(mode === 'ios').addAnimation(contentOpen);
};

View File

@ -1,7 +1,6 @@
import { EventEmitter } from '@stencil/core';
import { HTMLStencilElement } from '@stencil/core/internal';
import { AnimationBuilder, Mode } from '../interface';
import { AnimationBuilder, HTMLStencilElement } from '../interface';
export interface OverlayEventDetail<T = any> {
data?: T;
@ -9,7 +8,6 @@ export interface OverlayEventDetail<T = any> {
}
export interface OverlayInterface {
mode: Mode;
el: HTMLElement;
animated: boolean;
keyboardClose: boolean;

View File

@ -1,4 +1,5 @@
import { config } from '../global/config';
import { getIonMode } from '../global/ionic-global';
import { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
@ -128,10 +129,11 @@ export const present = async (
overlay.presented = true;
overlay.willPresent.emit();
const mode = getIonMode(overlay);
// get the user's animation fn if one was provided
const animationBuilder = (overlay.enterAnimation)
? overlay.enterAnimation
: config.get(name, overlay.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
: config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
if (completed) {
@ -155,10 +157,10 @@ export const dismiss = async (
try {
overlay.willDismiss.emit({ data, role });
const mode = getIonMode(overlay);
const animationBuilder = (overlay.leaveAnimation)
? overlay.leaveAnimation
: config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
: config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
// If dismissed via gesture, no need to play leaving animation again
if (role !== 'gesture') {

View File

@ -1,4 +1,4 @@
import { writeTask } from '@stencil/core';
import { Build, writeTask } from '@stencil/core';
import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../../components/nav/constants';
import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface';
@ -44,7 +44,7 @@ const beforeTransition = (opts: TransitionOptions) => {
const runTransition = async (opts: TransitionOptions): Promise<TransitionResult> => {
const animationBuilder = await getAnimationBuilder(opts);
const ani = (animationBuilder)
const ani = (animationBuilder && Build.isBrowser)
? animation(animationBuilder, opts)
: noAnimation(opts); // fast path for no animation

View File

@ -67,8 +67,7 @@ export const config: Config = {
esmLoaderPath: '../loader'
},
// {
// type: 'experimental-dist-module',
// externalRuntime: true,
// type: 'dist-custom-elements-bundle',
// },
{
type: 'docs-readme',
@ -83,7 +82,7 @@ export const config: Config = {
},
apiSpecGenerator({
file: 'api.txt'
}),
}) as any,
// {
// type: 'stats',
// file: 'stats.json'

View File

@ -7,6 +7,7 @@
"declaration": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"assumeChangesOnlyAffectDirectDependencies": true,
"jsx": "react",
"jsxFactory": "h",
"lib": [
@ -25,11 +26,10 @@
"target": "es2017"
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"stencil.config.ts"
"src",
],
"exclude": [
"node_modules"
"node_modules",
"**/test"
]
}

12
docs/core.d.ts vendored
View File

@ -27,8 +27,10 @@ export interface JsonDocsComponent {
props: JsonDocsProp[];
methods: JsonDocsMethod[];
events: JsonDocsEvent[];
listeners: JsonDocsListener[];
styles: JsonDocsStyle[];
slots: JsonDocsSlot[];
parts: JsonDocsPart[];
dependents: string[];
dependencies: string[];
dependencyGraph: JsonDocsDependencyGraph;
@ -95,10 +97,20 @@ export interface JsonDocsStyle {
docs: string;
annotation: string;
}
export interface JsonDocsListener {
event: string;
target?: string;
capture: boolean;
passive: boolean;
}
export interface JsonDocsSlot {
name: string;
docs: string;
}
export interface JsonDocsPart {
name: string;
docs: string;
}
export interface StyleDoc {
name: string;
docs: string;

View File

@ -52,7 +52,7 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.23",
"@types/jest": "^24.9.0",
"@types/node": "^12.12.14",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",

View File

@ -48,12 +48,12 @@
"react-dom": "^16.8.6"
},
"devDependencies": {
"@types/jest": "^23.3.9",
"@types/jest": "^24.9.0",
"@types/node": "^12.12.14",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",
"fs-extra": "^8.1.0",
"jest": "^24.8.0",
"jest": "^24.9.0",
"jest-dom": "^3.4.0",
"np": "^5.0.1",
"react": "^16.9.0",

View File

@ -4,7 +4,7 @@
"private": true,
"dependencies": {
"@ionic/react": "0.0.9",
"@types/jest": "24.0.17",
"@types/jest": "24.9.0",
"@types/node": "12.7.0",
"@types/react": "16.8.24",
"@types/react-dom": "16.8.5",