@loom-js/core
Version:
A reactive, component-driven, JavaScript framework.
273 lines (264 loc) • 12.6 kB
TypeScript
interface AppGlobalConfig {
debug?: boolean;
debugScope?: ConfigDebugAllowable & object;
events?: string[];
token?: string;
}
interface AppInitProps {
app: ContextFunction;
append?: boolean | null;
globalConfig?: AppGlobalConfig;
onAppMounted?: (mountedApp: Element) => any;
root?: Element | null;
}
interface Aria {
label?: string;
live?: 'assertive' | 'polite';
role?: string;
}
interface Es6Object<T = unknown> {
[key: string | symbol]: T;
}
interface LoomGlobal {
console: Console;
}
interface PlainObject<T = unknown> {
[key: string]: T;
}
type AttrsTemplateTagValue = PlainObject<TemplateTagValue> & {
id?: string;
className?: string;
style?: TemplateTagValue | PlainObject<TemplateTagValue>;
};
type OnTemplateTagValue = PlainObject<EventListenerOrEventListenerObject>;
type SpecialTemplateTagValue = AttrsTemplateTagValue | OnTemplateTagValue;
interface TaggedTemplate {
this?: ComponentContext;
(chunks: TemplateStringsArray, ...interpolations: TemplateTagValue[]): ComponentContext;
}
interface TemplateFunction<Props extends object = {}> {
(html: TaggedTemplate, props: ComponentArgs<Props>): ComponentContext;
}
type TemplateRoot = Comment | Element | Text;
type TemplateRootArray = TemplateRoot[];
type TemplateTagValue = boolean | Component | ContextFunction | EventListenerOrEventListenerObject | MouseEventListener | SyntheticRouteEventListener | Node | null | number | PlainObject<TemplateTagValue> | SpecialTemplateTagValue | string | TemplateRoot | TemplateRootArray | TemplateTagValue[] | TemplateTagValueFunction | undefined | void;
type TemplateTagValueFunction = <T>(props?: T) => TemplateTagValue;
type AnyComponent<Props extends object = {}> = Component<Props> | SimpleComponent<Props>;
type Component<Props extends object = {}> = (props?: ComponentProps<Props>) => ContextFunction;
type ComponentArgs<Props extends object = {}> = ComponentBaseArgs & ComponentProps<Props>;
type ComponentProps<Props extends object = {}> = {
[P in keyof Props]: Props[P];
} & ComponentOptionalProps;
interface ComponentContext<Props extends object = {}> extends LifeCycleHandlerProps {
children: Map<number | string, ComponentContextPartial>;
chunks: TemplateStringsArray;
ctxScopes: Map<TemplateFunction<Props>, ComponentContextPartial>;
fingerPrint: TemplateFunction<Props>;
fragment: boolean;
key: string;
lifeCycleState: LifeCycleState;
lifeCycles: LifeCycleHookProps;
node: ContextNodeGetter;
parent: ComponentContextPartial;
props: ComponentProps<Props>;
render: TaggedTemplate;
ref: RefContext;
refs: Set<RefContext>;
root: TemplateRoot | TemplateRootArray;
values: Es6Object<TemplateTagValue>;
}
type ComponentContextPartial = Partial<ComponentContext>;
type ComponentBaseArgs = LifeCycleHookProps & {
createRef(): RefContext;
ctxRefs(): IterableIterator<RefContext>;
node: ContextNodeGetter;
};
type ComponentFactory = <Props extends object = {}>(templateFunction: TemplateFunction<Props>) => Component<Props>;
type ComponentOptionalProps = Partial<{
attrs: AttrsTemplateTagValue;
children: TemplateTagValue;
className: string;
id: string;
key: string;
on: OnTemplateTagValue;
onClick: SyntheticRouteEventListener | EventListenerOrEventListenerObject;
ref: RefContext;
routeProps: RouteValue;
style: TemplateTagValue | PlainObject<TemplateTagValue>;
}>;
type ContextFunction = (ctx?: ComponentContextPartial, dryRun?: boolean) => ComponentContextPartial;
type ContextNodeGetter = () => TemplateRoot | TemplateRootArray;
type SimpleComponent<Props extends object = {}, Return extends TemplateTagValue = TemplateTagValue> = (props: ComponentProps<Props>) => Return;
type LifeCycleHandler = (root?: TemplateRoot | TemplateRootArray) => any;
interface LifeCycleHandlerProps {
beforeRender: LifeCycleHandler;
created: LifeCycleHandler;
mounted: LifeCycleHandler;
rendered: LifeCycleHandler;
unmounted: LifeCycleHandler;
}
interface LifeCycleHookProps {
onBeforeRender: LifeCycleHook;
onCreated: LifeCycleHook;
onMounted: LifeCycleHook;
onRendered: LifeCycleHook;
onUnmounted: LifeCycleHook;
}
type LifeCycleHook = (handler: LifeCycleHandler) => void;
type LifeCycleState = {
value: keyof LifeCycleHandlerProps | null;
};
interface ReactiveComponent<T = any, P = any> {
(transform?: (props?: T) => P): ContextFunction;
}
interface RefContext extends Partial<LifeCycleHandlerProps>, LifeCycleHookProps {
node?: ContextNodeGetter;
}
type RenderFunction = TemplateFunction;
type RenderProps = ComponentProps;
type MouseEventListener = <T>(ev: SyntheticMouseEvent<T>) => void;
type SyntheticMouseEventListener = (this: HTMLElement, ev: MouseEvent) => any;
type SyntheticMouseEvent<T = EventTarget> = Event & {
ctrlKey: boolean;
currentTarget: T;
target: T;
};
type SyntheticRouteEvent<T extends EventTarget = Element> = Event & {
altKey: boolean;
ctrlKey: boolean;
currentTarget: T;
metaKey: boolean;
shiftKey: boolean;
target: T;
};
type SyntheticRouteEventListener = <T extends EventTarget = HTMLAnchorElement>(event: SyntheticRouteEvent<T> | null, options?: OnRouteOptions) => any;
type ActivityEffect<V> = (action: ActivityEffectAction<V>) => ContextFunction;
type ActivityEffectAction<V> = (valueProp: ValueProp<V>) => TemplateTagValue;
interface ActivityOptions<V = unknown, I = V> {
deep?: boolean;
force?: boolean;
transform?: ActivityTransform<V, I>;
}
type ActivityTransform<V = unknown, I = V> = (ctx: {
input: I;
update: (valueInput: V) => void;
value: V;
}) => void | Promise<void>;
type RouteValue = {
raw: Location;
matchedRoute?: string;
params: {
[key: string]: string;
};
pathname?: string | undefined;
};
type ValueProp<V = unknown> = {
value: V;
};
interface OnRouteOptions {
href?: string;
replace?: boolean;
}
interface ConfigDebugAllowable {
activity?: boolean;
creation?: boolean;
console?: boolean;
error?: boolean;
mutations?: boolean;
updates?: boolean;
warn?: boolean;
}
type ConfigEvent = 'abort' | 'animationcancel' | 'animationend' | 'animationiteration' | 'auxclick' | 'blur' | 'cancel' | 'canplay' | 'canplaythrough' | 'change' | 'click' | 'close' | 'contextmenu' | 'cuechange' | 'dblclick' | 'drag' | 'dragend' | 'dragenter' | 'dragexit' | 'dragleave' | 'dragover' | 'dragstart' | 'durationchange' | 'ended' | 'error' | 'focus' | 'formdata' | 'gotpointercapture' | 'input' | 'invalid' | 'keydown' | 'keypress' | 'keyup' | 'load' | 'loadeddata' | 'loadedmetadata' | 'loadend' | 'loadstart' | 'lostpointercapture' | 'mousedown' | 'mouseenter' | 'mouseleave' | 'mousemove' | 'mouseout' | 'mouseover' | 'mouseup' | 'pause' | 'play' | 'playing' | 'pointercancel' | 'pointerdown' | 'pointerenter' | 'pointerleave' | 'pointermove' | 'pointerout' | 'pointerover' | 'pointerup' | 'reset' | 'resize' | 'scroll' | 'select' | 'selectionchange' | 'selectstart' | 'submit' | 'touchcancel' | 'touchstart' | 'transitioncancel' | 'transitionend' | 'transitionrun' | 'transitionstart' | 'wheel';
interface Config {
events: ConfigEvent[] & string[];
TOKEN: string;
tokenRe: RegExp;
tokenReGlobal: RegExp;
}
type GetProps<T extends (props: any) => any> = T extends (props: infer P) => any ? P : any;
declare const activity: <V, I = V>(initialValue: V, transformOrOptions?: ActivityTransform<V, I> | ActivityOptions<V, I>, options?: ActivityOptions<V, I>) => {
effect(action: ActivityEffectAction<V>): (ctx?: ComponentContextPartial) => Partial<ComponentContext<{}>>;
initialValue: V;
reset: () => void;
update(valueInput: I, forceUpdate?: boolean): void;
value: () => V;
watch(action: (valueProp: ValueProp<V>) => any): void;
};
declare const init: ({ app, append, globalConfig, onAppMounted, root }: AppInitProps) => void;
declare const component: ComponentFactory;
declare const appendEvents: (eventsToAppend: string[]) => void;
declare const canDebug: (type: keyof ConfigDebugAllowable) => boolean | undefined;
declare const config: Config;
declare const setDebug: (isOn?: boolean, types?: ConfigDebugAllowable & object) => false | (ConfigDebugAllowable & object);
declare const setToken: (value: string) => string;
declare const lazyImport: <ImportType>(key: string | Symbol, importer: () => Promise<ImportType>) => {
effect(action: ActivityEffectAction<unknown>): (ctx?: Partial<ComponentContext<{}>>) => Partial<ComponentContext<{}>>;
initialValue: unknown;
reset: () => void;
update(valueInput: unknown, forceUpdate?: boolean): void;
value: () => unknown;
watch(action: (valueProp: ValueProp<unknown>) => any): void;
};
type RoutesConfig = Record<string, () => Promise<any>>;
declare class Router {
private fallback;
private matchedRoute?;
private params;
private pathImporter?;
private pathname?;
private pathSegmentRx;
private routeActivity;
private routesConfig?;
constructor();
createRoutes({ config, fallback }: {
config?: RoutesConfig;
fallback?: () => Promise<ContextFunction | undefined>;
guard?: (routeValue: RouteValue) => boolean;
}): (props: ComponentOptionalProps) => ContextFunction | undefined;
routeEffect(routeEffectCallback: ActivityEffectAction<RouteValue>): (ctx?: Partial<ComponentContext<{}>>) => Partial<ComponentContext<{}>>;
redirect(href: string): void;
route<T extends EventTarget = HTMLAnchorElement>(event: SyntheticRouteEvent<T> | null, options?: OnRouteOptions): void;
watchRoute(action: (valueProp: ValueProp<RouteValue>) => any): void;
private getRouteValue;
private pageRouteEffect;
private parseParams;
private transform;
private validateRoute;
}
declare const router$1: Router;
declare const createRoutes: (arg: Parameters<typeof router$1.createRoutes>[0]) => (props: Partial<{
attrs: AttrsTemplateTagValue;
children: TemplateTagValue;
className: string;
id: string;
key: string;
on: OnTemplateTagValue;
onClick: SyntheticRouteEventListener | EventListenerOrEventListenerObject;
ref: RefContext;
routeProps: RouteValue;
style: TemplateTagValue | PlainObject<TemplateTagValue>;
}>) => ContextFunction | undefined;
declare const routeEffect: (arg: Parameters<typeof router$1.routeEffect>[0]) => (ctx?: Partial<ComponentContext<{}>>) => Partial<ComponentContext<{}>>;
declare const redirect: (arg: Parameters<typeof router$1.redirect>[0]) => void;
declare const route: (event: SyntheticRouteEvent<EventTarget> | null, options?: OnRouteOptions | undefined) => void;
declare const watchRoute: (arg: Parameters<typeof router$1.watchRoute>[0]) => void;
declare const sanitizeLocation: ({ pathname, ...loc }: Location) => {
pathname: string;
ancestorOrigins: DOMStringList;
hash: string;
host: string;
hostname: string;
href: string;
toString(): string;
origin: string;
port: string;
protocol: string;
search: string;
assign(url: string | URL): void;
reload(): void;
replace(url: string | URL): void;
};
declare const onRouteUpdate: (action: (valueProp: ValueProp<Location>) => any) => void;
declare const router: (routeConfigCallback: ActivityEffectAction<Location>) => (ctx?: Partial<ComponentContext<{}>>) => Partial<ComponentContext<{}>>;
declare const onRoute: <T = HTMLAnchorElement>(event: SyntheticMouseEvent<T>, options?: OnRouteOptions) => void;
export { type ActivityEffect, type ActivityEffectAction, type ActivityOptions, type ActivityTransform, type AnyComponent, type AppGlobalConfig, type AppInitProps, type Aria, type AttrsTemplateTagValue, type Component, type ComponentArgs, type ComponentContext, type ComponentOptionalProps, type ComponentProps, type ContextFunction, type GetProps, type LifeCycleHandler, type LoomGlobal, type MouseEventListener, type OnRouteOptions, type OnTemplateTagValue, type PlainObject, type ReactiveComponent, type RefContext, type RenderFunction, type RenderProps, type RouteValue, type RoutesConfig, type SimpleComponent, type SyntheticMouseEvent, type SyntheticMouseEventListener, type SyntheticRouteEvent, type SyntheticRouteEventListener, type TemplateFunction, type TemplateTagValue, type TemplateTagValueFunction, type ValueProp, activity, appendEvents, canDebug, component, config, createRoutes, init, lazyImport, onRoute, onRouteUpdate, redirect, route, routeEffect, router, sanitizeLocation, setDebug, setToken, watchRoute };