favesalon-embed 0.0.4 → 0.0.5

package/{types → dist/types}/components.d.ts

@@ -6,10 +6,16 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface ChatButton {
+        "accessToken": string;
+        "fetchData": () => Promise<void>;
+        "primaryColor": string;
+        "receiverId": string;
+        "senderId": string;
+    }
     interface GoogleMap {
-        "apiKey": string;
-        "lat": number;
-        "lng": number;
+        "locationAddress"?: string;
+        "locationName"?: string;
     }
     interface SalonBooking {
         "buttonClass": string;
@@ -22,10 +28,6 @@ export namespace Components {
         "redirectUrl": string;
         "salonId": number;
     }
-    interface SalonContact {
-        "salonId": number;
-        "salonInfo"?: string;
-    }
     interface SalonGiftCard {
         "buttonClass": string;
         "buttonText": string;
@@ -33,20 +35,29 @@ export namespace Components {
         "salonId": number;
     }
     interface SalonGiftCardModal {
+        "primaryColor": string;
         "salonId": number;
     }
     interface SalonInfo {
-        "backgroundColor": string;
         "fetchData": () => Promise<void>;
         "salonId": number;
     }
     interface SalonLatestReviews {
         "fetchData": () => Promise<void>;
+        "primaryColor": string;
+        "salonId": number;
+    }
+    interface SalonLatestStyles {
+        "fetchData": () => Promise<boolean>;
+        "isLoading"?: boolean;
         "salonId": number;
+        "withBorder"?: boolean;
     }
     interface SalonLocations {
+        "isLoading"?: boolean;
         "salonId": number;
         "salonInfo"?: string;
+        "withBorder"?: boolean;
     }
     interface SalonLookbook {
         "fetchCategories": () => Promise<void>;
@@ -57,38 +68,36 @@ export namespace Components {
         "onLoadMore": () => Promise<void>;
         "salonId": number;
     }
-    interface SalonLookbookModal {
-        "fetchData": () => Promise<any[]>;
-        "salonId": number;
-        "salonLookbook": string;
-    }
     interface SalonRanking {
         "height"?: number;
         "ranking": number;
         "width"?: number;
     }
     interface SalonReviews {
-        "fetchData": () => Promise<any[]>;
         "primaryColor": string;
         "salonId": number;
     }
     interface SalonSchedules {
+        "isLoading"?: boolean;
         "salonId": number;
         "salonInfo"?: string;
+        "withBorder"?: boolean;
     }
     interface SalonServices {
         "buttonClass": string;
         "fetchData": () => Promise<void>;
         "salonId": number;
     }
-    interface SalonStyles {
-        "fetchData": () => Promise<any[]>;
-        "salonId": number;
-    }
     interface SalonStylists {
         "fetchData": () => Promise<void>;
+        "onLoadMore": () => Promise<void>;
         "salonId": number;
     }
+    interface StyleDetail {
+        "fetchData": () => Promise<any[]>;
+        "salonId": number;
+        "salonLookbook": string;
+    }
     interface UserAvatar {
         "avatar": string;
         "name": string;
@@ -98,6 +107,12 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLChatButtonElement extends Components.ChatButton, HTMLStencilElement {
+    }
+    var HTMLChatButtonElement: {
+        prototype: HTMLChatButtonElement;
+        new (): HTMLChatButtonElement;
+    };
     interface HTMLGoogleMapElement extends Components.GoogleMap, HTMLStencilElement {
     }
     var HTMLGoogleMapElement: {
@@ -116,12 +131,6 @@ declare global {
         prototype: HTMLSalonBookingModalElement;
         new (): HTMLSalonBookingModalElement;
     };
-    interface HTMLSalonContactElement extends Components.SalonContact, HTMLStencilElement {
-    }
-    var HTMLSalonContactElement: {
-        prototype: HTMLSalonContactElement;
-        new (): HTMLSalonContactElement;
-    };
     interface HTMLSalonGiftCardElement extends Components.SalonGiftCard, HTMLStencilElement {
     }
     var HTMLSalonGiftCardElement: {
@@ -146,6 +155,12 @@ declare global {
         prototype: HTMLSalonLatestReviewsElement;
         new (): HTMLSalonLatestReviewsElement;
     };
+    interface HTMLSalonLatestStylesElement extends Components.SalonLatestStyles, HTMLStencilElement {
+    }
+    var HTMLSalonLatestStylesElement: {
+        prototype: HTMLSalonLatestStylesElement;
+        new (): HTMLSalonLatestStylesElement;
+    };
     interface HTMLSalonLocationsElement extends Components.SalonLocations, HTMLStencilElement {
     }
     var HTMLSalonLocationsElement: {
@@ -158,12 +173,6 @@ declare global {
         prototype: HTMLSalonLookbookElement;
         new (): HTMLSalonLookbookElement;
     };
-    interface HTMLSalonLookbookModalElement extends Components.SalonLookbookModal, HTMLStencilElement {
-    }
-    var HTMLSalonLookbookModalElement: {
-        prototype: HTMLSalonLookbookModalElement;
-        new (): HTMLSalonLookbookModalElement;
-    };
     interface HTMLSalonRankingElement extends Components.SalonRanking, HTMLStencilElement {
     }
     var HTMLSalonRankingElement: {
@@ -188,18 +197,18 @@ declare global {
         prototype: HTMLSalonServicesElement;
         new (): HTMLSalonServicesElement;
     };
-    interface HTMLSalonStylesElement extends Components.SalonStyles, HTMLStencilElement {
-    }
-    var HTMLSalonStylesElement: {
-        prototype: HTMLSalonStylesElement;
-        new (): HTMLSalonStylesElement;
-    };
     interface HTMLSalonStylistsElement extends Components.SalonStylists, HTMLStencilElement {
     }
     var HTMLSalonStylistsElement: {
         prototype: HTMLSalonStylistsElement;
         new (): HTMLSalonStylistsElement;
     };
+    interface HTMLStyleDetailElement extends Components.StyleDetail, HTMLStencilElement {
+    }
+    var HTMLStyleDetailElement: {
+        prototype: HTMLStyleDetailElement;
+        new (): HTMLStyleDetailElement;
+    };
     interface HTMLUserAvatarElement extends Components.UserAvatar, HTMLStencilElement {
     }
     var HTMLUserAvatarElement: {
@@ -207,31 +216,36 @@ declare global {
         new (): HTMLUserAvatarElement;
     };
     interface HTMLElementTagNameMap {
+        "chat-button": HTMLChatButtonElement;
         "google-map": HTMLGoogleMapElement;
         "salon-booking": HTMLSalonBookingElement;
         "salon-booking-modal": HTMLSalonBookingModalElement;
-        "salon-contact": HTMLSalonContactElement;
         "salon-gift-card": HTMLSalonGiftCardElement;
         "salon-gift-card-modal": HTMLSalonGiftCardModalElement;
         "salon-info": HTMLSalonInfoElement;
         "salon-latest-reviews": HTMLSalonLatestReviewsElement;
+        "salon-latest-styles": HTMLSalonLatestStylesElement;
         "salon-locations": HTMLSalonLocationsElement;
         "salon-lookbook": HTMLSalonLookbookElement;
-        "salon-lookbook-modal": HTMLSalonLookbookModalElement;
         "salon-ranking": HTMLSalonRankingElement;
         "salon-reviews": HTMLSalonReviewsElement;
         "salon-schedules": HTMLSalonSchedulesElement;
         "salon-services": HTMLSalonServicesElement;
-        "salon-styles": HTMLSalonStylesElement;
         "salon-stylists": HTMLSalonStylistsElement;
+        "style-detail": HTMLStyleDetailElement;
         "user-avatar": HTMLUserAvatarElement;
     }
 }
 declare namespace LocalJSX {
+    interface ChatButton {
+        "accessToken"?: string;
+        "primaryColor"?: string;
+        "receiverId"?: string;
+        "senderId"?: string;
+    }
     interface GoogleMap {
-        "apiKey"?: string;
-        "lat"?: number;
-        "lng"?: number;
+        "locationAddress"?: string;
+        "locationName"?: string;
     }
     interface SalonBooking {
         "buttonClass"?: string;
@@ -244,10 +258,6 @@ declare namespace LocalJSX {
         "redirectUrl"?: string;
         "salonId"?: number;
     }
-    interface SalonContact {
-        "salonId"?: number;
-        "salonInfo"?: string;
-    }
     interface SalonGiftCard {
         "buttonClass"?: string;
         "buttonText"?: string;
@@ -255,26 +265,30 @@ declare namespace LocalJSX {
         "salonId"?: number;
     }
     interface SalonGiftCardModal {
+        "primaryColor"?: string;
         "salonId"?: number;
     }
     interface SalonInfo {
-        "backgroundColor"?: string;
         "salonId"?: number;
     }
     interface SalonLatestReviews {
+        "primaryColor"?: string;
+        "salonId"?: number;
+    }
+    interface SalonLatestStyles {
+        "isLoading"?: boolean;
         "salonId"?: number;
+        "withBorder"?: boolean;
     }
     interface SalonLocations {
+        "isLoading"?: boolean;
         "salonId"?: number;
         "salonInfo"?: string;
+        "withBorder"?: boolean;
     }
     interface SalonLookbook {
         "salonId"?: number;
     }
-    interface SalonLookbookModal {
-        "salonId"?: number;
-        "salonLookbook"?: string;
-    }
     interface SalonRanking {
         "height"?: number;
         "ranking"?: number;
@@ -285,18 +299,21 @@ declare namespace LocalJSX {
         "salonId"?: number;
     }
     interface SalonSchedules {
+        "isLoading"?: boolean;
         "salonId"?: number;
         "salonInfo"?: string;
+        "withBorder"?: boolean;
     }
     interface SalonServices {
         "buttonClass"?: string;
         "salonId"?: number;
     }
-    interface SalonStyles {
+    interface SalonStylists {
         "salonId"?: number;
     }
-    interface SalonStylists {
+    interface StyleDetail {
         "salonId"?: number;
+        "salonLookbook"?: string;
     }
     interface UserAvatar {
         "avatar"?: string;
@@ -306,23 +323,23 @@ declare namespace LocalJSX {
         "size"?: number;
     }
     interface IntrinsicElements {
+        "chat-button": ChatButton;
         "google-map": GoogleMap;
         "salon-booking": SalonBooking;
         "salon-booking-modal": SalonBookingModal;
-        "salon-contact": SalonContact;
         "salon-gift-card": SalonGiftCard;
         "salon-gift-card-modal": SalonGiftCardModal;
         "salon-info": SalonInfo;
         "salon-latest-reviews": SalonLatestReviews;
+        "salon-latest-styles": SalonLatestStyles;
         "salon-locations": SalonLocations;
         "salon-lookbook": SalonLookbook;
-        "salon-lookbook-modal": SalonLookbookModal;
         "salon-ranking": SalonRanking;
         "salon-reviews": SalonReviews;
         "salon-schedules": SalonSchedules;
         "salon-services": SalonServices;
-        "salon-styles": SalonStyles;
         "salon-stylists": SalonStylists;
+        "style-detail": StyleDetail;
         "user-avatar": UserAvatar;
     }
 }
@@ -330,23 +347,23 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "chat-button": LocalJSX.ChatButton & JSXBase.HTMLAttributes<HTMLChatButtonElement>;
             "google-map": LocalJSX.GoogleMap & JSXBase.HTMLAttributes<HTMLGoogleMapElement>;
             "salon-booking": LocalJSX.SalonBooking & JSXBase.HTMLAttributes<HTMLSalonBookingElement>;
             "salon-booking-modal": LocalJSX.SalonBookingModal & JSXBase.HTMLAttributes<HTMLSalonBookingModalElement>;
-            "salon-contact": LocalJSX.SalonContact & JSXBase.HTMLAttributes<HTMLSalonContactElement>;
             "salon-gift-card": LocalJSX.SalonGiftCard & JSXBase.HTMLAttributes<HTMLSalonGiftCardElement>;
             "salon-gift-card-modal": LocalJSX.SalonGiftCardModal & JSXBase.HTMLAttributes<HTMLSalonGiftCardModalElement>;
             "salon-info": LocalJSX.SalonInfo & JSXBase.HTMLAttributes<HTMLSalonInfoElement>;
             "salon-latest-reviews": LocalJSX.SalonLatestReviews & JSXBase.HTMLAttributes<HTMLSalonLatestReviewsElement>;
+            "salon-latest-styles": LocalJSX.SalonLatestStyles & JSXBase.HTMLAttributes<HTMLSalonLatestStylesElement>;
             "salon-locations": LocalJSX.SalonLocations & JSXBase.HTMLAttributes<HTMLSalonLocationsElement>;
             "salon-lookbook": LocalJSX.SalonLookbook & JSXBase.HTMLAttributes<HTMLSalonLookbookElement>;
-            "salon-lookbook-modal": LocalJSX.SalonLookbookModal & JSXBase.HTMLAttributes<HTMLSalonLookbookModalElement>;
             "salon-ranking": LocalJSX.SalonRanking & JSXBase.HTMLAttributes<HTMLSalonRankingElement>;
             "salon-reviews": LocalJSX.SalonReviews & JSXBase.HTMLAttributes<HTMLSalonReviewsElement>;
             "salon-schedules": LocalJSX.SalonSchedules & JSXBase.HTMLAttributes<HTMLSalonSchedulesElement>;
             "salon-services": LocalJSX.SalonServices & JSXBase.HTMLAttributes<HTMLSalonServicesElement>;
-            "salon-styles": LocalJSX.SalonStyles & JSXBase.HTMLAttributes<HTMLSalonStylesElement>;
             "salon-stylists": LocalJSX.SalonStylists & JSXBase.HTMLAttributes<HTMLSalonStylistsElement>;
+            "style-detail": LocalJSX.StyleDetail & JSXBase.HTMLAttributes<HTMLStyleDetailElement>;
             "user-avatar": LocalJSX.UserAvatar & JSXBase.HTMLAttributes<HTMLUserAvatarElement>;
         }
     }

package/dist/types/constants/colors.d.ts

@@ -0,0 +1,65 @@
+export declare const Colors: {
+  TextColor: string;
+  Black: string;
+  White: string;
+  Primary: string;
+  Secondary: string;
+  Black01: string;
+  Black02: string;
+  Black03: string;
+  Gray01: string;
+  Gray02: string;
+  Gray03: string;
+  Gray04: string;
+  Gray05: string;
+  Red01: string;
+  Red02: string;
+  Red03: string;
+  Red04: string;
+  Red05: string;
+  Orange01: string;
+  Orange02: string;
+  Orange03: string;
+  Orange04: string;
+  Orange05: string;
+  Yellow01: string;
+  Yellow02: string;
+  Yellow03: string;
+  Yellow04: string;
+  Yellow05: string;
+  Lilac01: string;
+  Lilac02: string;
+  Lilac03: string;
+  Lilac04: string;
+  Lilac05: string;
+  Blue01: string;
+  Blue02: string;
+  Blue03: string;
+  Blue04: string;
+  Blue05: string;
+  Green01: string;
+  Green02: string;
+  Green03: string;
+  Green04: string;
+  Green05: string;
+  Success01: string;
+  Success02: string;
+  Success03: string;
+  Success04: string;
+  Success05: string;
+  Error01: string;
+  Error02: string;
+  Error03: string;
+  Error04: string;
+  Error05: string;
+  Warning01: string;
+  Warning02: string;
+  Warning03: string;
+  Warning04: string;
+  Warning05: string;
+  Info01: string;
+  Info02: string;
+  Info03: string;
+  Info04: string;
+  Info05: string;
+};

package/dist/types/mocks/users.d.ts

@@ -0,0 +1,10 @@
+export declare const consumerUser: {
+  id: number;
+  name: string;
+  avatar: string;
+};
+export declare const salonOwner: {
+  id: number;
+  name: string;
+  avatar: string;
+};

package/dist/types/services/services.d.ts

@@ -0,0 +1,75 @@
+import { AxiosInstance } from 'axios';
+import { ChatMessage } from '../types/chat';
+declare class HttpService {
+  http: AxiosInstance;
+  firebaseDatabase: any;
+  firebaseApp: any;
+  constructor();
+  fetchStyleDetail(styleId: number): Promise<{
+    styleInfo: any;
+    similarStyles: any[];
+  } | {
+    styleInfo: any;
+    similarStyles: any[];
+  }>;
+  fetchSalonInfo(salonId: number): Promise<any>;
+  fetchSalonLatestStyles(salonId: number, options: any): Promise<any>;
+  decorateServiceGroups(groups: any): any;
+  fetchSalonServices(salonId: number): Promise<any>;
+  fetchSalonStylists(salonId: number, options?: {
+    page: number;
+    limit: number;
+  }): Promise<{
+    total: any;
+    data: any;
+  } | {
+    total: number;
+    data: any[];
+  }>;
+  fetchSalonReviews(salonId: number, options?: any): Promise<{
+    total: any;
+    stats: {
+      totalReviews: any;
+      reviewPoint: number;
+      '1': number;
+      '2': number;
+      '3': number;
+      '4': number;
+      '5': number;
+    };
+    data: any;
+  } | {
+    total: number;
+    stats: {};
+    data: any[];
+  }>;
+  fetchSalonCategories(): Promise<any>;
+  fetchSalonLookbooks(salonId: number, options: any): Promise<{
+    total: number;
+    allLookbooks: any[];
+  } | {
+    total: any;
+    allLookbooks: any;
+  }>;
+  fetchStyleComments(styleId: number): Promise<{
+    total: any;
+    data: any;
+  } | {
+    total: number;
+    data: any[];
+  }>;
+  createChatRoom(receiverId: any, accessToken: any): Promise<any>;
+  private fetchRooms;
+  fetchChatRooms(accessToken: string): any;
+  fetchChatMessages(roomId: any, onDone: any): Promise<{}>;
+  markMessagesAsRead(roomId: any, roomMessages: ChatMessage[]): Promise<void>;
+  sendChatMessage(options: any): Promise<{
+    uid: string;
+    message: any;
+    unRead: number;
+    senderId: any;
+    timestamp: number;
+  }>;
+}
+declare const _default: () => HttpService;
+export default _default;

package/{types → dist/types}/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,14 +214,16 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,38 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
+/**
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +293,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +302,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**
@@ -417,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -470,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;
@@ -666,7 +738,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -1427,9 +1499,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1550,6 +1620,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;