@pechynho/stimulus-typescript 0.0.8

package/src/portal.ts

@@ -0,0 +1,110 @@
+import {Controller} from "@hotwired/stimulus";
+import Portal from "./portal-controller";
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+export function Portals<Base extends Constructor<Controller>>(Base: Base) {
+    let outlets = (Base as any).outlets;
+    if (typeof outlets === 'undefined') {
+        outlets = [];
+    } else if (!Array.isArray(outlets)) {
+        throw new Error('Outlets must be an array');
+    }
+    if (!outlets.includes('portal')) {
+        outlets.push('portal');
+    }
+    let values = (Base as any).values;
+    if (typeof values === 'undefined') {
+        values = {};
+    } else if (typeof values !== 'object') {
+        throw new Error('Values must be an object');
+    }
+    if (typeof values['portalSelectors'] === 'undefined') {
+        values['portalSelectors'] = {
+            type: Array,
+            default: [],
+        };
+    }
+    const derived = class extends Base
+    {
+        static outlets = outlets;
+        static values = values;
+
+        constructor(...args: any[]) {
+            super(...args);
+
+            const portalOutlets: Set<Portal> = new Set();
+
+            const originalDisconnect = (this as any).disconnect;
+            (this as any).disconnect = function (): void {
+                if (portalOutlets.size > 0) {
+                    for (const outlet of portalOutlets) {
+                        outlet.unsync(this);
+                    }
+                    portalOutlets.clear();
+                }
+                if (typeof originalDisconnect === 'function') {
+                    originalDisconnect.call(this);
+                }
+            };
+
+            const originalPortalOutletConnected = (this as any).portalOutletConnected;
+            (this as any).portalOutletConnected = function (outlet: Portal, element: HTMLElement): void {
+                outlet.sync(this);
+                portalOutlets.add(outlet);
+                if (typeof originalPortalOutletConnected === 'function') {
+                    originalPortalOutletConnected.call(this, outlet, element);
+                }
+            };
+
+            const originalPortalOutletDisconnected = (this as any).portalOutletDisconnected;
+            (this as any).portalOutletDisconnected = function (outlet: Portal, element: HTMLElement): void {
+                outlet.unsync(this);
+                portalOutlets.delete(outlet);
+                if (typeof originalPortalOutletDisconnected === 'function') {
+                    originalPortalOutletDisconnected.call(this, outlet, element);
+                }
+            };
+
+            const originalPortalSelectorsValueChanged = (this as any).portalSelectorsValueChanged;
+            (this as any).portalSelectorsValueChanged = function (value: string[], previousValue: string[]): void {
+                const outletAttribute = `data-${this.identifier}-portal-outlet`;
+                if (value.length > 0) {
+                    const controllerAttribute = this.context.schema.controllerAttribute;
+                    const selector = value.join(', ');
+                    const portalElements = document.querySelectorAll(selector);
+                    for (const portalElement of portalElements) {
+                        if (!portalElement.hasAttribute(controllerAttribute)) {
+                            portalElement.setAttribute(controllerAttribute, 'portal');
+                            continue;
+                        }
+                        const existingControllers = portalElement.getAttribute(controllerAttribute)!.split(' ');
+                        if (!existingControllers.includes('portal')) {
+                            existingControllers.push('portal');
+                            portalElement.setAttribute(controllerAttribute, existingControllers.join(' '));
+                        }
+                    }
+                    if (!this.element.hasAttribute(outletAttribute)) {
+                        this.element.setAttribute(outletAttribute, selector);
+                    } else if (this.element.getAttribute(outletAttribute) !== selector) {
+                        this.element.setAttribute(outletAttribute, selector);
+                    }
+                } else if (this.element.hasAttribute(outletAttribute)) {
+                    this.element.removeAttribute(outletAttribute);
+                }
+                if (typeof originalPortalSelectorsValueChanged === 'function') {
+                    originalPortalSelectorsValueChanged.call(this, value, previousValue);
+                }
+            }
+        }
+    }
+    return derived as unknown as typeof Base & {
+        new(...args: any[]): InstanceType<Base> & {
+            readonly portalOutlet: Portal;
+            readonly hasPortalOutlet: boolean;
+            readonly portalOutlets: Portal[];
+            portalSelectorsValue: string[];
+            readonly hasPortalSelectorsValue: boolean;
+        }
+    }
+}

package/src/resolvable.ts

@@ -0,0 +1,65 @@
+import {Application, Controller} from "@hotwired/stimulus";
+import {getController, getControllerAsync} from "./utils";
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+const identifierToAppMap = new Map<string, Application>();
+
+export function Resolvable<Base extends Constructor<Controller>>(Base: Base, identifier: string) {
+    return class extends Base
+    {
+        constructor(...args: any[]) {
+            super(...args);
+
+            const originalConnect = (this as any).connect;
+            (this as any).connect = function (): void {
+                identifierToAppMap.set(this.identifier, this.application);
+                if (typeof originalConnect === 'function') {
+                    originalConnect.call(this);
+                }
+            }
+        }
+
+        public static get<T extends Constructor<Controller>>(this: T, element: HTMLElement): InstanceType<T> | null {
+            const app = identifierToAppMap.get(identifier);
+            if (typeof app === 'undefined') {
+                return null;
+            }
+            return getController(app, element, identifier) as InstanceType<T> | null;
+        }
+
+        public static getAsync<T extends Constructor<Controller>>(
+            this: T,
+            element: HTMLElement,
+            timeout: number = 5000,
+            poll: number = 50,
+        ): Promise<InstanceType<T> | null> {
+            const app = identifierToAppMap.get(identifier);
+            if (typeof app !== 'undefined') {
+                return getControllerAsync(app, element, identifier, timeout, poll) as Promise<InstanceType<T> | null>;
+            }
+            const startTime = Date.now();
+            const maxAttempts = 10;
+            let attempts = 0;
+            return new Promise((resolve) => {
+                const checkApp = async () => {
+                    attempts++;
+                    const app = identifierToAppMap.get(identifier);
+                    if (typeof app !== 'undefined') {
+                        const remainingTime = timeout - (Date.now() - startTime);
+                        remainingTime <= 0
+                            ? resolve(getController(app, element, identifier) as InstanceType<T> | null)
+                            : resolve(await getControllerAsync(app, element, identifier, remainingTime, poll));
+                    } else if (Date.now() - startTime >= timeout) {
+                        resolve(null);
+                    } else if (attempts <= maxAttempts) {
+                        setTimeout(checkApp);
+                    } else {
+                        setTimeout(checkApp, poll);
+                    }
+                };
+                checkApp().catch(error => console.error(error));
+            });
+        }
+    }
+}

package/src/test.ts

@@ -0,0 +1,72 @@
+import {Controller} from '@hotwired/stimulus';
+import {Target, Typed, TypedArray, TypedObject} from './index';
+import {Portals} from "./portal";
+import {Resolvable} from "./resolvable";
+
+class OutletController extends Typed(Controller)
+{
+    public method(): void {
+    }
+}
+
+class HomepageController extends Typed(
+    Portals(Resolvable(Controller<HTMLElement>, 'homepage')), {
+        values: {
+            name: String,
+            counter: Number,
+            isActive: Boolean,
+            alias: TypedArray<string>(),
+            address: TypedObject<{ street: string }>(),
+            metadata: {type: TypedObject<{ title: string }>()},
+        },
+        targets: {
+            form: HTMLFormElement,
+            select: HTMLSelectElement,
+            custom: Target<{ test: string, someCustomMethod: () => void }>(),
+        },
+        classes: ['selected', 'highlighted'] as const,
+        outlets: {
+            'test': OutletController,
+        },
+    }
+)
+{
+    // All properties are now strongly typed!
+
+    public connect(): void {
+        // String values
+        this.nameValue.split(' ');
+
+        // Number values
+        Math.floor(this.counterValue);
+
+        // Boolean values
+        this.isActiveValue;
+
+        // Array values
+        this.aliasValue.map(alias => alias.toUpperCase());
+
+        // Object values
+        console.log(this.addressValue.street);
+
+        console.log(this.metadataValue.title);
+
+        // Targets
+        this.formTarget.submit();
+        this.selectTarget.value = 'stimulus';
+        this.customTarget.someCustomMethod();
+
+        // Outlets
+        this.testOutlet.method();
+
+        // Classes
+        if (this.hasSelectedClass) {
+            console.log(this.selectedClass);
+        }
+
+        // Portals
+        if (this.hasPortalOutlet) {
+            console.log(this.portalOutlet);
+        }
+    }
+}

package/src/typed.ts

@@ -0,0 +1,178 @@
+import {Controller} from "@hotwired/stimulus";
+
+class Wrapped<T = any>
+{
+    private _: T | undefined = undefined;
+
+    public constructor(
+        public readonly context: 'typed-object' | 'typed-array' | 'target',
+    ) {
+    }
+}
+
+export const TypedObject = <T extends object>() => new Wrapped<T>('typed-object');
+
+export const TypedArray = <T>() => new Wrapped<T[]>('typed-array');
+
+export const Target = <T extends object>() => new Wrapped<T>('target');
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+type CamelCase<K extends string> =
+    K extends `${infer T}_${infer U}`
+        ? `${Uncapitalize<T>}${Capitalize<CamelCase<U>>}`
+        : K extends `${infer T}-${infer U}`
+            ? `${Uncapitalize<T>}${Capitalize<CamelCase<U>>}`
+            : K extends `${infer T} ${infer U}`
+                ? `${Uncapitalize<T>}${Capitalize<CamelCase<U>>}`
+                : K;
+
+type ClassProperties<Classes extends readonly string[] = []> =
+    { [K in Classes[number] as `${CamelCase<K>}Class`]: string } &
+    { readonly [K in Classes[number] as `has${Capitalize<CamelCase<K>>}Class`]: boolean } &
+    { [K in Classes[number] as `${CamelCase<K>}Classes`]: string[] };
+
+type ValueTypeDefault = string | number | boolean | Array<any> | Object | InstanceType<typeof Wrapped>;
+
+type ValueTypeConstant =
+    | typeof String
+    | typeof Number
+    | typeof Boolean
+    | typeof Array<any>
+    | typeof Object
+    | InstanceType<typeof Wrapped>
+
+type ValueTypeObject = {
+    type: ValueTypeConstant;
+    default?: ValueTypeDefault;
+};
+
+type ValueTypeDefinition = ValueTypeConstant | ValueTypeObject | InstanceType<typeof Wrapped>;
+
+type ValueDefinitionMap = {
+    [token: string]: ValueTypeDefinition;
+};
+
+type TypeFromConstructor<C> =
+    C extends StringConstructor
+        ? string
+        : C extends NumberConstructor
+            ? number
+            : C extends BooleanConstructor
+                ? boolean
+                : C extends ArrayConstructor
+                    ? any[]
+                    : C extends Wrapped<infer T>
+                        ? T
+                        : C extends ObjectConstructor
+                            ? Object
+                            : C extends Constructor<infer T>
+                                ? TypeFromConstructor<T>
+                                : never;
+
+type TransformValueDefinition<T extends ValueTypeDefinition> =
+    T extends { type: infer U }
+        ? TypeFromConstructor<U>
+        : TypeFromConstructor<T>;
+
+type ValuesProperties<Values extends ValueDefinitionMap> =
+    { [K in keyof Values as `${CamelCase<K & string>}Value`]: TransformValueDefinition<Values[K]> } &
+    { readonly [K in keyof Values as `has${Capitalize<CamelCase<K & string>>}Value`]: boolean };
+
+type TargetTypeDefinition = typeof Element | InstanceType<typeof Wrapped>;
+
+type TargetsDefinitionMap = {
+    [token: string]: TargetTypeDefinition;
+};
+
+type TransformTargetDefinition<T extends TargetTypeDefinition> =
+    T extends Wrapped<infer U>
+        ? U
+        : T extends new (...args: any[]) => infer R
+            ? R
+            : never;
+
+type TargetsProperties<Targets extends TargetsDefinitionMap> =
+    { readonly [K in keyof Targets as `${CamelCase<K & string>}Target`]: TransformTargetDefinition<Targets[K]> } &
+    { readonly [K in keyof Targets as `has${Capitalize<CamelCase<K & string>>}Target`]: boolean } &
+    { readonly [K in keyof Targets as `${CamelCase<K & string>}Targets`]: TransformTargetDefinition<Targets[K]>[] };
+
+type OutletsDefinitionMap = {
+    [token: string]: Constructor<Controller>;
+};
+
+type OutletProperties<Outlets extends OutletsDefinitionMap> =
+    { readonly [K in keyof Outlets as `${CamelCase<K & string>}Outlet`]: InstanceType<Outlets[K]> } &
+    { readonly [K in keyof Outlets as `has${Capitalize<CamelCase<K & string>>}Outlet`]: boolean } &
+    { readonly [K in keyof Outlets as `${CamelCase<K & string>}Outlets`]: InstanceType<Outlets[K]>[] };
+
+type Configuration<
+    Values extends ValueDefinitionMap,
+    Targets extends TargetsDefinitionMap,
+    Classes extends readonly string[],
+    Outlets extends OutletsDefinitionMap,
+> = {
+    values?: Values;
+    targets?: Targets;
+    classes?: Classes;
+    outlets?: Outlets;
+};
+
+function patchValueTypeDefinitionMap(values: ValueDefinitionMap): ValueDefinitionMap {
+    const patchedValues: ValueDefinitionMap = {};
+    const patchType = (type: any) => {
+        if (type instanceof Wrapped && type.context === 'typed-object') {
+            return Object;
+        }
+        if (type instanceof Wrapped && type.context === 'typed-array') {
+            return Array;
+        }
+        return type;
+    };
+    Object.getOwnPropertyNames(values).forEach(key => {
+        const definition = values[key];
+        if (typeof definition === 'object' && 'default' in definition && 'type' in definition) {
+            patchedValues[key] = {
+                type: patchType(definition.type),
+                default: definition.default,
+            };
+        } else if (typeof definition === 'object' && 'type' in definition) {
+            patchedValues[key] = patchType(definition.type);
+        } else if (definition instanceof Wrapped) {
+            patchedValues[key] = patchType(definition);
+        } else {
+            patchedValues[key] = definition;
+        }
+    });
+    return patchedValues;
+}
+
+export function Typed<
+    Base extends Constructor<Controller>,
+    Values extends ValueDefinitionMap = {},
+    Targets extends TargetsDefinitionMap = {},
+    Classes extends readonly string[] = [],
+    Outlets extends OutletsDefinitionMap = {},
+>(Base: Base, configuration?: Configuration<Values, Targets, Classes, Outlets>) {
+    const {values, targets, classes, outlets} = configuration ?? {};
+
+    const derived = class extends Base
+    {
+        constructor(...args: any[]) {
+            super(...args);
+        }
+
+        static values = patchValueTypeDefinitionMap(values ?? {});
+        static targets = Object.getOwnPropertyNames(targets ?? {});
+        static classes = classes ?? [];
+        static outlets = Object.getOwnPropertyNames(outlets ?? {});
+    };
+
+    return derived as unknown as typeof Base & {
+        new(...args: any[]): InstanceType<Base>
+            & ValuesProperties<Values>
+            & TargetsProperties<Targets>
+            & ClassProperties<Classes>
+            & OutletProperties<Outlets>;
+    }
+}

package/src/utils.ts

@@ -0,0 +1,41 @@
+import {ActionEvent, Application, Controller} from "@hotwired/stimulus";
+
+export const camelCase = (value: string): string => {
+    return value
+        .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''))
+        .replace(/^[A-Z]/, c => c.toLowerCase());
+};
+
+export const capitalize = (value: string): string => {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+};
+
+export const isActionEvent = (value: any): value is ActionEvent => {
+    return value instanceof Event && 'params' in value && typeof value.params !== 'object';
+}
+
+export const getController = <T extends Controller>(app: Application, element: HTMLElement, identifier: string): T | null => {
+    return app.getControllerForElementAndIdentifier(element, identifier) as T | null;
+}
+
+export const getControllerAsync = async <T extends Controller>(app: Application, element: HTMLElement, identifier: string, timeout: number = 5000, poll: number = 50): Promise<T | null> => {
+    const startTime = Date.now();
+    const maxAttempts = 10;
+    let attempts = 0;
+    return new Promise((resolve) => {
+        const checkController = () => {
+            attempts++;
+            const controller = app.getControllerForElementAndIdentifier(element, identifier) as T | null;
+            if (controller !== null) {
+                resolve(controller);
+            } else if (Date.now() - startTime >= timeout) {
+                resolve(null);
+            } else if (attempts <= maxAttempts) {
+                setTimeout(checkController);
+            } else {
+                setTimeout(checkController, poll);
+            }
+        };
+        checkController();
+    });
+};