@tixyel/streamelements 7.6.8 → 7.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +149 -1
- package/dist/index.es.js +299 -107
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -2468,7 +2468,55 @@ declare class ElementHelper {
|
|
|
2468
2468
|
*/
|
|
2469
2469
|
skipWhitespaceIndex?: boolean;
|
|
2470
2470
|
}): string;
|
|
2471
|
+
/**
|
|
2472
|
+
* Retrieves CSS variables defined in the stylesheets of the document for a given selector, with optional filtering and helper variable exclusion.
|
|
2473
|
+
* @param selector - The CSS selector to search for (default is ':root' to target global variables).
|
|
2474
|
+
* @param filter - A function to filter the retrieved CSS variables. It receives each variable as a [key, value] pair, along with its index and the full array of variables. Should return true to include the variable in the results.
|
|
2475
|
+
* @param options - Optional settings for retrieving CSS variables, including filterHelpers to exclude common helper variables (those ending with -min, -max, or -step).
|
|
2476
|
+
* @returns - An array of [key, value] pairs representing the CSS variables that match the selector and filter criteria.
|
|
2477
|
+
* @example
|
|
2478
|
+
* ```javascript
|
|
2479
|
+
* // Retrieve all CSS variables defined under :root
|
|
2480
|
+
* const variables = getElementCSSVariables();
|
|
2481
|
+
* console.log(variables);
|
|
2482
|
+
* // Retrieve CSS variables defined under a specific selector, e.g., .my-class
|
|
2483
|
+
* const classVariables = getElementCSSVariables('.my-class');
|
|
2484
|
+
* console.log(classVariables);
|
|
2485
|
+
* // Retrieve CSS variables with a custom filter, e.g., only variables that include 'color' in their name
|
|
2486
|
+
* const colorVariables = getElementCSSVariables(':root', ([key]) => key.includes('color'));
|
|
2487
|
+
* console.log(colorVariables);
|
|
2488
|
+
*/
|
|
2489
|
+
getElementCSSVariables(selector?: string, filter?: ([k, v]: [string, string], i: number, array: [string, string][]) => boolean, options?: {
|
|
2490
|
+
filterHelpers?: boolean;
|
|
2491
|
+
}): [string, string][];
|
|
2492
|
+
/**
|
|
2493
|
+
* Applies CSS styles to an HTML or SVG element, supporting both standard and custom properties, as well as '!important' values.
|
|
2494
|
+
* @param element - The target HTML or SVG element to which the styles will be applied.
|
|
2495
|
+
* @param styles - An object containing CSS property-value pairs. Property names can be in camelCase or kebab-case, and values can include '!important'.
|
|
2496
|
+
* @example
|
|
2497
|
+
* ```javascript
|
|
2498
|
+
* CSS(document.getElementById('myElement'), {
|
|
2499
|
+
* backgroundColor: 'red',
|
|
2500
|
+
* '--custom-var': '10px',
|
|
2501
|
+
* color: 'blue !important',
|
|
2502
|
+
* });
|
|
2503
|
+
* ```
|
|
2504
|
+
*/
|
|
2505
|
+
CSS(element: HTMLElement | SVGElement, styles: Partial<Record<keyof CSSStyleProperties | `--${string}`, CSSValue>>): void;
|
|
2506
|
+
/**
|
|
2507
|
+
* Escapes special HTML characters in a string to prevent XSS attacks and ensure safe rendering in HTML contexts.
|
|
2508
|
+
* @param value - The input string that may contain special HTML characters such as &, <, >, ", and '.
|
|
2509
|
+
* @returns A new string with special HTML characters replaced by their corresponding HTML entities.
|
|
2510
|
+
* @example
|
|
2511
|
+
* ```javascript
|
|
2512
|
+
* const unsafeString = '<script>alert("XSS")</script>';
|
|
2513
|
+
* const safeString = escapeHtml(unsafeString);
|
|
2514
|
+
* console.log(safeString); // Output: '<script>alert("XSS")</script>'
|
|
2515
|
+
* ```
|
|
2516
|
+
*/
|
|
2517
|
+
escapeHtml(value: string): string;
|
|
2471
2518
|
}
|
|
2519
|
+
type CSSValue = string | number | null | undefined;
|
|
2472
2520
|
|
|
2473
2521
|
declare class ObjectHelper {
|
|
2474
2522
|
/**
|
|
@@ -3061,7 +3109,7 @@ declare class UtilsHelper {
|
|
|
3061
3109
|
userId: string;
|
|
3062
3110
|
name: string;
|
|
3063
3111
|
broadcasterId?: string;
|
|
3064
|
-
}, session: StreamElements.Session.Data, checkWithAPI?: boolean): Promise<
|
|
3112
|
+
}, session: StreamElements.Session.Data, checkWithAPI?: boolean): Promise<1 | 2 | 3>;
|
|
3065
3113
|
/**
|
|
3066
3114
|
* Identifies a user based on the received event and session data, returning their ID, name, role, badges, and top status.
|
|
3067
3115
|
* @param receivedEvent - The event received from the provider (Twitch or YouTube) containing user information.
|
|
@@ -3400,6 +3448,105 @@ declare class AnimateHelper {
|
|
|
3400
3448
|
sequence(animations: AnimResult[], delayFrames?: number | number[]): AnimResult;
|
|
3401
3449
|
}
|
|
3402
3450
|
|
|
3451
|
+
declare class SEHelper {
|
|
3452
|
+
/**
|
|
3453
|
+
* Assign StreamElements custom field schemas from a given data object, with optional prefixing and grouping
|
|
3454
|
+
* @param data - Object containing StreamElements custom field schemas to assign
|
|
3455
|
+
* @param prefix - Optional string to prefix each field key with
|
|
3456
|
+
* @param assign - Optional object to assign the resulting field schemas to (defaults to a new object)
|
|
3457
|
+
* @param group - Optional string to group the fields under (will use existing group if not provided)
|
|
3458
|
+
* @returns - Object containing the assigned StreamElements custom field schemas
|
|
3459
|
+
* @example
|
|
3460
|
+
* ```javascript
|
|
3461
|
+
* const data = {
|
|
3462
|
+
* 'field1': { type: 'text', label: 'Field 1', value: 'Value 1' },
|
|
3463
|
+
* 'field2': { type: 'colorpicker', label: 'Field 2', value: '#ff0000' },
|
|
3464
|
+
* 'field3': { type: 'number', label: 'Field 3', value: 10, min: 0, max: 100, step: 1 },
|
|
3465
|
+
* }
|
|
3466
|
+
*
|
|
3467
|
+
* const fields = assignFields(data, 'prefix-', {}, 'Group 1');
|
|
3468
|
+
*
|
|
3469
|
+
* console.log(fields);
|
|
3470
|
+
* // Output:
|
|
3471
|
+
* // {
|
|
3472
|
+
* // 'prefix-field1': { type: 'text', label: 'Field 1', value: 'Value 1', group: 'Group 1' },
|
|
3473
|
+
* // 'prefix-field2': { type: 'colorpicker', label: 'Field 2', value: '#ff0000', group: 'Group 1' },
|
|
3474
|
+
* // 'prefix-field3': { type: 'number', label: 'Field 3', value: 10, min: 0, max: 100, step: 1, group: 'Group 1' },
|
|
3475
|
+
* // }
|
|
3476
|
+
* ```
|
|
3477
|
+
*/
|
|
3478
|
+
assignFields(data: Record<string, StreamElements.CustomField.Schema>, prefix?: string, assign?: Record<string, StreamElements.CustomField.Schema>, group?: string): Record<string, StreamElements.CustomField.Schema> | undefined;
|
|
3479
|
+
/**
|
|
3480
|
+
* Check for errors in StreamElements custom fields and throw an error if any are found
|
|
3481
|
+
* @param fields - Object containing StreamElements custom field schemas to check for errors
|
|
3482
|
+
* @throws Will throw an error if any custom field has a label that includes 'undefined', if a non-hidden/button field has an undefined value, or if a hidden/button field has an undefined label
|
|
3483
|
+
* @example
|
|
3484
|
+
* ```javascript
|
|
3485
|
+
* const fields = {
|
|
3486
|
+
* 'field1': { type: 'text', label: 'Field 1', value: 'Value 1' },
|
|
3487
|
+
* 'field2': { type: 'colorpicker', label: 'Field 2', value: '#ff0000' },
|
|
3488
|
+
* 'field3': { type: 'hidden', label: 'Hidden Field' },
|
|
3489
|
+
* 'field4': { type: 'button', label: 'Button Field' },
|
|
3490
|
+
* 'field5': { type: 'text', label: 'Undefined Value Field' },
|
|
3491
|
+
* }
|
|
3492
|
+
*
|
|
3493
|
+
* checkFieldErrors(fields);
|
|
3494
|
+
*
|
|
3495
|
+
* // Output:
|
|
3496
|
+
* // Error: StreamElements custom fields have errors: field5 (Undefined Value Field)
|
|
3497
|
+
* ```
|
|
3498
|
+
*/
|
|
3499
|
+
checkFieldErrors(fields: Record<string, StreamElements.CustomField.Schema>): void;
|
|
3500
|
+
/**
|
|
3501
|
+
* Transform CSS variables into StreamElements custom fields
|
|
3502
|
+
* @param data - Array of CSS variable entries (name and value)
|
|
3503
|
+
* @param method - Whether to determine field type based on variable name or value
|
|
3504
|
+
* @param replace - Function to modify the field label based on the variable name
|
|
3505
|
+
* @param subgroup - Function to determine subgrouping of fields based on variable name and value
|
|
3506
|
+
* @returns - Object containing StreamElements custom field schemas
|
|
3507
|
+
* @example
|
|
3508
|
+
* ```javascript
|
|
3509
|
+
* const cssVariables = [
|
|
3510
|
+
* ['--primary-gradient-color', '#ff0000'],
|
|
3511
|
+
* ['--secondary-gradient-color', '#00ff00'],
|
|
3512
|
+
* ];
|
|
3513
|
+
* const fields = transformCSSIntoFields(
|
|
3514
|
+
* cssVariables,
|
|
3515
|
+
* 'name',
|
|
3516
|
+
* (x) => x.replace('gradient', '').trim(),
|
|
3517
|
+
* (key, value) => {
|
|
3518
|
+
* if (key.includes('gradient')) return 'Gradients';
|
|
3519
|
+
* return null;
|
|
3520
|
+
* }
|
|
3521
|
+
* );
|
|
3522
|
+
*
|
|
3523
|
+
* console.log(fields);
|
|
3524
|
+
*
|
|
3525
|
+
* /* Output:
|
|
3526
|
+
* {
|
|
3527
|
+
* '/Gradients': {
|
|
3528
|
+
* type: 'hidden',
|
|
3529
|
+
* label: 'Gradients',
|
|
3530
|
+
* },
|
|
3531
|
+
* '--primary-gradient-color': {
|
|
3532
|
+
* type: 'colorpicker',
|
|
3533
|
+
* label: 'Primary color',
|
|
3534
|
+
* value: '#ff0000',
|
|
3535
|
+
* },
|
|
3536
|
+
* '--secondary-gradient-color': {
|
|
3537
|
+
* type: 'colorpicker',
|
|
3538
|
+
* label: 'Secondary color',
|
|
3539
|
+
* value: '#00ff00',
|
|
3540
|
+
* },
|
|
3541
|
+
* }
|
|
3542
|
+
* ```
|
|
3543
|
+
*/
|
|
3544
|
+
transformCSSIntoFields(data: [string, string][], method?: 'name' | 'value', replace?: (name: string) => string, subgroup?: (key: string, value: string) => string | null): Record<string, StreamElements.CustomField.Schema>;
|
|
3545
|
+
splitFieldLabel(keyPrefix: string, text: string, maxLabelLength?: number): {
|
|
3546
|
+
[k: string]: StreamElements.CustomField.Schema;
|
|
3547
|
+
};
|
|
3548
|
+
}
|
|
3549
|
+
|
|
3403
3550
|
declare namespace Helper {
|
|
3404
3551
|
const animate: AnimateHelper;
|
|
3405
3552
|
const number: NumberHelper;
|
|
@@ -3413,6 +3560,7 @@ declare namespace Helper {
|
|
|
3413
3560
|
const random: RandomHelper;
|
|
3414
3561
|
const fn: FunctionHelper;
|
|
3415
3562
|
const utils: UtilsHelper;
|
|
3563
|
+
const streamelements: SEHelper;
|
|
3416
3564
|
}
|
|
3417
3565
|
|
|
3418
3566
|
declare class Emulator {
|