@reactive-web-components/rwc 2.51.5

package/shared/constants/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const HANDLE_SLOT_CONTEXT_NAME = "handleSlotContext";
+export declare const ON_CONNECTED_NAME = "onConnected";

package/shared/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types/';
+export * from './utils/';

package/shared/types/base-element.d.ts

@@ -0,0 +1 @@
+export type RootStyle = Promise<typeof import("*?inline")> | Array<Promise<typeof import("*?inline")>> | string | string[];

package/shared/types/element.d.ts

@@ -0,0 +1,191 @@
+import { ReactiveSignal } from '../utils/signal';
+export type Split<S extends string, D extends string> = string extends S ? string[] : S extends "" ? [] : S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
+export type Join<T extends unknown[], D extends string> = T extends [] ? "" : T extends [string | number | boolean | bigint] ? `${T[0]}` : T extends [string | number | boolean | bigint, ...infer U] ? `${T[0]}${D}${Join<U, D>}` : string;
+export type HtmlTagName = keyof HTMLElementTagNameMap;
+export type ExtraHTMLElement = HTMLElement & {
+    render?: () => ComponentConfig<any>;
+    onConnected?: (self: ComponentConfig<ExtraHTMLElement>, host: ExtraHTMLElement) => void;
+    slotTemplate?: SlotTemplate;
+};
+export type SignalValue<T> = T extends ReactiveSignal<infer V> ? V : T;
+export type EventKeys<T> = {
+    [k in keyof T]: T[k] extends EventEmitter<any> ? k : never;
+}[keyof T];
+export type ComponentEventListener<T extends ExtraHTMLElement, E extends Event> = (e: E, self: ComponentConfig<T>, host: T) => void;
+export type CustomEventListener<DetailValue, T extends ExtraHTMLElement> = (e: CustomEvent<DetailValue>, self: ComponentConfig<T>, host: T) => void;
+export type CustomEventValue<T> = T extends EventEmitter<infer V> ? V : T;
+export type ComponentCallback<T extends ExtraHTMLElement> = (self: ComponentConfig<T>, host: T) => void;
+export type AttrSignal<T extends HTMLElement & {
+    render?: () => ComponentConfig<any>;
+}> = T["render"] extends () => ComponentConfig<any> ? {
+    [k in keyof T]: T[k] extends ReactiveSignal<any> ? k : never;
+}[keyof T & string] : keyof T & string;
+export type EffectCallback<T extends HTMLElement> = (self: ComponentConfig<T>, host: T) => void;
+export type ComponentContent = ComponentConfig<any> | string | ReactiveSignal<any>;
+export type CompFuncContent = () => ComponentContent | ComponentContent[];
+export type ContextCompFuncContent<T extends ExtraHTMLElement> = (self: ComponentConfig<T>) => ComponentContent | ComponentContent[];
+export type ChildrenContent<T extends ExtraHTMLElement> = ComponentContent | ContextCompFuncContent<T>;
+export interface ComponentConfig<T extends ExtraHTMLElement> {
+    /**
+     * append child components
+     */
+    append(...args: ComponentConfig<any>[]): ComponentConfig<T>;
+    /**
+     * clear and append child components
+     */
+    set(...args: ComponentConfig<any>[]): ComponentConfig<T>;
+    /**
+     * remove child components
+     */
+    removeChild(...args: ComponentConfig<any>[]): ComponentConfig<T>;
+    /**
+     * add html (string) content to host element
+     */
+    addHtmlContent(content: string): ComponentConfig<T>;
+    /**
+     * clear and add html (string) content to host element
+     */
+    setHtmlContent(content: string): ComponentConfig<T>;
+    /**
+     * add css style to host element
+     */
+    addStyle(style: ConfigStyle): ComponentConfig<T>;
+    /**
+     * add event listener to component
+     */
+    addEventlistener<K extends T["render"] extends () => ComponentConfig<any> ? never : keyof HTMLElementEventMap>(eventName: K, cb: ComponentEventListener<T, HTMLElementEventMap[K]>, options?: boolean | AddEventListenerOptions): ComponentConfig<T>;
+    addEventlistener<K extends EventKeys<T>>(eventName: K, cb: CustomEventListener<CustomEventValue<T[K]>, T>, options?: boolean | AddEventListenerOptions): ComponentConfig<T>;
+    /**
+     * set attribute value to component
+     */
+    setAttribute<AttrName extends AttrSignal<T>, AttrValue extends SignalValue<T[AttrName]>>(attrName: AttrName, value: AttrValue): ComponentConfig<T>;
+    setCustomAttribute(attrName: string, value: unknown): ComponentConfig<T>;
+    /**
+     * bind reactive signal with attribute
+     */
+    setReactiveAttribute<AttrName extends AttrSignal<T>, AttrValue extends ReactiveSignal<SignalValue<T[AttrName]>>>(attrName: AttrName, value: AttrValue): ComponentConfig<T>;
+    setReactiveCustomAttribute(attrName: string, value: ReactiveSignal<unknown>): ComponentConfig<T>;
+    /**
+     * remove attribute from component
+     */
+    removeAttribute<AttrName extends keyof T & string>(attrName: AttrName): ComponentConfig<T>;
+    /**
+     * callback function for handling components slot context
+     */
+    /**
+     * callback function for handling components connected event
+     */
+    onConnected(cb: (self: ComponentConfig<T>, host: T) => void): ComponentConfig<T>;
+    /**
+     * add css-class to component
+     */
+    addClass(...className: (string | (() => string))[]): ComponentConfig<T>;
+    /**
+     * set css-class to component
+     */
+    setClass(...className: string[]): ComponentConfig<T>;
+    /**
+     * bind reactive signal with component css-class
+     */
+    addReactiveClass(classConfig: {
+        [className: string]: ReactiveSignal<boolean>;
+    }): ComponentConfig<T>;
+    /**
+     * remove css-class from component
+     */
+    removeClass(...className: string[]): ComponentConfig<T>;
+    /**
+     * replace css-class from component
+     */
+    replaceClass(oldClass: string, newClass: string): ComponentConfig<T>;
+    /**
+     * add reactive effect for component instance
+     */
+    addEffect(cb: EffectCallback<T>): ComponentConfig<T>;
+    /**
+     * bind reactive signal with component innerHtml
+     */
+    addReactiveContent(content: ReactiveSignal<unknown>): ComponentConfig<T>;
+    /**
+     * clear content and bind reactive signal with component innerHtml
+     */
+    setReactiveContent(content: ReactiveSignal<unknown>): ComponentConfig<T>;
+    /**
+     * clear component content
+     */
+    clear(): ComponentConfig<T>;
+    /**
+     * host element
+     */
+    hostElement: T;
+}
+export type SlotTemplate = Record<string, (slotCtx: any) => ComponentConfig<any> | null>;
+export type CustomComponentConfig<T extends ExtraHTMLElement> = {
+    setReactiveValue<ModelType = unknown>(value: ReactiveSignal<ModelType>): CustomComponentConfig<T>;
+    /**
+     * slot template
+     */
+    setSlotTemplate<K extends keyof T["slotTemplate"] & string>(templateConfig: {
+        [slotKey in K]: T["slotTemplate"][slotKey];
+    }): CustomComponentConfig<T>;
+} & ComponentConfig<T>;
+export type CssKey = Exclude<keyof CSSStyleDeclaration, "length" | "parentRule">;
+export interface EventEmitterWrapper {
+    <EventValue = unknown>(): EventEmitter<EventValue>;
+}
+export interface EventEmitter<EventValue> {
+    (_value: EventValue | ReactiveSignal<EventValue>): void;
+    oldValue: null;
+}
+export type SlotContext = {
+    [slotName: string]: ReactiveSignal<unknown>;
+};
+export type AttributeValue<T extends ExtraHTMLElement, K extends AttrSignal<T>> = ReactiveSignal<SignalValue<T[K]>> | SignalValue<T[K]> | (() => SignalValue<T[K]>);
+export type ConfigAttribute<T extends ExtraHTMLElement> = {
+    [key in AttrSignal<T>]?: AttributeValue<T, key>;
+};
+export type ConfigEventListener<T extends ExtraHTMLElement> = {
+    [key in keyof HTMLElementEventMap]?: ComponentEventListener<T, HTMLElementEventMap[key]>;
+};
+export type ConfigCustomEventListener<T extends ExtraHTMLElement> = {
+    [key in EventKeys<T>]?: CustomEventListener<CustomEventValue<T[key]>, T>;
+};
+export type ConfigCustomAttribute = Record<string, unknown>;
+export type ConfigCustomListeners<T extends ExtraHTMLElement> = Record<string, CustomEventListener<unknown, T>>;
+export type ConfigReactiveClassList = Record<string, ReactiveSignal<boolean>>;
+export type ConfigChildren = ComponentContent[];
+export type ConfigEffect<T extends ExtraHTMLElement> = EffectCallback<T>[];
+export type ConfigListeners<T extends ExtraHTMLElement> = ConfigEventListener<T> & ConfigCustomEventListener<T>;
+export type ConfigClassList = (string | (() => string))[];
+export type ConfigStyle = Partial<{
+    [key in CssKey]: CSSStyleDeclaration[key] | (() => CSSStyleDeclaration[key]);
+}> & Partial<{
+    [key in `--${string}`]: string | (() => string);
+}>;
+export type ComponentInitConfig<T extends ExtraHTMLElement> = Partial<{
+    classList: ConfigClassList;
+    style: ConfigStyle;
+    attributes: ConfigAttribute<T>;
+    customAttributes: ConfigCustomAttribute;
+    reactiveClassList: ConfigReactiveClassList;
+    children: ConfigChildren;
+    effects: ConfigEffect<T>;
+    listeners: ConfigListeners<T>;
+    customListeners: ConfigCustomListeners<T>;
+}> & Partial<{
+    [key in AttrSignal<T> as `.${key}`]?: AttributeValue<T, key>;
+} & {
+    [K in keyof HTMLElementEventMap as `@${string & K}`]?: ComponentEventListener<T, HTMLElementEventMap[K]>;
+} & {
+    [K in EventKeys<T> as `@${string & K}`]?: CustomEventListener<CustomEventValue<T[K]>, T>;
+} & {
+    [key in `$${string}`]: EffectCallback<T>;
+}>;
+export declare const isComponentInitConfig: (item: any) => item is ComponentInitConfig<any>;
+export interface ContextEvent<T> extends CustomEvent {
+    detail: {
+        context: string;
+        callback: (value: T) => void;
+    };
+}
+export declare const isComponentConfig: <T extends ExtraHTMLElement>(item: any) => item is ComponentConfig<T>;

package/shared/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base-element';
+export * from './element';
+export * from './list.type';

package/shared/types/list.type.d.ts

@@ -0,0 +1,7 @@
+export interface ListItem {
+    label: string;
+    value: string;
+}
+export interface SelectedItem {
+    [value: string]: string;
+}

package/shared/utils/helpers.d.ts

@@ -0,0 +1,7 @@
+export declare const checkCall: (ctx: HTMLElement, fn?: (...args: any[]) => any, ...args: any[]) => void;
+export declare const projectLog: (...values: any[]) => void;
+export declare const camelToKebab: (v: string) => string;
+export declare const kebabToCamel: (v: string) => string;
+export declare const colorLog: (message: string, ...args: any[]) => void;
+export declare const enableLogs: () => void;
+export declare const disableLogs: () => void;

package/shared/utils/html-decorators/html-property.d.ts

@@ -0,0 +1,6 @@
+import { BaseElementConstructor } from '../html-elements';
+type EventConfig = Pick<CustomEventInit, "bubbles" | "composed">;
+export declare const property: () => (<T extends HTMLElement, K extends keyof T>(target: T, propName: K) => void);
+export declare const event: (config?: EventConfig) => (<T extends HTMLElement, K extends keyof T>(target: T, propName: K) => void);
+export declare const component: (selector: `${string}-${string}`, isClosed?: boolean) => (<T extends BaseElementConstructor>(target: T) => T);
+export {};

package/shared/utils/html-decorators/index.d.ts

@@ -0,0 +1 @@
+export * from './html-property';

package/shared/utils/html-elements/__tests__/element.test.d.ts

@@ -0,0 +1 @@
+export {};

package/shared/utils/html-elements/base-element.d.ts

@@ -0,0 +1,33 @@
+import { ComponentConfig, ComponentContent, RootStyle, SlotContext, SlotTemplate } from '../../types';
+import { ReactiveSignal } from '../signal';
+export declare abstract class BaseElement extends HTMLElement {
+    static observedAttributes: string[];
+    static renderTagName: string;
+    static styles?: string | string[];
+    isSlotLazyLoading: boolean;
+    slotTemplate?: SlotTemplate;
+    slotContext?: SlotContext;
+    rootStyle?: RootStyle;
+    modelValue?: ReactiveSignal<unknown>;
+    providers?: Record<string, ReactiveSignal<any>>;
+    appendAllSlotContent?: () => ComponentConfig<any>;
+    allSlotContent?: ComponentContent[];
+    slotContent: Record<string, ComponentConfig<any>[]>;
+    htmlSlotContent: Record<string, HTMLElement[]>;
+    shadow: ShadowRoot;
+    appendChild<T extends Node>(node: T, isLazy?: boolean): T;
+    constructor(isClosed?: boolean);
+    appendSlotContent(): void;
+    injects: Record<string, ReactiveSignal<any>>;
+    inject<T>(contextKey: string): ReactiveSignal<T | null>;
+    checkInjects(): void;
+    abstract render(): ComponentConfig<any>;
+    setReactiveValue<ModelType = unknown>(value: ReactiveSignal<ModelType>): void;
+}
+export interface BaseElementConstructor {
+    new (...params: any[]): BaseElement;
+    renderTagName: string;
+    styles?: string | string[];
+    observedAttributes: string[];
+}
+export declare const isBaseElement: (item: any) => item is BaseElement;

package/shared/utils/html-elements/custom-element.d.ts

@@ -0,0 +1,11 @@
+import { ChildrenContent, ComponentConfig, ComponentInitConfig, CustomComponentConfig, EventEmitter, SlotTemplate } from '../../types/element';
+import { BaseElement, BaseElementConstructor } from './base-element';
+export declare const createCustomElement: <T extends BaseElement>(tagName: string, config?: ComponentInitConfig<T>) => CustomComponentConfig<T>;
+export declare const createCustomEl: <T extends BaseElement>(tagName: string, config?: ComponentInitConfig<T>) => (...content: ChildrenContent<T>[]) => CustomComponentConfig<T>;
+export declare const createCustom: <T extends BaseElementConstructor, K extends string | ComponentInitConfig<InstanceType<T>>>(srcComp: T, classList?: K, config?: K extends string ? ComponentInitConfig<InstanceType<T>> : never) => (...content: ChildrenContent<InstanceType<T>>[]) => CustomComponentConfig<InstanceType<T>>;
+export declare const customEl: <T extends BaseElementConstructor, K extends string | ComponentInitConfig<InstanceType<T>>>(srcComp: T, classList?: K, config?: K extends string ? ComponentInitConfig<InstanceType<T>> : never) => ((...content: ChildrenContent<InstanceType<T>>[]) => CustomComponentConfig<InstanceType<T>>) & {
+    setReactiveValue<ModelType = unknown>(value: import('..').ReactiveSignal<ModelType>): CustomComponentConfig<InstanceType<T>>;
+    setSlotTemplate<K_1 extends keyof InstanceType<T>["slotTemplate"] & string>(templateConfig: { [slotKey in K_1]: InstanceType<T>["slotTemplate"][slotKey]; }): CustomComponentConfig<InstanceType<T>>;
+} & ComponentConfig<InstanceType<T>>;
+export declare const newEventEmitter: <T = void>() => EventEmitter<T>;
+export declare const defineSlotTemplate: <S extends SlotTemplate>() => Partial<S>;

package/shared/utils/html-elements/element-helper.d.ts

@@ -0,0 +1,21 @@
+import { ReactiveSignal } from '../signal';
+import { ComponentConfig, ComponentContent, ComponentInitConfig, ConfigAttribute, ConfigChildren, ConfigClassList, ConfigCustomAttribute, ConfigEffect, ConfigListeners, ConfigReactiveClassList, ConfigStyle, CustomComponentConfig, ExtraHTMLElement } from '../../types/element';
+export declare const eventEmitter: () => () => void;
+export declare const addHtmlContent: <T extends HTMLElement = HTMLElement>(htmlElement: T, content: string | unknown) => T;
+export declare const setHtmlContent: <T extends HTMLElement = HTMLElement>(htmlElement: T, content: string | unknown) => T;
+export declare const htmlEffectWrapper: (content: ReactiveSignal<unknown>) => HTMLDivElement;
+export declare const elementHelpers: <T extends ExtraHTMLElement>(wrapper: T) => ComponentConfig<T>;
+export declare const classList: (strings: TemplateStringsArray, ...args: (string | (() => string))[]) => {
+    classList: (string | (() => string))[];
+};
+export declare const cls: (strings: TemplateStringsArray, ...values: (string | (() => string))[]) => ReturnType<typeof classList>;
+export declare const initComponent: <T extends ExtraHTMLElement, K extends ComponentConfig<T> | CustomComponentConfig<T>>(component: K, config?: ComponentInitConfig<T>) => K;
+export declare const setListeners: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, listeners?: ConfigListeners<T>) => void;
+export declare const setEffects: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, effects?: ConfigEffect<T>) => void | undefined;
+export declare const setChildren: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, children?: ConfigChildren) => ComponentConfig<T>;
+export declare const addCustomAttributes: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, attributeList?: ConfigCustomAttribute) => void;
+export declare const addClassList: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, classList?: ConfigClassList) => ComponentConfig<T>;
+export declare const addReactiveClassList: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, classList?: ConfigReactiveClassList) => ComponentConfig<T>;
+export declare const addStyleList: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, styleList?: ConfigStyle) => ComponentConfig<T>;
+export declare const addAttributeList: <T extends ExtraHTMLElement>(comp: ComponentConfig<T>, attributeList?: ConfigAttribute<T>) => void;
+export declare const appendContentItem: <T extends ExtraHTMLElement, Component extends ComponentConfig<T> | CustomComponentConfig<T>>(comp: Component, ...items: ComponentContent[]) => Component;

package/shared/utils/html-elements/element.d.ts

@@ -0,0 +1,84 @@
+import { ChildrenContent, CompFuncContent, ComponentConfig, ComponentInitConfig, CustomComponentConfig, ExtraHTMLElement, HtmlTagName } from '../../types/element';
+import { ReactiveSignal } from '../signal';
+export declare const createElement: <K extends HtmlTagName>(tagName: K, config?: ComponentInitConfig<HTMLElementTagNameMap[K]>) => ComponentConfig<HTMLElementTagNameMap[K]>;
+export declare const createEl: <K extends HtmlTagName>(tagName: `${K} ${string}` | K, config?: ComponentInitConfig<HTMLElementTagNameMap[K]>) => (...content: ChildrenContent<HTMLElementTagNameMap[K]>[]) => ComponentConfig<HTMLElementTagNameMap[K]>;
+export declare const el: <K extends HtmlTagName>(tagName: `${K} ${string}` | K, config?: ComponentInitConfig<HTMLElementTagNameMap[K]>) => ((...content: ChildrenContent<HTMLElementTagNameMap[K]>[]) => ComponentConfig<HTMLElementTagNameMap[K]>) & ComponentConfig<HTMLElementTagNameMap[K]>;
+/**
+ * Создает реактивный контейнер-элемент, который автоматически обновляет свое содержимое на основе функции обратного вызова.
+ * Контейнер будет перерендериваться при изменении зависимостей функции обратного вызова.
+ */
+export declare const getSignalContent: (cb: CompFuncContent) => ComponentConfig<HTMLDivElement>;
+/**
+ * Создает реактивный список элементов, который автоматически обновляется при изменении массива данных.
+ * Поддерживает эффективное обновление DOM с минимальными перерисовками.
+ *
+ * @template I - Тип элементов массива (должен быть объектом)
+ * @template K - Ключ для уникальной идентификации элементов
+ * @param items - Реактивный сигнал с массивом данных
+ * @param keyFn - Функция для получения уникального ключа элемента
+ * @param cb - Функция рендеринга элемента, принимающая элемент, индекс и весь массив
+ * @returns Контейнер с реактивным списком элементов
+ */
+export declare const getList: <I extends Record<string, any>, K extends keyof I>(items: ReactiveSignal<I[]>, keyFn: (item: I) => I[K] | string, cb: (item: I, index: number, items: I[]) => ComponentConfig<any>) => ComponentConfig<HTMLDivElement>;
+export declare const oldGetList: <I extends Record<string, any>, K extends keyof I>(items: ReactiveSignal<I[]>, keyFn: (item: I) => I[K] | string, cb: (item: I, index: number, items: I[]) => ComponentConfig<any>) => ComponentConfig<HTMLDivElement>;
+/**
+ * Создает реактивный компонент, который автоматически обновляется при изменении его зависимостей.
+ *
+ * @example
+ * // Создание компонента, который обновляется при изменении сигнала
+ * const count = signal(0);
+ * const counterComponent = signalComponent(() =>
+ *   el('div', { text: () => `Счетчик: ${count()}` })
+ * );
+ *
+ * // Позже, когда значение count изменится, компонент автоматически обновится
+ * count(1); // Компонент перерендерится с текстом "Счетчик: 1"
+ */
+export declare const signalComponent: <T extends ExtraHTMLElement, R extends ComponentConfig<T> | CustomComponentConfig<T> | Array<ComponentConfig<T> | CustomComponentConfig<T>>>(cb: () => R) => R;
+export declare const isSlotTemplate: (item: Element) => item is ExtraHTMLElement;
+export declare const unsafeHtml: (html: string | ReactiveSignal<string>) => ComponentConfig<HTMLDivElement>;
+export declare const renderIf: (condition: boolean, content: CompFuncContent, elseContent?: CompFuncContent) => ComponentConfig<HTMLDivElement>;
+export declare const rxRenderIf: (condition: ReactiveSignal<any> | (() => boolean), content: CompFuncContent, elseContent?: CompFuncContent) => ComponentConfig<HTMLDivElement>;
+/**
+ * Условный рендеринг компонентов на основе условия.
+ * Поддерживает как статические, так и реактивные условия.
+ *
+ * @template T1 - Тип HTML-элемента для основного контента
+ * @template T2 - Тип HTML-элемента для альтернативного контента
+ *
+ * @param {boolean | ReactiveSignal<boolean> | (() => boolean)} condition - Условие для рендеринга.
+ *        Может быть статическим boolean, реактивным сигналом или функцией, возвращающей boolean.
+ * @param {() => ComponentConfig<T1>} content - Функция, возвращающая компонент для отображения при истинном условии
+ * @param {() => ComponentConfig<T2>} [elseContent] - Опциональная функция, возвращающая компонент для отображения при ложном условии
+ *
+ * @returns {ComponentConfig<T1> | ComponentConfig<T2> | ''} Компонент, соответствующий условию, или пустая строка
+ *
+ * @example
+ * // Статическое условие
+ * const isVisible = true;
+ * const component = when(
+ *   isVisible,
+ *   () => el('div', { text: 'Видимый контент' }),
+ *   () => el('div', { text: 'Скрытый контент' })
+ * );
+ *
+ * @example
+ * // Реактивное условие с сигналом
+ * const isActive = signal(false);
+ * const component = when(
+ *   isActive,
+ *   () => el('div', { text: 'Активный' }),
+ *   () => el('div', { text: 'Неактивный' })
+ * );
+ *
+ * @example
+ * // Условный рендеринг без elseContent
+ * const hasData = signal(true);
+ * const component = when(
+ *   hasData,
+ *   () => el('div', { text: 'Данные загружены' })
+ * );
+ */
+export declare const when: (condition: boolean | ReactiveSignal<any> | (() => boolean), content: CompFuncContent, elseContent?: CompFuncContent) => ComponentConfig<HTMLDivElement>;
+export declare const showIf: (condition: boolean | ReactiveSignal<any> | (() => boolean), template: CompFuncContent) => ComponentConfig<HTMLDivElement>;
+export declare const show: (condition: boolean | ReactiveSignal<any> | (() => boolean), template: CompFuncContent, elseTemplate?: CompFuncContent) => ComponentConfig<HTMLDivElement>;

package/shared/utils/html-elements/index.d.ts

@@ -0,0 +1,4 @@
+export * from './base-element';
+export * from './custom-element';
+export * from './element';
+export * from './element-helper';

package/shared/utils/html-fabric/custom-fabric.d.ts

@@ -0,0 +1,3 @@
+import { ChildrenContent, ComponentInitConfig } from '../../types';
+import { BaseElementConstructor } from '../html-elements';
+export declare const useCustomComponent: <B extends BaseElementConstructor>(comp: B, selector?: `${string}-${string}`, isClosed?: boolean) => (config?: ComponentInitConfig<InstanceType<B>> | ChildrenContent<InstanceType<B>>, ...content: ChildrenContent<InstanceType<B>>[]) => import('../../types').CustomComponentConfig<InstanceType<B>>;

package/shared/utils/html-fabric/fabric.d.ts

@@ -0,0 +1,67 @@
+import { ChildrenContent, ComponentInitConfig, HtmlTagName } from '../../types/element';
+import { el } from '../html-elements/element';
+type HtmlFactories = {
+    [K in HtmlTagName]: (config?: ComponentInitConfig<HTMLElementTagNameMap[K]> | ChildrenContent<HTMLElementTagNameMap[K]>, ...content: ChildrenContent<HTMLElementTagNameMap[K]>[]) => ReturnType<ReturnType<typeof el<K>>>;
+};
+declare const htmlFactories: HtmlFactories;
+export declare const div: (config?: ChildrenContent<HTMLDivElement> | ComponentInitConfig<HTMLDivElement> | undefined, ...content: ChildrenContent<HTMLDivElement>[]) => import('../..').ComponentConfig<HTMLDivElement>;
+export declare const span: (config?: ChildrenContent<HTMLSpanElement> | ComponentInitConfig<HTMLSpanElement> | undefined, ...content: ChildrenContent<HTMLSpanElement>[]) => import('../..').ComponentConfig<HTMLSpanElement>;
+export declare const section: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const input: (config?: ChildrenContent<HTMLInputElement> | ComponentInitConfig<HTMLInputElement> | undefined, ...content: ChildrenContent<HTMLInputElement>[]) => import('../..').ComponentConfig<HTMLInputElement>;
+export declare const button: (config?: ChildrenContent<HTMLButtonElement> | ComponentInitConfig<HTMLButtonElement> | undefined, ...content: ChildrenContent<HTMLButtonElement>[]) => import('../..').ComponentConfig<HTMLButtonElement>;
+export declare const table: (config?: ChildrenContent<HTMLTableElement> | ComponentInitConfig<HTMLTableElement> | undefined, ...content: ChildrenContent<HTMLTableElement>[]) => import('../..').ComponentConfig<HTMLTableElement>;
+export declare const tr: (config?: ChildrenContent<HTMLTableRowElement> | ComponentInitConfig<HTMLTableRowElement> | undefined, ...content: ChildrenContent<HTMLTableRowElement>[]) => import('../..').ComponentConfig<HTMLTableRowElement>;
+export declare const td: (config?: ChildrenContent<HTMLTableCellElement> | ComponentInitConfig<HTMLTableCellElement> | undefined, ...content: ChildrenContent<HTMLTableCellElement>[]) => import('../..').ComponentConfig<HTMLTableCellElement>;
+export declare const th: (config?: ChildrenContent<HTMLTableCellElement> | ComponentInitConfig<HTMLTableCellElement> | undefined, ...content: ChildrenContent<HTMLTableCellElement>[]) => import('../..').ComponentConfig<HTMLTableCellElement>;
+export declare const ul: (config?: ChildrenContent<HTMLUListElement> | ComponentInitConfig<HTMLUListElement> | undefined, ...content: ChildrenContent<HTMLUListElement>[]) => import('../..').ComponentConfig<HTMLUListElement>;
+export declare const li: (config?: ChildrenContent<HTMLLIElement> | ComponentInitConfig<HTMLLIElement> | undefined, ...content: ChildrenContent<HTMLLIElement>[]) => import('../..').ComponentConfig<HTMLLIElement>;
+export declare const ol: (config?: ChildrenContent<HTMLOListElement> | ComponentInitConfig<HTMLOListElement> | undefined, ...content: ChildrenContent<HTMLOListElement>[]) => import('../..').ComponentConfig<HTMLOListElement>;
+export declare const form: (config?: ChildrenContent<HTMLFormElement> | ComponentInitConfig<HTMLFormElement> | undefined, ...content: ChildrenContent<HTMLFormElement>[]) => import('../..').ComponentConfig<HTMLFormElement>;
+export declare const label: (config?: ChildrenContent<HTMLLabelElement> | ComponentInitConfig<HTMLLabelElement> | undefined, ...content: ChildrenContent<HTMLLabelElement>[]) => import('../..').ComponentConfig<HTMLLabelElement>;
+export declare const select: (config?: ChildrenContent<HTMLSelectElement> | ComponentInitConfig<HTMLSelectElement> | undefined, ...content: ChildrenContent<HTMLSelectElement>[]) => import('../..').ComponentConfig<HTMLSelectElement>;
+export declare const option: (config?: ChildrenContent<HTMLOptionElement> | ComponentInitConfig<HTMLOptionElement> | undefined, ...content: ChildrenContent<HTMLOptionElement>[]) => import('../..').ComponentConfig<HTMLOptionElement>;
+export declare const textarea: (config?: ChildrenContent<HTMLTextAreaElement> | ComponentInitConfig<HTMLTextAreaElement> | undefined, ...content: ChildrenContent<HTMLTextAreaElement>[]) => import('../..').ComponentConfig<HTMLTextAreaElement>;
+export declare const img: (config?: ChildrenContent<HTMLImageElement> | ComponentInitConfig<HTMLImageElement> | undefined, ...content: ChildrenContent<HTMLImageElement>[]) => import('../..').ComponentConfig<HTMLImageElement>;
+export declare const a: (config?: ChildrenContent<HTMLAnchorElement> | ComponentInitConfig<HTMLAnchorElement> | undefined, ...content: ChildrenContent<HTMLAnchorElement>[]) => import('../..').ComponentConfig<HTMLAnchorElement>;
+export declare const p: (config?: ChildrenContent<HTMLParagraphElement> | ComponentInitConfig<HTMLParagraphElement> | undefined, ...content: ChildrenContent<HTMLParagraphElement>[]) => import('../..').ComponentConfig<HTMLParagraphElement>;
+export declare const h1: (config?: ChildrenContent<HTMLHeadingElement> | ComponentInitConfig<HTMLHeadingElement> | undefined, ...content: ChildrenContent<HTMLHeadingElement>[]) => import('../..').ComponentConfig<HTMLHeadingElement>;
+export declare const h2: (config?: ChildrenContent<HTMLHeadingElement> | ComponentInitConfig<HTMLHeadingElement> | undefined, ...content: ChildrenContent<HTMLHeadingElement>[]) => import('../..').ComponentConfig<HTMLHeadingElement>;
+export declare const h3: (config?: ChildrenContent<HTMLHeadingElement> | ComponentInitConfig<HTMLHeadingElement> | undefined, ...content: ChildrenContent<HTMLHeadingElement>[]) => import('../..').ComponentConfig<HTMLHeadingElement>;
+export declare const h4: (config?: ChildrenContent<HTMLHeadingElement> | ComponentInitConfig<HTMLHeadingElement> | undefined, ...content: ChildrenContent<HTMLHeadingElement>[]) => import('../..').ComponentConfig<HTMLHeadingElement>;
+export declare const h5: (config?: ChildrenContent<HTMLHeadingElement> | ComponentInitConfig<HTMLHeadingElement> | undefined, ...content: ChildrenContent<HTMLHeadingElement>[]) => import('../..').ComponentConfig<HTMLHeadingElement>;
+export declare const h6: (config?: ChildrenContent<HTMLHeadingElement> | ComponentInitConfig<HTMLHeadingElement> | undefined, ...content: ChildrenContent<HTMLHeadingElement>[]) => import('../..').ComponentConfig<HTMLHeadingElement>;
+export declare const br: (config?: ChildrenContent<HTMLBRElement> | ComponentInitConfig<HTMLBRElement> | undefined, ...content: ChildrenContent<HTMLBRElement>[]) => import('../..').ComponentConfig<HTMLBRElement>;
+export declare const hr: (config?: ChildrenContent<HTMLHRElement> | ComponentInitConfig<HTMLHRElement> | undefined, ...content: ChildrenContent<HTMLHRElement>[]) => import('../..').ComponentConfig<HTMLHRElement>;
+export declare const pre: (config?: ChildrenContent<HTMLPreElement> | ComponentInitConfig<HTMLPreElement> | undefined, ...content: ChildrenContent<HTMLPreElement>[]) => import('../..').ComponentConfig<HTMLPreElement>;
+export declare const code: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const nav: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const header: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const footer: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const main: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const aside: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const article: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const figure: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const figcaption: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const blockquote: (config?: ChildrenContent<HTMLQuoteElement> | ComponentInitConfig<HTMLQuoteElement> | undefined, ...content: ChildrenContent<HTMLQuoteElement>[]) => import('../..').ComponentConfig<HTMLQuoteElement>;
+export declare const cite: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const small: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const strong: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const em: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const b: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const i: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const u: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const s: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const sub: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const sup: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const mark: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const del: (config?: ChildrenContent<HTMLModElement> | ComponentInitConfig<HTMLModElement> | undefined, ...content: ChildrenContent<HTMLModElement>[]) => import('../..').ComponentConfig<HTMLModElement>;
+export declare const ins: (config?: ChildrenContent<HTMLModElement> | ComponentInitConfig<HTMLModElement> | undefined, ...content: ChildrenContent<HTMLModElement>[]) => import('../..').ComponentConfig<HTMLModElement>;
+export declare const details: (config?: ChildrenContent<HTMLDetailsElement> | ComponentInitConfig<HTMLDetailsElement> | undefined, ...content: ChildrenContent<HTMLDetailsElement>[]) => import('../..').ComponentConfig<HTMLDetailsElement>;
+export declare const summary: (config?: ChildrenContent<HTMLElement> | ComponentInitConfig<HTMLElement> | undefined, ...content: ChildrenContent<HTMLElement>[]) => import('../..').ComponentConfig<HTMLElement>;
+export declare const progress: (config?: ChildrenContent<HTMLProgressElement> | ComponentInitConfig<HTMLProgressElement> | undefined, ...content: ChildrenContent<HTMLProgressElement>[]) => import('../..').ComponentConfig<HTMLProgressElement>;
+export declare const meter: (config?: ChildrenContent<HTMLMeterElement> | ComponentInitConfig<HTMLMeterElement> | undefined, ...content: ChildrenContent<HTMLMeterElement>[]) => import('../..').ComponentConfig<HTMLMeterElement>;
+export declare const audio: (config?: ChildrenContent<HTMLAudioElement> | ComponentInitConfig<HTMLAudioElement> | undefined, ...content: ChildrenContent<HTMLAudioElement>[]) => import('../..').ComponentConfig<HTMLAudioElement>;
+export declare const video: (config?: ChildrenContent<HTMLVideoElement> | ComponentInitConfig<HTMLVideoElement> | undefined, ...content: ChildrenContent<HTMLVideoElement>[]) => import('../..').ComponentConfig<HTMLVideoElement>;
+export declare const canvas: (config?: ChildrenContent<HTMLCanvasElement> | ComponentInitConfig<HTMLCanvasElement> | undefined, ...content: ChildrenContent<HTMLCanvasElement>[]) => import('../..').ComponentConfig<HTMLCanvasElement>;
+export declare const slot: (config?: ChildrenContent<HTMLSlotElement> | ComponentInitConfig<HTMLSlotElement> | undefined, ...content: ChildrenContent<HTMLSlotElement>[]) => import('../..').ComponentConfig<HTMLSlotElement>;
+export default htmlFactories;

package/shared/utils/html-fabric/fn-component.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig, ConfigClassList, ConfigReactiveClassList } from '../../types/element';
+export declare const createComponent: <Props, R extends ComponentConfig<HTMLElement>>(cb: (props: Props) => R) => (props: Props & {
+    classList?: ConfigClassList;
+    reactiveClassList?: ConfigReactiveClassList;
+}) => ReturnType<typeof cb>;

package/shared/utils/html-fabric/index.d.ts

@@ -0,0 +1,3 @@
+export * from './custom-fabric';
+export * from './fabric';
+export * from './fn-component';

package/shared/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './helpers';
+export * from './html-decorators';
+export * from './html-elements';
+export * from './html-fabric';
+export * from './signal';

package/shared/utils/routing/router.d.ts

@@ -0,0 +1,10 @@
+import { ComponentConfig } from '../../types';
+type RouterConfig = {
+    path: string;
+    comp: () => ComponentConfig<any>;
+}[];
+export declare const routes: RouterConfig;
+export declare const linkTo: (path: string, comp: ComponentConfig<any>) => void;
+export declare const comparePaths: (path1: string, path2: string) => boolean;
+export declare const routerOutlet: (routes: RouterConfig) => ComponentConfig<HTMLDivElement>;
+export {};

package/shared/utils/signal/helpers.types.d.ts

@@ -0,0 +1,3 @@
+export type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+export type IsPromise<T> = T extends Promise<any> ? true : false;
+export type IsPromiseFunction<T> = T extends () => Promise<any> ? true : false;

package/shared/utils/signal/index.d.ts

@@ -0,0 +1,3 @@
+export * from './signal';
+export * from './signal.type';
+export * from './utils';

package/shared/utils/signal/signal.d.ts

@@ -0,0 +1,18 @@
+import { IsPromise, IsPromiseFunction, UnwrapPromise } from './helpers.types';
+import { CompareFn, ReactiveSignal, UnwrapSignal } from './signal.type';
+export declare function signal<T = unknown>(initValue: T, signalCompareFn?: CompareFn<T>): ReactiveSignal<T>;
+export declare function effect(cb: () => void): void;
+export declare const isReactiveSignal: <R extends ReactiveSignal<any>>(v: R | any) => v is R;
+/**
+ * Reactive String (rs). Создаёт зависимый string сигнал от источника.
+ * @param strings
+ * @param values
+ * @returns
+ *
+ * @example
+ * const source: ReactiveSignal<string> = signal('test')
+ * const dependent: ReactiveSignal<string> = rs`abc-${source}`
+ * // log: "abc-test"
+ */
+export declare function rs<T extends ReactiveSignal<any> | any>(strings: TemplateStringsArray, ...values: T[]): ReactiveSignal<string>;
+export declare function createSignal<T extends Promise<any> | (() => any), I extends UnwrapPromise<T extends () => infer R ? UnwrapSignal<R> : T> | undefined>(cb: T, initializeValue?: I): I extends undefined ? (IsPromise<T> extends true ? ReactiveSignal<UnwrapPromise<T> | null> : (IsPromiseFunction<T> extends true ? ReactiveSignal<UnwrapPromise<T extends () => infer R ? R : never> | null> : ReactiveSignal<UnwrapPromise<T extends () => infer R ? UnwrapSignal<R> : never>>)) : ReactiveSignal<UnwrapPromise<T extends () => infer R ? UnwrapSignal<R> : T>>;

package/shared/utils/signal/signal.type.d.ts

@@ -0,0 +1,18 @@
+import { UnwrapPromise } from './helpers.types';
+export interface SignalUpdateFunc<T> {
+    (v: Readonly<T>): T;
+}
+export type CompareFn<T> = (oldValue: T, newValue: T) => boolean;
+export interface ReactiveSignal<T> {
+    (): T;
+    oldValue: Readonly<T>;
+    initValue: Readonly<T>;
+    set(value: T): void;
+    forceSet(value: T): void;
+    setCompareFn(compareFn: CompareFn<T>): ReactiveSignal<T>;
+    update(cb: SignalUpdateFunc<T>): void;
+    clearSubscribers(): void;
+    peek(): Readonly<T>;
+    pipe<R>(fn: (sg: T) => R): ReactiveSignal<R extends Promise<any> ? UnwrapPromise<R> : UnwrapSignal<R>>;
+}
+export type UnwrapSignal<T> = T extends ReactiveSignal<infer U> ? U : T;

package/shared/utils/signal/utils.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveSignal, UnwrapSignal } from './signal.type';
+/**
+ * Универсальная функция для двустороннего связывания двух реактивных сигналов из rwc
+ * @param signalA Первый сигнал
+ * @param signalB Второй сигнал
+ */
+export declare function bindReactiveSignals<T>(signalA: ReactiveSignal<T>, signalB: ReactiveSignal<T>): void;
+export declare function forkJoin<T extends readonly ReactiveSignal<unknown>[]>(...signals: T): ReactiveSignal<{
+    [K in keyof T]: UnwrapSignal<T[K]>;
+}>;

package/test-components/examples/button/button.d.ts

@@ -0,0 +1,12 @@
+import { ChildrenContent } from '../../../shared/types';
+import { BaseElement } from '../../../shared/utils/html-elements';
+export declare class Button extends BaseElement {
+    static styles: string;
+    render(): import('../../../shared/types').ComponentConfig<HTMLButtonElement>;
+}
+export declare const ButtonComp: (config?: ChildrenContent<Button> | import('../../../shared/types').ComponentInitConfig<Button> | undefined, ...content: ChildrenContent<Button>[]) => import('../../../shared/types').CustomComponentConfig<Button>;
+export declare const buttonCompTest: (...content: ChildrenContent<HTMLElement>[]) => import('../../../shared/types').ComponentConfig<HTMLButtonElement>;
+export declare class ButtonTest extends BaseElement {
+    static styles: string;
+    render(): import('../../../shared/types').ComponentConfig<HTMLDivElement>;
+}

package/test-components/examples/counter.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '../../shared/utils';
+declare class Counter extends BaseElement {
+    countState: import('../../shared/utils').ReactiveSignal<number>;
+    countChange: import('../../shared').EventEmitter<number>;
+    testProperty: import('../../shared/utils').ReactiveSignal<number>;
+    position: import('../../shared/utils').ReactiveSignal<"bottom" | "top">;
+    rootStyle: Promise<typeof import("*?inline")>;
+    render(): import('../../shared').ComponentConfig<HTMLDivElement>;
+}
+export declare const CounterComponent: (config?: import('../../shared').ChildrenContent<Counter> | import('../../shared').ComponentInitConfig<Counter> | undefined, ...content: import('../../shared').ChildrenContent<Counter>[]) => import('../../shared').CustomComponentConfig<Counter>;
+declare class TestCounter extends BaseElement {
+    render(): import('../../shared').ComponentConfig<HTMLDivElement>;
+}
+export declare const TestComponent: (config?: import('../../shared').ChildrenContent<TestCounter> | import('../../shared').ComponentInitConfig<TestCounter> | undefined, ...content: import('../../shared').ChildrenContent<TestCounter>[]) => import('../../shared').CustomComponentConfig<TestCounter>;
+export {};