tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
77 lines • 3.24 kB
text/typescript
export default TinyHtmlSource;
/**
* TinyHtmlSource is a helper class for creating and validating <source> elements.
* The <source> tag has contextual rules depending on its parent:
*
* - If inside <audio> or <video>, `src` is required, and `srcset`, `sizes`, `height`, `width` are forbidden.
* - If inside <picture>, `srcset` is required, `sizes` is allowed, and `src` is forbidden.
*
* @example
* // For <video>
* const sourceVideo = new TinyHtmlSource({
* src: 'movie.mp4',
* type: 'video/mp4',
* context: 'video'
* });
*
* // For <picture>
* const sourcePicture = new TinyHtmlSource({
* srcset: 'image-200.jpg 200w, image-400.jpg 400w',
* sizes: '(max-width: 600px) 200px, 400px',
* type: 'image/jpeg',
* context: 'picture'
* });
*
* @extends TinyHtmlTemplate<HTMLSourceElement>
*/
declare class TinyHtmlSource extends TinyHtmlTemplate<HTMLSourceElement> {
/**
* Creates a new TinyHtmlSource instance.
* @param {Object} config - Configuration object.
* @param {string} [config.type] - MIME type (optionally with codecs).
* @param {string} [config.src] - Resource URL (required in audio/video, forbidden in picture).
* @param {string} [config.srcset] - Comma-separated list of image candidates (required in picture).
* @param {string} [config.sizes] - List of source sizes (only valid in picture with srcset).
* @param {string} [config.media] - Media query for conditional loading.
* @param {number} [config.height] - Intrinsic image height (only valid in picture).
* @param {number} [config.width] - Intrinsic image width (only valid in picture).
* @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
* @param {string} [config.mainClass=""] - Main CSS class.
* @param {"audio"|"video"|"picture"} [config.context] - Parent context type (used for validation).
* @throws {TypeError|Error} If attributes are invalid or violate context rules.
*/
constructor({ type, src, srcset, sizes, media, height, width, tags, mainClass, context, }?: {
type?: string | undefined;
src?: string | undefined;
srcset?: string | undefined;
sizes?: string | undefined;
media?: string | undefined;
height?: number | undefined;
width?: number | undefined;
tags?: string | string[] | Set<string> | undefined;
mainClass?: string | undefined;
context?: "audio" | "picture" | "video" | undefined;
});
/** @param {string} type */
set type(type: string);
/** @returns {string|null} */
get type(): string | null;
/** @param {string} src */
set src(src: string);
/** @returns {string|null} */
get src(): string | null;
/** @param {string} srcset */
set srcset(srcset: string);
/** @returns {string|null} */
get srcset(): string | null;
/** @param {string} sizes */
set sizes(sizes: string);
/** @returns {string|null} */
get sizes(): string | null;
/** @param {string} media */
set media(media: string);
/** @returns {string|null} */
get media(): string | null;
}
import TinyHtmlTemplate from '../TinyHtmlTemplate.mjs';
//# sourceMappingURL=TinyHtmlSource.d.mts.map