202 lines
6.2 KiB
TypeScript
202 lines
6.2 KiB
TypeScript
/// <reference types="cypress" />
|
|
|
|
declare module '*.svelte' {
|
|
export { SvelteComponentDev as default } from 'svelte/internal';
|
|
}
|
|
|
|
/**
|
|
* INTERNAL, DO NOT USE. Code may change at any time.
|
|
*/
|
|
interface Fragment {
|
|
key: string | null;
|
|
first: null;
|
|
c: () => void;
|
|
l: (nodes: any) => void;
|
|
h: () => void;
|
|
m: (target: HTMLElement, anchor: any) => void;
|
|
p: (ctx: any, dirty: any) => void;
|
|
r: () => void;
|
|
f: () => void;
|
|
a: () => void;
|
|
i: (local: any) => void;
|
|
o: (local: any) => void;
|
|
d: (detaching: 0 | 1) => void;
|
|
}
|
|
interface T$$ {
|
|
dirty: number[];
|
|
ctx: null | any;
|
|
bound: any;
|
|
update: () => void;
|
|
callbacks: any;
|
|
after_update: any[];
|
|
props: Record<string, 0 | string>;
|
|
fragment: null | false | Fragment;
|
|
not_equal: any;
|
|
before_update: any[];
|
|
context: Map<any, any>;
|
|
on_mount: any[];
|
|
on_destroy: any[];
|
|
skip_bound: boolean;
|
|
on_disconnect: any[];
|
|
root: Element | ShadowRoot;
|
|
}
|
|
/**
|
|
* Base class for Svelte components. Used when dev=false.
|
|
*/
|
|
declare class SvelteComponent {
|
|
$$: T$$;
|
|
$$set?: ($$props: any) => void;
|
|
$destroy(): void;
|
|
$on(type: any, callback: any): () => void;
|
|
$set($$props: any): void;
|
|
}
|
|
|
|
declare type Props = Record<string, any>;
|
|
interface ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>> {
|
|
target: Element | ShadowRoot;
|
|
anchor?: Element;
|
|
props?: Props;
|
|
context?: Map<any, any>;
|
|
hydrate?: boolean;
|
|
intro?: boolean;
|
|
$$inline?: boolean;
|
|
}
|
|
interface SvelteComponentDev$1 {
|
|
$set(props?: Props): void;
|
|
$on(event: string, callback: (event: any) => void): () => void;
|
|
$destroy(): void;
|
|
[accessor: string]: any;
|
|
}
|
|
/**
|
|
* Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
|
|
*/
|
|
declare class SvelteComponentDev$1 extends SvelteComponent {
|
|
/**
|
|
* @private
|
|
* For type checking capabilities only.
|
|
* Does not exist at runtime.
|
|
* ### DO NOT USE!
|
|
*/
|
|
$$prop_def: Props;
|
|
/**
|
|
* @private
|
|
* For type checking capabilities only.
|
|
* Does not exist at runtime.
|
|
* ### DO NOT USE!
|
|
*/
|
|
$$events_def: any;
|
|
/**
|
|
* @private
|
|
* For type checking capabilities only.
|
|
* Does not exist at runtime.
|
|
* ### DO NOT USE!
|
|
*/
|
|
$$slot_def: any;
|
|
constructor(options: ComponentConstructorOptions);
|
|
$capture_state(): void;
|
|
$inject_state(): void;
|
|
}
|
|
interface SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> {
|
|
$set(props?: Partial<Props>): void;
|
|
$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void): () => void;
|
|
$destroy(): void;
|
|
[accessor: string]: any;
|
|
}
|
|
/**
|
|
* Base class to create strongly typed Svelte components.
|
|
* This only exists for typing purposes and should be used in `.d.ts` files.
|
|
*
|
|
* ### Example:
|
|
*
|
|
* You have component library on npm called `component-library`, from which
|
|
* you export a component called `MyComponent`. For Svelte+TypeScript users,
|
|
* you want to provide typings. Therefore you create a `index.d.ts`:
|
|
* ```ts
|
|
* import { SvelteComponentTyped } from "svelte";
|
|
* export class MyComponent extends SvelteComponentTyped<{foo: string}> {}
|
|
* ```
|
|
* Typing this makes it possible for IDEs like VS Code with the Svelte extension
|
|
* to provide intellisense and to use the component like this in a Svelte file
|
|
* with TypeScript:
|
|
* ```svelte
|
|
* <script lang="ts">
|
|
* import { MyComponent } from "component-library";
|
|
* </script>
|
|
* <MyComponent foo={'bar'} />
|
|
* ```
|
|
*
|
|
* #### Why not make this part of `SvelteComponent(Dev)`?
|
|
* Because
|
|
* ```ts
|
|
* class ASubclassOfSvelteComponent extends SvelteComponent<{foo: string}> {}
|
|
* const component: typeof SvelteComponent = ASubclassOfSvelteComponent;
|
|
* ```
|
|
* will throw a type error, so we need to separate the more strictly typed class.
|
|
*/
|
|
declare class SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> extends SvelteComponentDev$1 {
|
|
/**
|
|
* @private
|
|
* For type checking capabilities only.
|
|
* Does not exist at runtime.
|
|
* ### DO NOT USE!
|
|
*/
|
|
$$prop_def: Props;
|
|
/**
|
|
* @private
|
|
* For type checking capabilities only.
|
|
* Does not exist at runtime.
|
|
* ### DO NOT USE!
|
|
*/
|
|
$$events_def: Events;
|
|
/**
|
|
* @private
|
|
* For type checking capabilities only.
|
|
* Does not exist at runtime.
|
|
* ### DO NOT USE!
|
|
*/
|
|
$$slot_def: Slots;
|
|
constructor(options: ComponentConstructorOptions<Props>);
|
|
}
|
|
/**
|
|
* Convenience type to get the props the given component expects. Example:
|
|
* ```html
|
|
* <script lang="ts">
|
|
* import type { ComponentProps } from 'svelte';
|
|
* import Component from './Component.svelte';
|
|
*
|
|
* const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
|
|
* </script>
|
|
* ```
|
|
*/
|
|
declare type ComponentProps<Component extends SvelteComponent> = Component extends SvelteComponentTyped<infer Props> ? Props : never;
|
|
|
|
declare type SvelteConstructor<T> = new (...args: any[]) => T;
|
|
declare type SvelteComponentOptions<T extends SvelteComponentDev$1> = Omit<ComponentConstructorOptions<ComponentProps<T>>, 'hydrate' | 'target' | '$$inline'>;
|
|
interface MountOptions<T extends SvelteComponentDev$1> extends SvelteComponentOptions<T> {
|
|
log?: boolean;
|
|
}
|
|
interface MountReturn<T extends SvelteComponentDev$1> {
|
|
component: T;
|
|
}
|
|
/**
|
|
* Mounts a Svelte component inside the Cypress browser
|
|
*
|
|
* @param {SvelteConstructor<T>} Component Svelte component being mounted
|
|
* @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
|
|
* @returns Cypress.Chainable<MountReturn>
|
|
*
|
|
* @example
|
|
* import Counter from './Counter.svelte'
|
|
* import { mount } from 'cypress/svelte'
|
|
*
|
|
* it('should render', () => {
|
|
* mount(Counter, { props: { count: 42 } })
|
|
* cy.get('button').contains(42)
|
|
* })
|
|
*
|
|
* @see {@link https://on.cypress.io/mounting-svelte} for more details.
|
|
*/
|
|
declare function mount<T extends SvelteComponentDev$1>(Component: SvelteConstructor<T>, options?: MountOptions<T>): Cypress.Chainable<MountReturn<T>>;
|
|
|
|
export { MountOptions, MountReturn, mount };
|