feat(): support for stackblitz (#18846)

This commit is contained in:
Manu MA 2019-07-23 01:01:36 +02:00 committed by GitHub
parent 71137a2ffa
commit fb18f3ba25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 204 additions and 24 deletions

View File

@ -258,11 +258,18 @@ function isVersionGreater(oldVersion, newVersion) {
return true; return true;
} }
function copyCDNLoader(tasks, version) {
tasks.push({
title: `Copy CDN loader`,
task: () => execa('node', ['copy-cdn-loader.js', version], { cwd: path.join(rootDir, 'core', 'scripts') }),
});
}
module.exports = { module.exports = {
checkGit, checkGit,
isValidVersion, isValidVersion,
isVersionGreater, isVersionGreater,
copyCDNLoader,
packages, packages,
packagePath, packagePath,
prepareDevPackage, prepareDevPackage,

View File

@ -116,6 +116,7 @@ async function preparePackages(packages, version, install) {
// update core readme with version number // update core readme with version number
updateCoreReadme(tasks, version); updateCoreReadme(tasks, version);
common.copyCDNLoader(tasks, version);
const listr = new Listr(tasks, { showSubtasks: true }); const listr = new Listr(tasks, { showSubtasks: true });
await listr.run(); await listr.run();
@ -171,7 +172,6 @@ function updateCoreReadme(tasks, version) {
}); });
} }
const SEMVER_INCREMENTS = ['patch', 'minor', 'major']; const SEMVER_INCREMENTS = ['patch', 'minor', 'major'];
const isValidVersionInput = input => SEMVER_INCREMENTS.indexOf(input) !== -1 || common.isValidVersion(input); const isValidVersionInput = input => SEMVER_INCREMENTS.indexOf(input) !== -1 || common.isValidVersion(input);

View File

@ -38,6 +38,7 @@ async function main() {
packages.forEach(package => { packages.forEach(package => {
common.prepareDevPackage(tasks, package, devVersion); common.prepareDevPackage(tasks, package, devVersion);
}); });
common.copyCDNLoader(tasks, devVersion);
common.publishPackages(tasks, packages, devVersion, DIST_NPM_TAG); common.publishPackages(tasks, packages, devVersion, DIST_NPM_TAG);
const listr = new Listr(tasks); const listr = new Listr(tasks);

View File

@ -49,16 +49,16 @@
"tslib": "^1.9.3" "tslib": "^1.9.3"
}, },
"peerDependencies": { "peerDependencies": {
"@angular-devkit/core": ">=7.2.1", "@angular-devkit/core": "7.2.1 - 8",
"@angular-devkit/schematics": ">=7.2.1", "@angular-devkit/schematics": "7.2.1 - 8",
"@angular/core": ">=7.2.1", "@angular/core": "7.2.1 - 8",
"@angular/common": ">=7.2.1", "@angular/common": "7.2.1 - 8",
"@angular/forms": ">=7.2.1", "@angular/forms": "7.2.1 - 8",
"@angular/router": ">=7.2.1", "@angular/router": "7.2.1 - 8",
"@angular/compiler": ">=7.2.1", "@angular/compiler": "7.2.1 - 8",
"@angular/compiler-cli": ">=7.2.1", "@angular/compiler-cli": "7.2.1 - 8",
"@angular/platform-browser": ">=7.2.1", "@angular/platform-browser": "7.2.1 - 8",
"@angular/platform-browser-dynamic": ">=7.2.1", "@angular/platform-browser-dynamic": "7.2.1 - 8",
"rxjs": ">=6.2.0", "rxjs": ">=6.2.0",
"zone.js": ">=0.8.26" "zone.js": ">=0.8.26"
}, },
@ -75,9 +75,9 @@
"@angular/router": "^7.2.1", "@angular/router": "^7.2.1",
"@types/node": "~12.0.12", "@types/node": "~12.0.12",
"fs-extra": "^7.0.0", "fs-extra": "^7.0.0",
"glob": "^7.1.3", "glob": "^7.1.4",
"rollup": "^1.1.2", "rollup": "~1.17.0",
"rollup-plugin-node-resolve": "^4.0.0", "rollup-plugin-node-resolve": "~5.2.0",
"rxjs": "^6.5.2", "rxjs": "^6.5.2",
"tsickle": "^0.34.0", "tsickle": "^0.34.0",
"tslint": "^5.12.1", "tslint": "^5.12.1",

View File

@ -23,9 +23,9 @@ The Ionic Core package contains the Web Components that make up the reusable UI
Easiest way to start using Ionic Core is by adding a script tag to the CDN: Easiest way to start using Ionic Core is by adding a script tag to the CDN:
```html ```html
<script type="module" src="https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.esm.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js"></script> <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/dist/ionic/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@4.6.2/css/ionic.bundle.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/css/ionic.bundle.css" rel="stylesheet">
``` ```
Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`. Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.

View File

@ -16,7 +16,6 @@
"pwa" "pwa"
], ],
"main": "dist/index.js", "main": "dist/index.js",
"unpkg": "dist/ionic/ionic.js",
"module": "dist/index.mjs", "module": "dist/index.mjs",
"es2015": "dist/esm/index.mjs", "es2015": "dist/esm/index.mjs",
"es2017": "dist/esm/index.mjs", "es2017": "dist/esm/index.mjs",
@ -34,7 +33,7 @@
"tslib": "^1.10.0" "tslib": "^1.10.0"
}, },
"devDependencies": { "devDependencies": {
"@stencil/core": "1.1.5", "@stencil/core": "1.1.9",
"@stencil/sass": "1.0.0", "@stencil/sass": "1.0.0",
"@types/jest": "24.0.13", "@types/jest": "24.0.13",
"@types/node": "10.12.18", "@types/node": "10.12.18",

View File

@ -0,0 +1,24 @@
module.exports.applyPolyfills = function() { return Promise.resolve() };
module.exports.defineCustomElements = function(_, opts = {}) {
return new Promise((resolve, reject) => {
const doc = document;
const mod = doc.createElement('script');
mod.setAttribute('type', 'module');
mod['data-opts'] = opts;
mod.src = '__CDN_LOADER_URL__/dist/ionic/ionic.esm.js';
const legacy = doc.createElement('script');
legacy.setAttribute('nomodule', '');
legacy['data-opts'] = opts;
legacy.src = '__CDN_LOADER_URL__/dist/ionic/ionic.js';
mod.onload = resolve;
mod.onerror = reject;
legacy.onload = resolve;
legacy.onerror = reject;
doc.head.appendChild(mod);
doc.head.appendChild(legacy);
});
}

View File

@ -0,0 +1,26 @@
// the unpkg link cannot use "latest" in the url
// so this script is to keep the link updated
// with the latest
const fs = require('fs');
const path = require('path');
const version = process.argv[2];
if (!version) {
throw new Error('version arg missing');
}
const srcPath = path.join(__dirname, 'cdn-loader.js');
let scriptContent = fs.readFileSync(srcPath, 'utf-8');
// https://unpkg.com/@ionic/core@latest/dist/ionic.js
scriptContent = scriptContent.replace(
/__CDN_LOADER_URL__/g,
'https://cdn.jsdelivr.net/npm/@ionic/core@' + version
);
fs.writeFileSync(path.join(__dirname, '..', 'loader', 'cdn.js'), scriptContent);
fs.writeFileSync(path.join(__dirname, '..', 'loader', 'index.cjs.js'), scriptContent);

View File

@ -95,6 +95,8 @@ export namespace Components {
'cssClass'?: string | string[]; 'cssClass'?: string | string[];
/** /**
* Dismiss the action sheet overlay after it has been presented. * Dismiss the action sheet overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/ */
'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
/** /**
@ -142,10 +144,14 @@ export namespace Components {
interface IonActionSheetController { interface IonActionSheetController {
/** /**
* Create an action sheet overlay with action sheet options. * Create an action sheet overlay with action sheet options.
* @param options The options to use to create the action sheet.
*/ */
'create': (options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>; 'create': (options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
/** /**
* Dismiss the open action sheet overlay. * Dismiss the open action sheet overlay.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
* @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet.
*/ */
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
/** /**
@ -172,6 +178,8 @@ export namespace Components {
'cssClass'?: string | string[]; 'cssClass'?: string | string[];
/** /**
* Dismiss the alert overlay after it has been presented. * Dismiss the alert overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/ */
'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
/** /**
@ -227,10 +235,14 @@ export namespace Components {
interface IonAlertController { interface IonAlertController {
/** /**
* Create an alert overlay with alert options. * Create an alert overlay with alert options.
* @param options The options to use to create the alert.
*/ */
'create': (options: AlertOptions) => Promise<HTMLIonAlertElement>; 'create': (options: AlertOptions) => Promise<HTMLIonAlertElement>;
/** /**
* Dismiss the open alert overlay. * Dismiss the open alert overlay.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
* @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert.
*/ */
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
/** /**
@ -618,6 +630,9 @@ export namespace Components {
'getScrollElement': () => Promise<HTMLElement>; 'getScrollElement': () => Promise<HTMLElement>;
/** /**
* Scroll by a specified X/Y distance in the component. * Scroll by a specified X/Y distance in the component.
* @param x The amount to scroll by on the horizontal axis.
* @param y The amount to scroll by on the vertical axis.
* @param duration The amount of time to take scrolling by that amount.
*/ */
'scrollByPoint': (x: number, y: number, duration: number) => Promise<void>; 'scrollByPoint': (x: number, y: number, duration: number) => Promise<void>;
/** /**
@ -626,14 +641,19 @@ export namespace Components {
'scrollEvents': boolean; 'scrollEvents': boolean;
/** /**
* Scroll to the bottom of the component. * Scroll to the bottom of the component.
* @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
*/ */
'scrollToBottom': (duration?: number) => Promise<void>; 'scrollToBottom': (duration?: number) => Promise<void>;
/** /**
* Scroll to a specified X/Y location in the component. * Scroll to a specified X/Y location in the component.
* @param x The point to scroll to on the horizontal axis.
* @param y The point to scroll to on the vertical axis.
* @param duration The amount of time to take scrolling to that point. Defaults to `0`.
*/ */
'scrollToPoint': (x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>; 'scrollToPoint': (x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>;
/** /**
* Scroll to the top of the component. * Scroll to the top of the component.
* @param duration The amount of time to take scrolling to the top. Defaults to `0`.
*/ */
'scrollToTop': (duration?: number) => Promise<void>; 'scrollToTop': (duration?: number) => Promise<void>;
/** /**
@ -1144,6 +1164,7 @@ export namespace Components {
'getSlidingRatio': () => Promise<number>; 'getSlidingRatio': () => Promise<number>;
/** /**
* Open the sliding item. * Open the sliding item.
* @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
*/ */
'open': (side: "start" | "end" | undefined) => Promise<void>; 'open': (side: "start" | "end" | undefined) => Promise<void>;
} }
@ -1204,6 +1225,8 @@ export namespace Components {
'cssClass'?: string | string[]; 'cssClass'?: string | string[];
/** /**
* Dismiss the loading overlay after it has been presented. * Dismiss the loading overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/ */
'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
/** /**
@ -1259,10 +1282,14 @@ export namespace Components {
interface IonLoadingController { interface IonLoadingController {
/** /**
* Create a loading overlay with loading options. * Create a loading overlay with loading options.
* @param options The options to use to create the loading.
*/ */
'create': (options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>; 'create': (options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
/** /**
* Dismiss the open loading overlay. * Dismiss the open loading overlay.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
* @param id The id of the loading to dismiss. If an id is not provided, it will dismiss the most recently opened loading.
*/ */
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
/** /**
@ -1350,14 +1377,18 @@ export namespace Components {
'_getInstance': () => Promise<MenuControllerI>; '_getInstance': () => Promise<MenuControllerI>;
/** /**
* Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`. * Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`.
* @param menu The menuId or side of the menu to close.
*/ */
'close': (menu?: string | null | undefined) => Promise<boolean>; 'close': (menu?: string | null | undefined) => Promise<boolean>;
/** /**
* Enable or disable a menu. Disabling a menu will not allow gestures for that menu or any calls to open it. This is useful when there are multiple menus on the same side and only one of them should be allowed to open. Enabling a menu will automatically disable all other menus on that side. * Enable or disable a menu. Disabling a menu will not allow gestures for that menu or any calls to open it. This is useful when there are multiple menus on the same side and only one of them should be allowed to open. Enabling a menu will automatically disable all other menus on that side.
* @param enable If `true`, the menu should be enabled.
* @param menu The menuId or side of the menu to enable or disable.
*/ */
'enable': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>; 'enable': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
/** /**
* Get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. * Get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`.
* @param menu The menuId or side of the menu.
*/ */
'get': (menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>; 'get': (menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
/** /**
@ -1374,26 +1405,34 @@ export namespace Components {
'isAnimating': () => Promise<boolean>; 'isAnimating': () => Promise<boolean>;
/** /**
* Get whether or not the menu is enabled. Returns `true` if the specified menu is enabled. Returns `false` if a menu is disabled or not found. * Get whether or not the menu is enabled. Returns `true` if the specified menu is enabled. Returns `false` if a menu is disabled or not found.
* @param menu The menuId or side of the menu that is being checked.
*/ */
'isEnabled': (menu?: string | null | undefined) => Promise<boolean>; 'isEnabled': (menu?: string | null | undefined) => Promise<boolean>;
/** /**
* Get whether or not the menu is open. Returns `true` if the specified menu is open. If a menu is not specified, it will return `true` if any menu is currently open. * Get whether or not the menu is open. Returns `true` if the specified menu is open. If a menu is not specified, it will return `true` if any menu is currently open.
* @param menu The menuId or side of the menu that is being checked.
*/ */
'isOpen': (menu?: string | null | undefined) => Promise<boolean>; 'isOpen': (menu?: string | null | undefined) => Promise<boolean>;
/** /**
* Open the menu. If a menu is not provided then it will open the first menu found. If the specified menu is `start` or `end`, then it will open the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `false`. * Open the menu. If a menu is not provided then it will open the first menu found. If the specified menu is `start` or `end`, then it will open the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `false`.
* @param menu The menuId or side of the menu to open.
*/ */
'open': (menu?: string | null | undefined) => Promise<boolean>; 'open': (menu?: string | null | undefined) => Promise<boolean>;
/** /**
* Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property. * Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property.
* @param name The name of the animation to register.
* @param animation The animation function to register.
*/ */
'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>; 'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
/** /**
* Enable or disable the ability to swipe open the menu. * Enable or disable the ability to swipe open the menu.
* @param enable If `true`, the menu swipe gesture should be enabled.
* @param menu The menuId or side of the menu to enable or disable the swipe gesture on.
*/ */
'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>; 'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
/** /**
* Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if a menu is not found. * Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if a menu is not found.
* @param menu The menuId or side of the menu to toggle.
*/ */
'toggle': (menu?: string | null | undefined) => Promise<boolean>; 'toggle': (menu?: string | null | undefined) => Promise<boolean>;
} }
@ -1431,6 +1470,8 @@ export namespace Components {
'delegate'?: FrameworkDelegate; 'delegate'?: FrameworkDelegate;
/** /**
* Dismiss the modal overlay after it has been presented. * Dismiss the modal overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
*/ */
'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
/** /**
@ -1470,10 +1511,14 @@ export namespace Components {
interface IonModalController { interface IonModalController {
/** /**
* Create a modal overlay with modal options. * Create a modal overlay with modal options.
* @param options The options to use to create the modal.
*/ */
'create': <T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>; 'create': <T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>;
/** /**
* Dismiss the open modal overlay. * Dismiss the open modal overlay.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the modal. This can be useful in a button handler for determining which button was clicked to dismiss the modal. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
* @param id The id of the modal to dismiss. If an id is not provided, it will dismiss the most recently opened modal.
*/ */
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
/** /**
@ -1492,6 +1537,7 @@ export namespace Components {
'animation'?: AnimationBuilder; 'animation'?: AnimationBuilder;
/** /**
* Returns `true` if the current view can go back. * Returns `true` if the current view can go back.
* @param view The view to check.
*/ */
'canGoBack': (view?: ViewController | undefined) => Promise<boolean>; 'canGoBack': (view?: ViewController | undefined) => Promise<boolean>;
'delegate'?: FrameworkDelegate; 'delegate'?: FrameworkDelegate;
@ -1501,39 +1547,65 @@ export namespace Components {
'getActive': () => Promise<ViewController | undefined>; 'getActive': () => Promise<ViewController | undefined>;
/** /**
* Get the view at the specified index. * Get the view at the specified index.
* @param index The index of the view.
*/ */
'getByIndex': (index: number) => Promise<ViewController | undefined>; 'getByIndex': (index: number) => Promise<ViewController | undefined>;
/** /**
* Get the previous view. * Get the previous view.
* @param view The view to get.
*/ */
'getPrevious': (view?: ViewController | undefined) => Promise<ViewController | undefined>; 'getPrevious': (view?: ViewController | undefined) => Promise<ViewController | undefined>;
'getRouteId': () => Promise<RouteID | undefined>; 'getRouteId': () => Promise<RouteID | undefined>;
/** /**
* Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack. * Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.
* @param insertIndex The index to insert the component at in the stack.
* @param component The component to insert into the navigation stack.
* @param componentProps Any properties of the component.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'insert': <T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'insert': <T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. * Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.
* @param insertIndex The index to insert the components at in the stack.
* @param insertComponents The components to insert into the navigation stack.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* Pop a component off of the navigation stack. Navigates back from the current component. * Pop a component off of the navigation stack. Navigates back from the current component.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* Pop to a specific index in the navigation stack. * Pop to a specific index in the navigation stack.
* @param indexOrViewCtrl The index or view controller to pop to.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* Navigate back to the root of the stack, no matter how far back that is. * Navigate back to the root of the stack, no matter how far back that is.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams. * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
* @param component The component to push onto the navigation stack.
* @param componentProps Any properties of the component.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'push': <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'push': <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* Removes a component from the navigation stack at the specified index. * Removes a component from the navigation stack at the specified index.
* @param startIndex The number to begin removal at.
* @param removeCount The number of components to remove.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
@ -1546,10 +1618,17 @@ export namespace Components {
'rootParams'?: ComponentProps; 'rootParams'?: ComponentProps;
/** /**
* Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array. * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.
* @param views The list of views to set as the navigation stack.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
/** /**
* Set the root for the current navigation stack to a component. * Set the root for the current navigation stack to a component.
* @param component The component to set as the root of the navigation stack.
* @param componentProps Any properties of the component.
* @param opts The navigation options.
* @param done The transition complete function.
*/ */
'setRoot': <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>; 'setRoot': <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
'setRouteId': (id: string, params: ComponentProps<null> | undefined, direction: RouterDirection) => Promise<RouteWrite>; 'setRouteId': (id: string, params: ComponentProps<null> | undefined, direction: RouterDirection) => Promise<RouteWrite>;
@ -1612,6 +1691,8 @@ export namespace Components {
'cssClass'?: string | string[]; 'cssClass'?: string | string[];
/** /**
* Dismiss the picker overlay after it has been presented. * Dismiss the picker overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/ */
'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
/** /**
@ -1624,6 +1705,7 @@ export namespace Components {
'enterAnimation'?: AnimationBuilder; 'enterAnimation'?: AnimationBuilder;
/** /**
* Get the column that matches the specified name. * Get the column that matches the specified name.
* @param name The name of the column.
*/ */
'getColumn': (name: string) => Promise<PickerColumn | undefined>; 'getColumn': (name: string) => Promise<PickerColumn | undefined>;
/** /**
@ -1665,10 +1747,14 @@ export namespace Components {
interface IonPickerController { interface IonPickerController {
/** /**
* Create a picker overlay with picker options. * Create a picker overlay with picker options.
* @param options The options to use to create the picker.
*/ */
'create': (options: PickerOptions) => Promise<HTMLIonPickerElement>; 'create': (options: PickerOptions) => Promise<HTMLIonPickerElement>;
/** /**
* Dismiss the open picker overlay. * Dismiss the open picker overlay.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
* @param id The id of the picker to dismiss. If an id is not provided, it will dismiss the most recently opened picker.
*/ */
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
/** /**
@ -1700,6 +1786,8 @@ export namespace Components {
'delegate'?: FrameworkDelegate; 'delegate'?: FrameworkDelegate;
/** /**
* Dismiss the popover overlay after it has been presented. * Dismiss the popover overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
*/ */
'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
/** /**
@ -1747,10 +1835,14 @@ export namespace Components {
interface IonPopoverController { interface IonPopoverController {
/** /**
* Create a popover overlay with popover options. * Create a popover overlay with popover options.
* @param options The options to use to create the popover.
*/ */
'create': <T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>; 'create': <T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>;
/** /**
* Dismiss the open popover overlay. * Dismiss the open popover overlay.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the popover. This can be useful in a button handler for determining which button was clicked to dismiss the popover. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
* @param id The id of the popover to dismiss. If an id is not provided, it will dismiss the most recently opened popover.
*/ */
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
/** /**
@ -1938,6 +2030,7 @@ export namespace Components {
interface IonReorderGroup { interface IonReorderGroup {
/** /**
* Completes the reorder operation. Must be called by the `ionItemReorder` event. If a list of items is passed, the list will be reordered and returned in the proper order. If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position. * Completes the reorder operation. Must be called by the `ionItemReorder` event. If a list of items is passed, the list will be reordered and returned in the proper order. If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
* @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
*/ */
'complete': (listOrReorder?: boolean | any[] | undefined) => Promise<any>; 'complete': (listOrReorder?: boolean | any[] | undefined) => Promise<any>;
/** /**
@ -1948,6 +2041,8 @@ export namespace Components {
interface IonRippleEffect { interface IonRippleEffect {
/** /**
* Adds the ripple effect to the parent element. * Adds the ripple effect to the parent element.
* @param x The horizontal coordinate of where the ripple should start.
* @param y The vertical coordinate of where the ripple should start.
*/ */
'addRipple': (x: number, y: number) => Promise<() => void>; 'addRipple': (x: number, y: number) => Promise<() => void>;
/** /**
@ -1988,6 +2083,8 @@ export namespace Components {
'printDebug': () => Promise<void>; 'printDebug': () => Promise<void>;
/** /**
* Navigate to the specified URL. * Navigate to the specified URL.
* @param url The url to navigate to.
* @param direction The direction of the animation. Defaults to `"forward"`.
*/ */
'push': (url: string, direction?: RouterDirection) => Promise<boolean>; 'push': (url: string, direction?: RouterDirection) => Promise<boolean>;
/** /**
@ -2202,6 +2299,7 @@ export namespace Components {
'okText': string; 'okText': string;
/** /**
* Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`. * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.
* @param event The user interface event that called the open.
*/ */
'open': (event?: UIEvent | undefined) => Promise<any>; 'open': (event?: UIEvent | undefined) => Promise<any>;
/** /**
@ -2254,6 +2352,9 @@ export namespace Components {
* If `true`, the skeleton text will animate. * If `true`, the skeleton text will animate.
*/ */
'animated': boolean; 'animated': boolean;
/**
* @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.
*/
'width'?: string; 'width'?: string;
} }
interface IonSlide {} interface IonSlide {}
@ -2280,14 +2381,17 @@ export namespace Components {
'length': () => Promise<number>; 'length': () => Promise<number>;
/** /**
* Lock or unlock the ability to slide to the next slide. * Lock or unlock the ability to slide to the next slide.
* @param lock If `true`, disable swiping to the next slide.
*/ */
'lockSwipeToNext': (lock: boolean) => Promise<void>; 'lockSwipeToNext': (lock: boolean) => Promise<void>;
/** /**
* Lock or unlock the ability to slide to the previous slide. * Lock or unlock the ability to slide to the previous slide.
* @param lock If `true`, disable swiping to the previous slide.
*/ */
'lockSwipeToPrev': (lock: boolean) => Promise<void>; 'lockSwipeToPrev': (lock: boolean) => Promise<void>;
/** /**
* Lock or unlock the ability to slide to the next or previous slide. * Lock or unlock the ability to slide to the next or previous slide.
* @param lock If `true`, disable swiping to the next and previous slide.
*/ */
'lockSwipes': (lock: boolean) => Promise<void>; 'lockSwipes': (lock: boolean) => Promise<void>;
/** /**
@ -2308,14 +2412,21 @@ export namespace Components {
'scrollbar': boolean; 'scrollbar': boolean;
/** /**
* Transition to the next slide. * Transition to the next slide.
* @param speed The transition duration (in ms).
* @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
*/ */
'slideNext': (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>; 'slideNext': (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
/** /**
* Transition to the previous slide. * Transition to the previous slide.
* @param speed The transition duration (in ms).
* @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events.
*/ */
'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>; 'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
/** /**
* Transition to the specified slide. * Transition to the specified slide.
* @param index The index of the slide to transition to.
* @param speed The transition duration (in ms).
* @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
*/ */
'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>; 'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
/** /**
@ -2332,6 +2443,7 @@ export namespace Components {
'update': () => Promise<void>; 'update': () => Promise<void>;
/** /**
* Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter. * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.
* @param speed The transition duration (in ms).
*/ */
'updateAutoHeight': (speed?: number | undefined) => Promise<void>; 'updateAutoHeight': (speed?: number | undefined) => Promise<void>;
} }
@ -2447,10 +2559,12 @@ export namespace Components {
'getSelected': () => Promise<string | undefined>; 'getSelected': () => Promise<string | undefined>;
/** /**
* Get a specific tab by the value of its `tab` property or an element reference. * Get a specific tab by the value of its `tab` property or an element reference.
* @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
*/ */
'getTab': (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>; 'getTab': (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
/** /**
* Select a tab by the value of its `tab` property or an element reference. * Select a tab by the value of its `tab` property or an element reference.
* @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
*/ */
'select': (tab: string | HTMLIonTabElement) => Promise<boolean>; 'select': (tab: string | HTMLIonTabElement) => Promise<boolean>;
'setRouteId': (id: string) => Promise<RouteWrite>; 'setRouteId': (id: string) => Promise<RouteWrite>;
@ -2582,6 +2696,8 @@ export namespace Components {
'cssClass'?: string | string[]; 'cssClass'?: string | string[];
/** /**
* Dismiss the toast overlay after it has been presented. * Dismiss the toast overlay after it has been presented.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
*/ */
'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
/** /**
@ -2641,10 +2757,14 @@ export namespace Components {
interface IonToastController { interface IonToastController {
/** /**
* Create a toast overlay with toast options. * Create a toast overlay with toast options.
* @param options The options to use to create the toast.
*/ */
'create': (options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>; 'create': (options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
/** /**
* Dismiss the open toast overlay. * Dismiss the open toast overlay.
* @param data Any data to emit in the dismiss events.
* @param role The role of the element that is dismissing the toast. For example, 'cancel' or 'backdrop'.
* @param id The id of the toast to dismiss. If an id is not provided, it will dismiss the most recently opened toast.
*/ */
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>; 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
/** /**
@ -5525,6 +5645,9 @@ declare namespace LocalJSX {
* If `true`, the skeleton text will animate. * If `true`, the skeleton text will animate.
*/ */
'animated'?: boolean; 'animated'?: boolean;
/**
* @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.
*/
'width'?: string; 'width'?: string;
} }
interface IonSlide extends JSXBase.HTMLAttributes<HTMLIonSlideElement> {} interface IonSlide extends JSXBase.HTMLAttributes<HTMLIonSlideElement> {}

View File

@ -1,10 +1,10 @@
# ion-anchor # ion-anchor
> [DEPRECATED]. Use [ion-router-link](../router-link) instead.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
> **[DEPRECATED]** Use `ion-router-link` instead.
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |

View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/react", "name": "@ionic/react",
"version": "0.0.7", "version": "0.0.8-0",
"description": "React specific wrapper for @ionic/core", "description": "React specific wrapper for @ionic/core",
"keywords": [ "keywords": [
"ionic", "ionic",
@ -25,7 +25,7 @@
"clean": "rm -rf dist && rm -rf dist-transpiled", "clean": "rm -rf dist && rm -rf dist-transpiled",
"compile": "npm run tsc && rollup -c", "compile": "npm run tsc && rollup -c",
"compile:dev": "npm run tsc && rollup -c rollup.config.dev.js", "compile:dev": "npm run tsc && rollup -c rollup.config.dev.js",
"release": "np --any-branch --no-cleanup", "release": "np --any-branch --no-cleanup --yolo",
"tsc": "tsc -p .", "tsc": "tsc -p .",
"test": "jest" "test": "jest"
}, },
@ -36,7 +36,7 @@
"dist/" "dist/"
], ],
"dependencies": { "dependencies": {
"@ionic/core": "^4.6.0", "@ionic/core": "4.7.0-dev.201907191806.32b736e",
"tslib": "^1.10.0" "tslib": "^1.10.0"
}, },
"peerDependencies": { "peerDependencies": {