@paganaye/stylets 0.1.0

package/src/State.ts

@@ -0,0 +1,164 @@
+export type EqualityFunction<T> = (a: T, b: T) => boolean;
+
+export abstract class BaseState<T = any> {
+    protected _listeners: Array<(data: T) => void> = [];
+    protected _value: T;
+    protected valueEquals: EqualityFunction<T>;
+
+    constructor(initialValue: T, equalityFunction?: EqualityFunction<T>) {
+        this._value = initialValue;
+        this.valueEquals = equalityFunction ?? ((a, b) => a === b);
+    }
+
+    get value(): T {
+        return this._value;
+    }    
+
+    protected internalSetValue(newValue: T): void {
+        let previousValue = this._value;
+        if (this.valueEquals(newValue, previousValue as T)) return;
+        this._value = newValue;
+        this.emit(newValue);
+    }
+
+    public subscribe(listener: (data: T) => void): void {
+        this._listeners.push(listener);
+        let currentValue = this._value;
+        listener(currentValue);
+    }
+
+    public unsubscribe(listener: (data: T) => void): void {
+        this._listeners = this._listeners.filter(l => l !== listener);
+    }
+
+    protected emit(data: T): void {
+        for (const listener of this._listeners) {
+            listener(data);
+        }
+    }
+
+    public dispose(): void {
+        this._listeners = [];
+    }
+}
+
+
+export class State<T = any> extends BaseState<T> {
+    constructor(initialValue: T, equals?: EqualityFunction<T>) {
+        super(initialValue, equals);
+    }
+
+    public setValue(newValue: T): void {
+        super.internalSetValue(newValue);
+    }
+}
+
+export function createState<T>(value: T, equals?: EqualityFunction<T>): State<T>;
+export function createState<T>(value?: T, equals?: EqualityFunction<T | undefined>): State<T | undefined>;
+export function createState<T>(value?: T, equals?: EqualityFunction<any>): State<any> {
+    return new State<any>(value, equals);
+}
+
+export class Effect {
+    readonly dependencies: Array<BaseState>;
+    readonly recomputeBound = this.recomputeValue.bind(this);
+
+    constructor(
+        watch: BaseState | Array<BaseState>,
+        private compute: () => void
+    ) {
+        this.dependencies = Array.isArray(watch) ? watch : [watch];
+
+        for (let state of this.dependencies) {
+            state.subscribe(this.recomputeBound);
+        }
+    }
+
+    protected async recomputeValue() {
+        try {
+            this.compute();
+        } catch (error) {
+            console.error("Error during effect computation:", error);
+        }
+    }
+
+    public dispose(): void {
+        for (let state of this.dependencies) {
+            state.unsubscribe(this.recomputeBound);
+        }
+    }
+}
+
+export function effect<T>(
+    watch: BaseState | Array<BaseState>,
+    compute: () => T | undefined,
+) {
+    return new Effect(watch, compute);
+}
+
+export class Computed<T = any> extends BaseState<T> {
+    private readonly effect: Effect;
+
+    constructor(
+        watch: BaseState | Array<BaseState>,
+        private compute: () => T,
+        initialValue: T,
+        isValidValue: boolean,
+        equals?: EqualityFunction<T>
+    ) {
+        super(initialValue, equals);
+
+        let recompute = () => {
+            const newValue = this.compute();
+            super.internalSetValue(newValue as unknown as T);
+        }
+        this.effect = new Effect(watch, recompute);
+        if (!isValidValue) recompute();
+    }
+
+    public dispose(): void {
+        this.effect.dispose();
+    }
+}
+
+export function computed<T>(
+    watch: BaseState | Array<BaseState>,
+    compute: () => T,
+    initialValue: T,
+    equals?: EqualityFunction<T>
+): Computed<T>;
+
+export function computed<T>(
+    watch: BaseState | Array<BaseState>,
+    compute: () => T | undefined,
+    equals?: EqualityFunction<T | undefined>
+): Computed<T | undefined>;
+
+export function computed<T>(
+    watch: BaseState | Array<BaseState>,
+    compute: () => T | undefined,
+    initialOrEquals?: T | EqualityFunction<T | undefined>,
+    maybeEquals?: EqualityFunction<T>
+) {
+    if (typeof initialOrEquals === 'function' || initialOrEquals === undefined) {
+        const equals = initialOrEquals as EqualityFunction<T | undefined> | undefined;
+        return new Computed<T | undefined>(
+            watch,
+            compute as () => T | undefined,
+             /*initialValue*/ undefined,
+             /*isValidValue*/ false,
+            equals
+        );
+    } else {
+        const initialValue = initialOrEquals as T;
+        const equals = maybeEquals as EqualityFunction<T> | undefined;
+        return new Computed<T>(
+            watch,
+            compute as () => T,
+            /*initialValue*/ initialValue,
+            /*isValidValue*/ true,
+            equals
+        );
+    }
+}
+

package/src/StyleWriter.ts

@@ -0,0 +1,163 @@
+import { CssExpr } from "./CssExpr";
+import { CssProperties, ITheme } from "./types";
+
+export function toKebabCase(str: string): string {
+    if (str.startsWith('--')) return str;
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+export class StyleWriter {
+    readonly element: HTMLStyleElement;
+    readonly lines: string[] = [];
+    static readonly builders = new Map<string, StyleWriter>;
+    private indentString: string = '';
+    private _indentLevel: number = 0;
+
+    public get indentLevel() {
+        return this._indentLevel;
+    }
+
+    public set indentLevel(value: number) {
+        this._indentLevel = value;
+        this.indentString = '  '.repeat(this._indentLevel);
+    }
+
+    private constructor(public readonly name: string) {
+        this.element = document.createElement('style');
+        this.element.setAttribute("data-section", name);
+        document.head.appendChild(this.element);
+    }
+
+    public static byName(name: string): StyleWriter {
+        let existing = StyleWriter.builders.get(name);
+        if (existing) return existing;
+        let newBuilder = new StyleWriter(name);
+        StyleWriter.builders.set(name, newBuilder);
+        return newBuilder;
+    }
+
+    render() {
+        this.element.innerHTML = this.lines.join("\n");
+        this.clear();
+    }
+
+    clear() {
+        this.lines.length = 0;
+    }
+
+    addLines(lines: string[]) {
+        lines.forEach(s => this.addLine(s))
+    }
+
+    addLine(line: string | undefined) {
+        if (line === undefined) return;
+        this.lines.push(this.indentString + line);
+    }
+
+    addRule(selector: string, styles: CssProperties | string) {
+        this.addLine(`${selector} {`)
+        this.indentLevel += 1;
+        if (typeof styles === 'string') {
+            this.addLine(styles)
+        } else if (Array.isArray(styles)) {
+            this.addLines(styles);
+        } else {
+            this.addCssProperties(styles);
+        }
+        this.indentLevel -= 1;
+        this.addLine(`}`);
+    }
+
+    protected addCssProperties(properties: CssProperties) {
+        if (properties == null) return;
+        let entries = Object.entries(properties);
+        if (entries.length === 0) return;
+
+        let stringifyValue = (key: string, v: any): string | undefined => {
+            if (v === null || v === undefined) return undefined;
+            if (typeof v === 'string' || typeof v === 'number') {
+                return StyleWriter.stringifyStyle(key, v as any);
+            } else if (v instanceof CssExpr) {
+                let s = v.toString();
+                return s;
+            } else if (Array.isArray(v)) {
+                let s = v.map(i => stringifyValue(key, i)).join(', ');
+                return s;
+            } else {
+                throw Error("Unexpected type in style value");
+            }
+        }
+        for (let [k, v] of entries) {
+            if (!k.startsWith('--')) {
+                k = toKebabCase(k);
+            }
+            v = stringifyValue(k, v);
+            if (v === undefined || v === null) continue;
+            this.addLine(`${k}: ${v};`);
+        }
+
+    }
+
+    static stringifyStyle(key: string, value: CssProperties, theme?: ITheme): string | undefined {
+        if (value === null || value === undefined) return undefined;
+        if (key === 'content' && typeof value === 'string') {
+            return `content: ${value};`;
+        }
+        let result: string;
+        switch (typeof value) {
+            case "number":
+                result = StyleWriter.convertNumberToCssValue(key, value as number);
+                break;
+            case "function":
+                result = (value as any)(theme);
+                break;
+            default:
+                result = String(value);
+                break;
+        }
+        return result;
+    }
+
+    static spacingProps = new Set<string>([
+        'width', 'height', 'max-width', 'min-width', 'max-height', 'min-height',
+        'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
+        'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right',
+        'gap', 'row-gap', 'column-gap',
+        'top', 'right', 'bottom', 'left',
+        'inset', 'inset-top', 'inset-right', 'inset-bottom', 'inset-left',
+        'border', 'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'
+    ]);
+
+    // Properties that are unitless in CSS
+    static unitlessProps = new Set<string>([
+        'line-height', 'z-index', 'opacity', 'font-weight', 'order', 'flex', 'flex-grow', 'flex-shrink', 'flex-basis'
+    ]);
+
+    static convertNumberToCssValue(prop: string, value: number): string {
+        // normalize prop name to kebab-case as used in spacingPropsSet
+        const p = prop.toLowerCase();
+        if (StyleWriter.unitlessProps.has(p)) return String(value);
+
+        if (StyleWriter.spacingProps && StyleWriter.spacingProps.has(p)) {
+            // default conversion: treat number as rem with one decimal (value * 0.25 -> 0.25 increments?)
+            // original behaviour used Math.round(value * 2.5) / 10 to produce tenths
+            return `${Math.round(value * 2.5) / 10}rem`;
+        }
+
+        // fallback: return numeric as-is
+        return String(value);
+    }
+}
+
+export function addStyles(section: string, callback: (builder: StyleWriter) => void, thisArg?: any) {
+
+    let builder = StyleWriter.byName(section);
+    try {
+        callback.call(thisArg, builder);
+    }
+    finally {
+        if (typeof document === 'undefined') return;
+        builder.render()
+    }
+}
+

package/src/Theme.ts

@@ -0,0 +1,95 @@
+import { ITheme, IThemeParts, IScopeStylesParts, MergeThemeArgs, ThemeArgs, ExtractVariants } from "./types";
+import { ScopeStylesBuilder, ScopeStylesPublic } from "./ScopeStyles";
+import { BaseStyles } from "./BaseStyles";
+export type ThemeCSSClass = keyof ITheme['classes'];
+export type ThemeClassList = Partial<Record<ThemeCSSClass, boolean | undefined>>;
+
+export function createTheme<
+    Colors extends string = never,
+    Sizes extends string = never,
+    Paddings extends string = never,
+    Margins extends string = never,
+    Borders extends string = never,
+    Layouts extends string = never,
+    Backgrounds extends string = never,
+    Typography extends string = never,
+    Shadows extends string = never,
+    Vars extends string = never,
+    Classes extends string = never,
+    Variants extends Record<string, Record<string, any>> = Record<string, never>
+>(themeParts: IThemeParts<{
+    colors: Colors;
+    sizes: Sizes;
+    paddings: Paddings;
+    margins: Margins;
+    borders: Borders;
+    backgrounds: Backgrounds;
+    layouts: Layouts;
+    typography: Typography;
+    shadows: Shadows;
+    vars: Vars;
+    classes: Classes;
+    variants: Variants
+}>) {
+    type A = {
+        colors: Colors;
+        sizes: Sizes; paddings:
+        Paddings; margins:
+        Margins; borders: Borders;
+        backgrounds: Backgrounds;
+        layouts: Layouts;
+        typography: Typography;
+        shadows: Shadows;
+        vars: Vars;
+        classes: Classes;
+        variants: Variants
+    };
+    let theme = new ThemeBuilder<A>(themeParts as any);
+    return theme as ThemeBuilder<A>;
+}
+
+
+export class ThemeBuilder<A extends ThemeArgs> extends BaseStyles<A> {
+
+    constructor(themeParts: IThemeParts<A>) {
+        super({ ...themeParts } as any);
+    }
+
+    declareScope<P extends IScopeStylesParts<any> & { class: string, scopeStart?: string, scopeEnd?: string }>(parts: P): ScopeStylesBuilder<MergeThemeArgs<A, P>, MergeThemeArgs<A, P>['variants']>;
+    // overload that infers Added from a callback returning parts
+    declareScope<P extends (theme: ThemeBuilder<A>) => IScopeStylesParts<any> & { scopeStart: string, scopeEnd?: string }>(parts: P): ScopeStylesBuilder<MergeThemeArgs<A, ReturnType<P>>, MergeThemeArgs<A, ReturnType<P>>['variants']>;
+    declareScope(partsOrLambda: any) {
+        const resolved = (typeof partsOrLambda === 'function') ? partsOrLambda(this as any) : partsOrLambda;
+        return new ScopeStylesBuilder(
+            this as any,
+            { ...resolved } as any
+        );
+    }
+    // overload that infers Added from a concrete parts object
+    add<P extends IThemeParts<any>>(parts: P): ThemeBuilder<MergeThemeArgs<A, P>>;
+    // overload that infers Added from a callback returning parts
+    add<P extends (theme: ThemeBuilder<A>) => IThemeParts<any>>(parts: P): ThemeBuilder<MergeThemeArgs<A, ReturnType<P>>>;
+    add(parts: any): any {
+
+        if (typeof parts === 'function') parts = parts(this as any);
+        super.add(parts as any);
+        return this as any;
+    }
+
+    public render() {
+        super.render();
+        let result = (this as unknown) as ThemePublic<A>;
+        return result;
+    }
+}
+
+export type ThemePublic<A extends ThemeArgs> = {
+    declareScope: ThemeBuilder<A>['declareScope'];
+    colors: A['colors'] extends string ? Record<A['colors'], string> : Record<string, string>;
+    vars: A['vars'] extends string ? Record<A['vars'], string> : Record<string, string>;
+    classes: A['classes'] extends string ? Record<A['classes'], string> : Record<string, string>;
+}
+
+export class Theme<A extends ThemeArgs> extends BaseStyles<A> {
+    declareScope!: ThemeBuilder<A>['declareScope'];
+}

package/src/Tone.ts

@@ -0,0 +1 @@
+export type Tone = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';

package/src/index.test.ts

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { createTheme } from './Theme';
+
+describe('createTheme', () => {
+  it('returns a theme object', () => {
+    const theme = createTheme({}).render();
+    expect(theme).toBeDefined();
+    expect(theme.classes).toStrictEqual({});
+  });
+});

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./Theme";

package/src/props.ts

@@ -0,0 +1,118 @@
+import { ClassList, CssProperties } from "./types";
+import { IDivProps } from "./HTML";
+
+function classListToRecord<T extends string>(classList?: ClassList<T>): Record<string, boolean> {
+    const result: Record<string, boolean> = {};
+    if (!classList) return result;
+
+    if (Array.isArray(classList)) {
+        for (const item of classList) {
+            if (!item) continue;
+            if (typeof item === 'string') {
+                result[item] = true;
+            } else if (typeof item === 'object') {
+                Object.assign(result, item);
+            }
+        }
+    } else if (typeof classList === 'string') {
+        result[classList] = true;
+    } else {
+        Object.assign(result, classList);
+    }
+    return result;
+}
+
+// Normalizes classes and variants. User code can intercept between prepareProps/completeProps to add classes.
+export function prepareProps<T extends IDivProps = IDivProps>(
+    propsIn: T,
+    styles?: { variants?: Record<string, any>, class?: string }): Record<string, any> {
+
+    const classRecord = classListToRecord(propsIn.class);
+    const dataAttrs: Record<string, string> = {};
+
+    if (styles?.class) {
+        classRecord[styles.class] = true;
+    }
+
+    // Apply variants as attributes, use 'default' value if not provided
+    if (styles?.variants) {
+        for (const variantKey of Object.keys(styles.variants)) {
+            let variantValue = (propsIn as any)[variantKey];
+
+            if (variantValue === undefined) {
+                const variantGroup = styles.variants[variantKey];
+                if (variantGroup && 'default' in variantGroup) {
+                    variantValue = 'default';
+                }
+            }
+
+            if (variantValue !== undefined) {
+                dataAttrs[variantKey] = variantValue;
+            }
+        }
+    }
+
+    return {
+        __prepared: true,
+        style: styleToString(propsIn.style),
+        class: classRecord,
+        ...dataAttrs,
+    };
+}
+
+// Converts classRecord to space-separated string
+export function completeProps(propsIn: Record<string, any>): Record<string, any> {
+    if (!('__prepared' in propsIn)) {
+        propsIn = prepareProps(propsIn as any);
+    }
+
+    delete propsIn.__prepared;
+
+    if (typeof propsIn.class === 'object') {
+        propsIn.class = Object.entries(propsIn.class)
+            .filter(([_, value]) => value)
+            .map(([key]) => key)
+            .join(' ');
+    }
+    return propsIn;
+}
+
+function styleToString(styles?: CssProperties): string | undefined {
+    if (!styles) return undefined;
+
+    let result = '';
+    for (const [key, value] of Object.entries(styles)) {
+        if (value !== undefined) {
+            const cssKey = key.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+            result += `${cssKey}: ${value}; `;
+        }
+    }
+    return result || undefined;
+}
+
+export function Elt(tag: string, props: Record<string, any>, children?: any[]): string {
+    const finalProps = completeProps(props) as Record<string, any>;
+
+    const escapeAttr = (s: string): string =>
+        s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+    const attrs = Object.entries(finalProps)
+        .map(([k, v]) => {
+            if (v === undefined || v === null) return '';
+            if (k === 'children') return '';
+            if (typeof v === 'boolean') return v ? `${k}` : '';
+            return `${k}="${escapeAttr(String(v))}"`;
+        })
+        .filter(Boolean)
+        .join(' ');
+
+    const renderChildren = (c: any): string => {
+        if (c === undefined || c === null) return '';
+        if (Array.isArray(c)) return c.map(renderChildren).join('');
+        return String(c);
+    };
+
+    const childrenStr = renderChildren(children);
+
+    return `<${tag}${attrs ? ' ' + attrs : ''}>${childrenStr}</${tag}>`;
+}