flinker-markdown 1.0.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.
Files changed (11) hide show
  1. package/LICENSE.md +19 -0
  2. package/README.md +13 -0
  3. package/dist/esm/components.js +707 -0
  4. package/dist/esm/core.js +190 -0
  5. package/dist/esm/index.js +3 -0
  6. package/dist/esm/processor.js +155 -0
  7. package/dist/types/components.d.ts +156 -0
  8. package/dist/types/core.d.ts +91 -0
  9. package/dist/types/index.d.ts +3 -0
  10. package/dist/types/processor.d.ts +23 -0
  11. package/package.json +48 -0
package/dist/esm/core.js ADDED
@@ -0,0 +1,190 @@
1
+ import { StyleSheetProcessor } from './processor';
2
+ const RuleBuilder = () => {
3
+ //const notAllowedSymbolsInClassName = /[%. ()/#"]+/g
4
+ const classNameHash = new Map();
5
+ let classNameHashVolume = 0;
6
+ // Creating of dynamic stylesheets are enabled only in Chrome (23.06.2023)
7
+ // const styleSheet = new CSSStyleSheet();
8
+ // document.adoptedStyleSheets = [styleSheet];
9
+ const styleSheet = window.document.styleSheets[0];
10
+ if (!styleSheet)
11
+ console.error('RuleBuilder:: window.document.styleSheets[0] returned undefined!');
12
+ const styleSheetProcessor = new StyleSheetProcessor(styleSheet);
13
+ let pseudoClass = 'none';
14
+ let rulePriority = 'low';
15
+ const operator = Object.create(null);
16
+ const reset = (pseudoClassValue, rulePriorityValue) => {
17
+ styleSheetProcessor.clearValues();
18
+ pseudoClass = pseudoClassValue;
19
+ rulePriority = rulePriorityValue;
20
+ };
21
+ const getClassName = (tag) => {
22
+ const hashSum = styleSheetProcessor.valuesToHashSum();
23
+ if (!hashSum)
24
+ return '';
25
+ if (classNameHash.has(hashSum)) {
26
+ return classNameHash.get(hashSum);
27
+ }
28
+ else {
29
+ const className = 'cn' + classNameHashVolume.toString(36);
30
+ classNameHash.set(hashSum, className);
31
+ classNameHashVolume++;
32
+ classNameHashVolume % 100 === 0 && console.log('Total css selectors:', classNameHashVolume);
33
+ styleSheetProcessor.insertRule(className, tag);
34
+ return className;
35
+ }
36
+ };
37
+ const addRule = (parentSelector, childTagSelector) => {
38
+ const hashSum = styleSheetProcessor.valuesToHashSum();
39
+ if (!hashSum)
40
+ return;
41
+ const selector = parentSelector + ' ' + childTagSelector;
42
+ if (classNameHash.has(selector))
43
+ return;
44
+ styleSheetProcessor.insertRule(selector, '');
45
+ };
46
+ const setValue = (key, value, appendToClassSelectorName = true) => {
47
+ if (value === undefined)
48
+ return;
49
+ styleSheetProcessor.setValue(pseudoClass, key, value, rulePriority, appendToClassSelectorName);
50
+ };
51
+ operator.width = (value) => { setValue('width', value); };
52
+ operator.height = (value) => { setValue('height', value); };
53
+ operator.minHeight = (value) => { setValue('min-height', value); };
54
+ operator.maxHeight = (value) => { setValue('max-height', value); };
55
+ operator.minWidth = (value) => { setValue('min-width', value); };
56
+ operator.maxWidth = (value) => { setValue('max-width', value); };
57
+ operator.left = (value) => { setValue('left', value); };
58
+ operator.right = (value) => { setValue('right', value); };
59
+ operator.top = (value) => { setValue('top', value); };
60
+ operator.bottom = (value) => { setValue('bottom', value); };
61
+ operator.display = (value) => { setValue('display', value); };
62
+ operator.paddingLeft = (value) => { setValue('padding-left', value); };
63
+ operator.paddingRight = (value) => { setValue('padding-right', value); };
64
+ operator.paddingHorizontal = (value) => {
65
+ setValue('padding-left', value);
66
+ setValue('padding-right', value);
67
+ };
68
+ operator.paddingTop = (value) => { setValue('padding-top', value); };
69
+ operator.paddingBottom = (value) => { setValue('padding-bottom', value); };
70
+ operator.paddingVertical = (value) => {
71
+ setValue('padding-top', value);
72
+ setValue('padding-bottom', value);
73
+ };
74
+ operator.padding = (value) => { setValue('padding', value); };
75
+ operator.layer = (value) => { setValue('z-index', value); };
76
+ operator.position = (value) => { setValue('position', value); };
77
+ operator.mouseEnabled = (value) => { setValue('pointer-events', value ? 'auto' : 'none'); };
78
+ operator.pointerEvents = (value) => { setValue('pointer-events', value); };
79
+ operator.enableOwnScroller = (value) => { setValue('overflow-y', value ? 'auto' : 'hidden'); };
80
+ operator.disableScroll = (value) => { value && setValue('overflow', 'hidden'); };
81
+ operator.disableHorizontalScroll = (value) => { value && setValue('overflow-x', 'hidden'); };
82
+ operator.cursor = (value) => { value && setValue('cursor', value); };
83
+ operator.boxSizing = (value) => {
84
+ setValue('box-sizing', value);
85
+ setValue('-webkit-box-sizing', value, false);
86
+ setValue('-moz-box-sizing', value, false);
87
+ };
88
+ operator.display = (value) => { setValue('display', value); };
89
+ operator.gap = (value) => { setValue('gap', value); };
90
+ operator.flexDirection = (value) => { setValue('flex-direction', value); };
91
+ operator.flexGrow = (value) => { setValue('flex-grow', value); };
92
+ operator.flexShrink = (value) => { setValue('flex-shrink', value); };
93
+ operator.wrap = (value) => { value && setValue('flex-wrap', 'wrap'); };
94
+ operator.alignItems = (value) => { setValue('align-items', value); };
95
+ operator.justifyContent = (value) => { setValue('justify-content', value); };
96
+ operator.margin = (value) => { setValue('margin', value); };
97
+ operator.marginLeft = (value) => { setValue('margin-left', value); };
98
+ operator.marginRight = (value) => { setValue('margin-right', value); };
99
+ operator.marginTop = (value) => { setValue('margin-top', value); };
100
+ operator.marginBottom = (value) => { setValue('margin-bottom', value); };
101
+ operator.marginHorizontal = (value) => {
102
+ setValue('margin-left', value);
103
+ setValue('margin-right', value);
104
+ };
105
+ operator.marginVertical = (value) => {
106
+ setValue('margin-top', value);
107
+ setValue('margin-bottom', value);
108
+ };
109
+ operator.blur = (value) => { setValue('backdrop-filter', 'blur(' + value + ')'); };
110
+ operator.outline = (value) => { setValue('outline', Array.isArray(value) ? value.join(' ') : value); };
111
+ operator.bgColor = (value) => { setValue('background-color', value); };
112
+ operator.borderColor = (value) => { setValue('border', '1px ' + 'solid ' + value); };
113
+ operator.border = (value) => { setValue('border', Array.isArray(value) ? value.join(' ') : value); };
114
+ operator.borderLeft = (value) => { setValue('border-left', Array.isArray(value) ? value.join(' ') : value); };
115
+ operator.borderRight = (value) => { setValue('border-right', Array.isArray(value) ? value.join(' ') : value); };
116
+ operator.borderTop = (value) => { setValue('border-top', Array.isArray(value) ? value.join(' ') : value); };
117
+ operator.borderBottom = (value) => { setValue('border-bottom', Array.isArray(value) ? value.join(' ') : value); };
118
+ operator.cornerRadius = (value) => { setValue('border-radius', value); };
119
+ operator.opacity = (value) => { setValue('opacity', value); };
120
+ operator.shadow = (value) => { setValue('box-shadow', value); };
121
+ operator.textShadow = (value) => { setValue('text-shadow', value); };
122
+ operator.fontFamily = (value) => { setValue('font-family', value); };
123
+ operator.fontSize = (value) => { setValue('font-size', value); };
124
+ operator.fontWeight = (value) => { setValue('font-weight', value); };
125
+ operator.fontStyle = (value) => { setValue('font-style', value); };
126
+ operator.lineHeight = (value) => { setValue('line-height', value); };
127
+ operator.letterSpacing = (value) => { setValue('letter-spacing', value); };
128
+ operator.textColor = (value) => { setValue('color', value); };
129
+ operator.textAlign = (value) => { setValue('text-align', value); };
130
+ operator.textDecoration = (value) => { setValue('text-decoration', value); };
131
+ operator.transform = (value) => { setValue('transform', value); };
132
+ operator.textIndent = (value) => { setValue('text-indent', value); };
133
+ operator.textTransform = (value) => { setValue('text-transform', value); };
134
+ operator.whiteSpace = (value) => { setValue('white-space', value); };
135
+ operator.caretColor = (value) => { setValue('caret-color', value); };
136
+ operator.overflow = (value) => { setValue('overflow', value); };
137
+ operator.textOverflow = (value) => { setValue('text-overflow', value); };
138
+ operator.textSelectable = (value) => {
139
+ setValue('user-select', value ? 'text' : 'none');
140
+ setValue('-webkit-user-select', value ? 'text' : 'none', false);
141
+ };
142
+ operator.href = (value) => { setValue('href', value); };
143
+ operator.target = (value) => { setValue('target', value); };
144
+ operator.bgImageSrc = (value) => { setValue('background-image', 'url(' + value + ')'); };
145
+ operator.bgImageRepeat = (value) => { setValue('background-repeat', value); };
146
+ operator.bgImageSize = (value) => { setValue('background-size', value); };
147
+ operator.bgImageAttachment = (value) => { setValue('background-attachment', value); };
148
+ operator.animate = (value) => { setValue('transition', value); };
149
+ operator.animateAll = (value) => { setValue('transition', 'all ' + value); };
150
+ operator.pseudo = (values) => {
151
+ for (const [p, pseudoProps] of Object.entries(values)) {
152
+ pseudoClass = p;
153
+ for (const k of [...Object.keys(pseudoProps)].sort(sortKeys)) {
154
+ if (operator[k]) {
155
+ operator[k](pseudoProps[k]);
156
+ }
157
+ }
158
+ }
159
+ pseudoClass = 'none';
160
+ };
161
+ return { reset, operator, getClassName, addRule };
162
+ };
163
+ const ruleBuilder = RuleBuilder();
164
+ const sortKeys = (a, b) => {
165
+ if (a < b)
166
+ return -1;
167
+ if (a > b)
168
+ return 1;
169
+ return 0;
170
+ };
171
+ export const buildClassName = (props, pc, tag = '') => {
172
+ const { reset, operator, getClassName } = ruleBuilder;
173
+ reset(pc, 'high');
174
+ for (const k of [...Object.keys(props)].sort(sortKeys)) {
175
+ if (operator[k]) {
176
+ operator[k](props[k]);
177
+ }
178
+ }
179
+ return 'className' in props && props.className ? props.className + ' ' + getClassName(tag) : getClassName(tag);
180
+ };
181
+ export const buildRule = (props, parentSelector, childSelector, pc = 'none') => {
182
+ const { reset, operator, addRule } = ruleBuilder;
183
+ reset(pc, 'low');
184
+ for (const k of [...Object.keys(props)].sort(sortKeys)) {
185
+ if (operator[k]) {
186
+ operator[k](props[k]);
187
+ }
188
+ }
189
+ addRule(parentSelector, childSelector);
190
+ };
package/dist/esm/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { StyleSheetProcessor, PseudoClass } from "./processor";
2
+ export { buildClassName, buildRule } from "./core";
3
+ export { UIComponent, vstack, vstackMapper, hstack, hstackMapper, Text, div, p, span, h1, h2, h3, h4, h5, h6, Button, btn, LinkBtn, link, switcher, observer, List, vlist, hlist, spacer, Image, image, Input, input, textarea } from "./components";
package/dist/esm/processor.js ADDED
@@ -0,0 +1,155 @@
1
+ const abbreviations = {
2
+ 'align-items': 'A',
3
+ 'backdrop-filter': 'BF',
4
+ 'background-color': 'BG',
5
+ 'background-image': 'BI',
6
+ 'background-attachment': 'BIA',
7
+ 'background-repeat': 'BIR',
8
+ 'background-size': 'BIS',
9
+ 'border': 'BO',
10
+ 'border-left': 'BL',
11
+ 'border-right': 'BR',
12
+ 'border-top': 'BT',
13
+ 'border-bottom': 'BB',
14
+ 'border-radius': 'BRA',
15
+ 'bottom': 'B',
16
+ 'box-sizing': 'S',
17
+ 'box-shadow': 'BS',
18
+ 'caret-color': 'CC',
19
+ 'color': 'C',
20
+ 'cursor': 'CU',
21
+ 'display': 'D',
22
+ 'flex-direction': 'F',
23
+ 'flex-grow': 'FG',
24
+ 'flex-wrap': 'FR',
25
+ 'flex-shrink': 'FK',
26
+ 'font-family': 'FF',
27
+ 'font-size': 'FS',
28
+ 'font-style': 'FST',
29
+ 'font-weight': 'FW',
30
+ 'gap': 'G',
31
+ 'height': 'H',
32
+ 'href': 'HR',
33
+ 'justify-content': 'J',
34
+ 'left': 'L',
35
+ 'letter-spacing': 'LS',
36
+ 'line-height': 'LH',
37
+ 'margin': 'M',
38
+ 'margin-left': 'ML',
39
+ 'margin-right': 'MR',
40
+ 'margin-top': 'MT',
41
+ 'margin-bottom': 'MB',
42
+ 'max-height': 'MAH',
43
+ 'max-width': 'MAW',
44
+ 'min-height': 'MIH',
45
+ 'min-width': 'MIW',
46
+ 'opacity': 'OP',
47
+ 'overflow': 'O',
48
+ 'overflow-x': 'OX',
49
+ 'overflow-y': 'OY',
50
+ 'outline': 'OL',
51
+ 'padding': 'P',
52
+ 'padding-left': 'PL',
53
+ 'padding-right': 'PR',
54
+ 'padding-top': 'PT',
55
+ 'padding-bottom': 'PB',
56
+ 'pointer-events': 'PE',
57
+ 'position': 'PO',
58
+ 'right': 'R',
59
+ 'target': 'TA',
60
+ 'text-align': 'TAL',
61
+ 'text-decoration': 'TD',
62
+ 'transform': 'TRA',
63
+ 'text-indent': 'TI',
64
+ 'text-transform': 'TR',
65
+ 'text-shadow': 'TS',
66
+ 'text-overflow': 'TO',
67
+ 'top': 'T',
68
+ 'transition': 'TN',
69
+ 'white-space': 'WS',
70
+ 'width': 'W',
71
+ 'user-select': 'U',
72
+ 'z-index': 'Z'
73
+ };
74
+ export class StyleSheetProcessor {
75
+ constructor(styleSheet) {
76
+ this.hash = new Map();
77
+ this.list = Array.of();
78
+ const all = ['none', 'hover', 'focus', 'placeholder'];
79
+ all.forEach(t => {
80
+ if (t === 'hover') {
81
+ const pc = new HoverPseudoClass(styleSheet);
82
+ this.hash.set('hover', pc);
83
+ this.list.push(pc);
84
+ }
85
+ else {
86
+ const pc = new PseudoClass(t, styleSheet, t === 'placeholder' ? '::' : ':');
87
+ this.hash.set(t, pc);
88
+ this.list.push(pc);
89
+ }
90
+ });
91
+ }
92
+ setValue(to, key, value, priority, appendToClassName = true) {
93
+ const pseudoClass = this.hash.get(to);
94
+ if (pseudoClass) {
95
+ pseudoClass.setValue(key, value, priority, appendToClassName);
96
+ }
97
+ else {
98
+ throw new Error('PseudoClassProcessor:setValue, PseudoClassType <' + to + '> not added to PseudoClassProcessor');
99
+ }
100
+ }
101
+ valuesToHashSum() {
102
+ return this.list.reduce((res, pseudoClass) => (res + (pseudoClass.isEmpty() ? '' : pseudoClass.hashSum)), '');
103
+ }
104
+ insertRule(className, tag) {
105
+ this.list.forEach(c => { c.insertRule(className, tag); });
106
+ }
107
+ clearValues() {
108
+ this.list.forEach(c => { c.clear(); });
109
+ }
110
+ }
111
+ export class PseudoClass {
112
+ constructor(type, styleSheet, divider = ':') {
113
+ this.type = type;
114
+ this.styleSheet = styleSheet;
115
+ this.style = '';
116
+ this.hashSum = '';
117
+ this.divider = divider;
118
+ }
119
+ insertRule(className, tag) {
120
+ if (this.style) {
121
+ const rule = tag + '.' + className + (this.type === 'none' ? '' : this.divider + this.type) + '{' + this.style + '}';
122
+ this.styleSheet.insertRule(rule);
123
+ }
124
+ }
125
+ setValue(key, value, priority, appendToClassName = true) {
126
+ if (value === undefined)
127
+ return;
128
+ this.style += key + ':' + value + (priority === 'high' ? ' !important;' : ';');
129
+ if (appendToClassName) {
130
+ if (!(key in abbreviations)) {
131
+ throw new Error('SelectorRuleBuilder.setValue:: No abbreviation for tag: ' + key);
132
+ }
133
+ this.hashSum += abbreviations[key] + value;
134
+ }
135
+ }
136
+ isEmpty() {
137
+ return this.style.length === 0;
138
+ }
139
+ clear() {
140
+ this.hashSum = this.type !== 'none' ? this.type.toUpperCase() : '';
141
+ this.style = '';
142
+ }
143
+ }
144
+ class HoverPseudoClass extends PseudoClass {
145
+ constructor(styleSheet) {
146
+ super('hover', styleSheet);
147
+ this.isMobileDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
148
+ }
149
+ insertRule(className, tag) {
150
+ if (this.style) {
151
+ const rule = tag + '.' + className + (this.isMobileDevice ? ':active{' : ':hover{') + this.style + '}';
152
+ this.styleSheet.insertRule(rule);
153
+ }
154
+ }
155
+ }
package/dist/types/components.d.ts ADDED
@@ -0,0 +1,156 @@
1
+ import { RXObservable, RXObservableValue } from 'flinker';
2
+ import { UIComponentProps } from './core';
3
+ export type HtmlTag = 'div' | 'button' | 'a' | 'link' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'img' | 'input' | 'textarea';
4
+ export type AnyUIComponent = UIComponent<any>;
5
+ export type ObserveAffect = 'affectsProps' | 'affectsChildrenProps' | 'recreateChildren';
6
+ export declare class UIComponent<P extends UIComponentProps> {
7
+ static activeParent: UIComponent<any> | undefined;
8
+ readonly tag: HtmlTag;
9
+ dom: HTMLElement;
10
+ childrenColl: AnyUIComponent[] | undefined;
11
+ constructor(tag: HtmlTag);
12
+ protected readonly unsubscribeColl: (() => void)[];
13
+ observe(rx: RXObservable<any, any>, affect1?: ObserveAffect, affect2?: ObserveAffect): this;
14
+ protected onPropsChangeSubscribers: ((props: P) => void)[] | undefined;
15
+ propsDidChange(fn: (props: P) => void): this;
16
+ protected mapStateFn?: (state: P) => void;
17
+ map(fn: (state: P) => void): this;
18
+ protected reactions: Array<(state: P) => void>;
19
+ react(fn: (state: P) => void): this;
20
+ protected whenHoveredFn?: (state: P) => void;
21
+ whenHovered(fn: (state: P) => void): this;
22
+ private instantiateChildrenFn?;
23
+ children(fn: () => void): this;
24
+ addChild(c: AnyUIComponent): void;
25
+ protected willDomUpdate: boolean;
26
+ protected affectSet: Set<ObserveAffect>;
27
+ render(affect1: ObserveAffect, affect2?: ObserveAffect): void;
28
+ protected props: P;
29
+ protected updateDom(): void;
30
+ protected updateProps(): void;
31
+ protected didDomUpdate(): void;
32
+ isDestroyed: boolean;
33
+ destroy(): void;
34
+ onClick(callback: (event: MouseEvent) => void): this;
35
+ onDoubleClick(callback: (event: MouseEvent) => void): this;
36
+ onMouseDown(callback: (event: MouseEvent) => void): this;
37
+ onKeyUp(callback: (event: KeyboardEvent) => void): this;
38
+ onKeyDown(callback: (event: KeyboardEvent) => void): this;
39
+ onBlur(callback: (event: FocusEvent) => void): this;
40
+ onFocus(callback: (event: FocusEvent) => void): this;
41
+ onInput(callback: (event: Event) => void): this;
42
+ }
43
+ export type StackHAlign = 'left' | 'right' | 'center' | 'stretch';
44
+ export type StackVAlign = 'top' | 'center' | 'base' | 'bottom' | 'stretch';
45
+ export interface StackProps extends UIComponentProps {
46
+ halign?: StackHAlign;
47
+ valign?: StackVAlign;
48
+ }
49
+ export declare const vstackMapper: (s: StackProps) => void;
50
+ export declare const vstack: <P extends StackProps>() => UIComponent<P>;
51
+ export declare const hstackMapper: (s: StackProps) => void;
52
+ export declare const hstack: <P extends StackProps>() => UIComponent<P>;
53
+ export interface TextProps extends UIComponentProps {
54
+ text?: string;
55
+ htmlText?: string;
56
+ }
57
+ export declare class Text<P extends TextProps> extends UIComponent<P> {
58
+ protected didDomUpdate(): void;
59
+ }
60
+ export declare const div: <P extends TextProps>() => Text<P>;
61
+ export declare const p: <P extends TextProps>() => Text<P>;
62
+ export declare const span: <P extends TextProps>() => Text<P>;
63
+ export declare const h1: <P extends TextProps>() => Text<P>;
64
+ export declare const h2: <P extends TextProps>() => Text<P>;
65
+ export declare const h3: <P extends TextProps>() => Text<P>;
66
+ export declare const h4: <P extends TextProps>() => Text<P>;
67
+ export declare const h5: <P extends TextProps>() => Text<P>;
68
+ export declare const h6: <P extends TextProps>() => Text<P>;
69
+ export interface ButtonProps extends TextProps {
70
+ isDisabled?: boolean;
71
+ isSelected?: boolean;
72
+ href?: string;
73
+ }
74
+ export declare class Button<P extends ButtonProps> extends Text<P> {
75
+ protected whenSelectedFn?: (state: P) => void;
76
+ whenSelected(fn: (state: P) => void): this;
77
+ protected whenDisabledFn?: (state: P) => void;
78
+ whenDisabled(fn: (state: P) => void): this;
79
+ protected updateProps(): void;
80
+ protected didDomUpdate(): void;
81
+ }
82
+ export declare const btn: <P extends ButtonProps>() => Button<P>;
83
+ export interface LinkProps extends ButtonProps {
84
+ href?: string;
85
+ target?: '_self' | '_blank' | '_parent';
86
+ }
87
+ export declare class LinkBtn<P extends LinkProps> extends Button<P> {
88
+ protected didDomUpdate(): void;
89
+ }
90
+ export declare const link: <P extends LinkProps>() => LinkBtn<P>;
91
+ export interface SwitcherProps extends ButtonProps {
92
+ trackWidth?: number;
93
+ trackHeight?: number;
94
+ trackColor?: string;
95
+ thumbColor?: string;
96
+ thumbDiameter?: number;
97
+ }
98
+ export declare const switcher: () => Button<SwitcherProps>;
99
+ export interface OnReceiver<T> {
100
+ onReceive(fn: (value: T) => AnyUIComponent | undefined | boolean): void;
101
+ }
102
+ export declare const observer: <T>(rx: RXObservable<T, any>) => OnReceiver<T>;
103
+ export declare class List<T, P extends UIComponentProps> extends UIComponent<P> {
104
+ constructor(tag: HtmlTag);
105
+ private _itemsFn?;
106
+ items(fn: () => T[]): this;
107
+ private _itemRenderer;
108
+ itemRenderer(fn: (item: T, index: number) => AnyUIComponent): this;
109
+ private _itemHashFn;
110
+ itemHash(fn: (item: T) => any): this;
111
+ protected updateDom(): void;
112
+ private _oldItemsHash;
113
+ private recreateChildren;
114
+ }
115
+ export declare const vlist: <T>() => List<T, StackProps>;
116
+ export declare const hlist: <T>() => List<T, StackProps>;
117
+ export interface SpacerProps extends UIComponentProps {
118
+ width?: string;
119
+ height?: string;
120
+ visible?: boolean;
121
+ }
122
+ export declare const spacer: () => UIComponent<UIComponentProps>;
123
+ export interface ImageProps extends UIComponentProps {
124
+ src?: string;
125
+ alt?: string;
126
+ }
127
+ export declare class Image<P extends ImageProps> extends Button<P> {
128
+ protected didDomUpdate(): void;
129
+ }
130
+ export declare const image: <P extends ImageProps>() => Image<P>;
131
+ export type InputType = 'text' | 'number' | 'password' | 'email' | 'date' | 'datetime-local' | 'email' | 'file' | 'month' | 'week' | 'search' | 'time' | 'url';
132
+ export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
133
+ export type TurnType = 'on' | 'off';
134
+ export interface InputProps extends UIComponentProps {
135
+ type?: InputType;
136
+ inputMode?: InputMode;
137
+ value?: string;
138
+ maxLength?: string;
139
+ placeholder?: string;
140
+ caretColor?: string;
141
+ autoFocus?: boolean;
142
+ spellCheck?: boolean;
143
+ autoCorrect?: TurnType;
144
+ autoComplete?: TurnType;
145
+ }
146
+ export declare class Input<P extends InputProps> extends UIComponent<P> {
147
+ bind(rx: RXObservableValue<string>): this;
148
+ protected whenFocusedFn?: (state: P) => void;
149
+ whenFocused(fn: (state: P) => void): this;
150
+ protected whenPlaceholderShownFn?: (state: P) => void;
151
+ whenPlaceholderShown(fn: (state: P) => void): this;
152
+ protected updateProps(): void;
153
+ protected didDomUpdate(): void;
154
+ }
155
+ export declare const input: <P extends InputProps>(type?: InputType) => Input<P>;
156
+ export declare const textarea: <P extends InputProps>() => Input<P>;
package/dist/types/core.d.ts ADDED
@@ -0,0 +1,91 @@
1
+ import { PseudoClassType } from './processor';
2
+ export type RulePriority = 'high' | 'low';
3
+ export declare const buildClassName: (props: any, pc: PseudoClassType, tag?: string) => string;
4
+ export declare const buildRule: (props: any, parentSelector: string, childSelector: string, pc?: PseudoClassType) => void;
5
+ export type BorderStyle = 'solid' | 'dotted' | 'dashed' | 'double' | 'none' | 'hidden';
6
+ export type PointerEventsStyle = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit' | 'initial' | 'unset';
7
+ export type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'inherit';
8
+ export interface UIComponentProps {
9
+ alignItems?: 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'inherit';
10
+ animate?: string;
11
+ animateAll?: string;
12
+ bgColor?: string;
13
+ bgImageAttachment?: 'scroll' | 'fixed' | 'unset' | 'inherit';
14
+ bgImageRepeat?: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y' | 'unset' | 'space' | 'inherit';
15
+ bgImageSize?: 'cover' | 'contain' | 'auto' | 'inherit';
16
+ bgImageSrc?: string;
17
+ blur?: string;
18
+ borderColor?: string;
19
+ border?: string | [string, BorderStyle, string];
20
+ borderBottom?: string | [string, BorderStyle, string];
21
+ borderLeft?: string | [string, BorderStyle, string];
22
+ borderRight?: string | [string, BorderStyle, string];
23
+ borderTop?: string | [string, BorderStyle, string];
24
+ bottom?: string;
25
+ boxSizing?: 'border-box' | 'content-box' | 'inherit';
26
+ caretColor?: string;
27
+ children?: any;
28
+ className?: string;
29
+ cornerRadius?: string;
30
+ cursor?: 'auto' | 'pointer' | 'wait' | 'crosshair' | 'not-allowed' | 'zoom-in' | 'grab' | 'inherit';
31
+ disableHorizontalScroll?: boolean;
32
+ disableScroll?: boolean;
33
+ display?: 'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'inherit';
34
+ enableOwnScroller?: boolean;
35
+ flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'inherit';
36
+ flexGrow?: number;
37
+ fontFamily?: string;
38
+ fontSize?: string;
39
+ fontStyle?: 'normal' | 'italic' | 'inherit';
40
+ fontWeight?: FontWeight;
41
+ gap?: string;
42
+ height?: string;
43
+ id?: string;
44
+ justifyContent?: 'normal' | 'stretch' | 'start' | 'center' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'inherit';
45
+ keyValue?: string;
46
+ layer?: string;
47
+ left?: string;
48
+ letterSpacing?: string;
49
+ lineHeight?: string;
50
+ maxHeight?: string;
51
+ maxWidth?: string;
52
+ margin?: string;
53
+ marginBottom?: string;
54
+ marginHorizontal?: string;
55
+ marginLeft?: string;
56
+ marginRight?: string;
57
+ marginTop?: string;
58
+ marginVertical?: string;
59
+ mouseEnabled?: boolean;
60
+ minHeight?: string;
61
+ minWidth?: string;
62
+ opacity?: string;
63
+ outline?: string | [string, string, string];
64
+ overflow?: 'auto' | 'hidden' | 'clip' | 'inherit';
65
+ padding?: string;
66
+ paddingBottom?: string;
67
+ paddingHorizontal?: string;
68
+ paddingLeft?: string;
69
+ paddingRight?: string;
70
+ paddingTop?: string;
71
+ paddingVertical?: string;
72
+ position?: 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky' | 'inherit';
73
+ popUp?: string;
74
+ right?: string;
75
+ shadow?: string;
76
+ textAlign?: 'left' | 'right' | 'center' | 'justify' | 'inherit';
77
+ textColor?: string;
78
+ textDecoration?: 'none' | 'underline' | 'inherit';
79
+ textIndent?: string;
80
+ textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase' | 'inherit';
81
+ textShadow?: string;
82
+ textOverflow?: 'auto' | 'ellipsis' | 'clip' | 'fade' | 'inherit';
83
+ textSelectable?: boolean;
84
+ transform?: string;
85
+ top?: string;
86
+ visible?: boolean;
87
+ whiteSpace?: 'normal' | 'pre' | 'pre-wrap' | 'nowrap' | 'inherit';
88
+ width?: string;
89
+ wrap?: boolean;
90
+ pseudo?: Record<PseudoClassType, Record<string, any>>;
91
+ }
package/dist/types/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { StyleSheetProcessor, PseudoClassType, PseudoClass } from "./processor";
2
+ export { RulePriority, buildClassName, buildRule, BorderStyle, PointerEventsStyle, FontWeight, UIComponentProps } from "./core";
3
+ export { HtmlTag, AnyUIComponent, ObserveAffect, UIComponent, StackHAlign, StackVAlign, StackProps, vstack, vstackMapper, hstack, hstackMapper, TextProps, Text, div, p, span, h1, h2, h3, h4, h5, h6, ButtonProps, Button, btn, LinkProps, LinkBtn, link, SwitcherProps, switcher, observer, OnReceiver, List, vlist, hlist, SpacerProps, spacer, ImageProps, Image, image, InputType, InputMode, TurnType, InputProps, Input, input, textarea } from "./components";
package/dist/types/processor.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { type RulePriority } from './core';
2
+ export declare class StyleSheetProcessor {
3
+ private readonly hash;
4
+ private readonly list;
5
+ constructor(styleSheet: CSSStyleSheet);
6
+ setValue(to: PseudoClassType, key: string, value: string, priority: RulePriority, appendToClassName?: boolean): void;
7
+ valuesToHashSum(): string;
8
+ insertRule(className: string, tag: string): void;
9
+ clearValues(): void;
10
+ }
11
+ export type PseudoClassType = 'none' | 'hover' | 'focus' | 'placeholder';
12
+ export declare class PseudoClass {
13
+ readonly type: PseudoClassType;
14
+ readonly styleSheet: CSSStyleSheet;
15
+ style: string;
16
+ hashSum: string;
17
+ readonly divider: string;
18
+ constructor(type: PseudoClassType, styleSheet: CSSStyleSheet, divider?: string);
19
+ insertRule(className: string, tag: string): void;
20
+ setValue(key: string, value: string, priority: RulePriority, appendToClassName?: boolean): void;
21
+ isEmpty(): boolean;
22
+ clear(): void;
23
+ }