@lordfokas/yrframe 0.1.0 → 0.1.2

package/dist/Component.d.ts

@@ -0,0 +1,30 @@
+import { ComponentEvents } from "./ComponentEvents.js";
+import { Attributes } from "./utils.js";
+declare const evt: unique symbol;
+export declare class Component<A extends Attributes> extends HTMLElement {
+    /** Attribute Event Qualifier chars. Attributes starting with this are special. */
+    static readonly AEQ = "yr:";
+    readonly [evt]: ComponentEvents;
+    protected events(): ComponentEvents;
+    constructor(props: Partial<A>, defaults?: Partial<A>);
+    /** Remove all children nodes. */
+    clearChildren(): void;
+    isDisabled(): boolean;
+    /** HTML5 Custom Element lifecycle callback (remove from page) */
+    disconnectedCallback(): void;
+    /** HTML5 Custom Element lifecycle callback (add to page) */
+    connectedCallback(): void;
+    /** Draw this component's internals. Should return only children nodes. */
+    render(): HTMLElement | HTMLElement[] | string | null;
+    /** Redraw this component. Works by deleting all children, calling render() and appending the results. */
+    redraw(): void;
+    /** Called after redraw() to do special manipulation of children nodes. */
+    inject(): void;
+    /** Get this component's real width in pixels. */
+    width(): number;
+    /** Get this component's real height in pixels. */
+    height(): number;
+    /** Shortcut to register this component with a given tag name */
+    static register(tag: string): void;
+}
+export {};

package/dist/ComponentEvents.d.ts

@@ -0,0 +1,51 @@
+import { Event } from '@lordfokas/event-bus';
+import { Component } from './Component.js';
+import { EventTarget, Source } from './utils.js';
+type Value = object | string | number | boolean;
+type Callback<T extends Event> = (this: Component<any>, value: T | Value | Value[], evt: T) => void;
+type Optional = "optional";
+/**
+ * Event manager for component special functions.
+ * A developer isn't meant to directly interface with this class,
+ * except by calling Component.events()
+ */
+export declare class ComponentEvents {
+    private listeners;
+    private sources;
+    private triggers;
+    private readonly component;
+    private readonly owner;
+    constructor(component: HTMLElement);
+    /** Called by the component when entering DOM */
+    connect(): void;
+    /** Called by the component when leaving DOM */
+    disconnect(): void;
+    /** Set up and attach a listener, given a configuration  */
+    private createListener;
+    /** Enforce mandatory targets and skip missing optional ones. */
+    private skip;
+    /** Attach a generic listener for an event. */
+    private attachListener;
+    attachGeneric<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, handler: Callback<T>, name: string, optional?: Optional): void;
+    attachConsumer<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, handler: Callback<T>, name: string, optional?: Optional): void;
+    /** Attach a listener that enriches the target event with data from this component. */
+    attachSupplier<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, source: Source<any>, name: string, optional?: Optional): void;
+    /**
+     * Attach a listener that removes data from an event if a predicate passes.
+     * If the target configuration has no path, the whole event is stopped instead.
+     */
+    attachRemover<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, predicate: Source<boolean>, name: string, optional?: Optional): void;
+    /** Attach a listener that disables a component based on a boolean event field. */
+    attachDisabler<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, source: Source<HTMLElement>, name: string, optional?: Optional): void;
+    /** Create a function that will fire an event and process data from it. */
+    attachSource<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, name: string, optional?: Optional): void;
+    /** Create a fake source function that supplies a static or local value. */
+    attachStatic(value: any, source: Source<any>, name: string, optional?: Optional): void;
+    /** Fire a source function and process the returned data. */
+    seek<T extends Event>(name: string, callback: Callback<T>): void;
+    /** Create a function that will fire an event to export data. */
+    attachTrigger<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, name: string, optional?: Optional): void;
+    /** Fire a trigger function with the given data. */
+    fire(name: string, data?: any, parent?: Event): void;
+}
+export {};

package/dist/ComponentFactory.d.ts

@@ -0,0 +1,27 @@
+import { Component } from "./Component.js";
+import { Attributes, Class } from "./utils.js";
+/**
+ * JSX / TSX component factory.
+ * Should not be invoked manually, is used by TSC when building the project.
+ */
+export declare class ComponentFactory {
+    static make(tag: string, props: object, ...children: any[]): HTMLElement;
+    static make<A extends Attributes>(tag: Class<Component<A>>, props: A, ...children: any[]): HTMLElement;
+    /** Apply vanilla HTML attributes and event callback functions. There is no component level logic here. */
+    static setAttributesAndEvents(element: HTMLElement, props: any): void;
+    /** Logic for appending children to a parent element according to the possible returns of render() */
+    static appendChildren(element: HTMLElement, children: HTMLElement[]): void;
+}
+/**
+ * ## Here be Shenanigans
+ * In the event your TSC refuses to find ComponentFactory.make
+ * and insists on using React.createElement, fear not:
+ *
+ * Just `import { FakeReact as React }` and call it a day.
+ *
+ * At least until you can be arsed to figure it out...
+ * `¯\_(ツ)_/¯`
+ */
+export declare class FakeReact {
+    static createElement: typeof ComponentFactory.make;
+}

package/dist/Facade.d.ts

@@ -0,0 +1,23 @@
+import { ComponentEvents } from "./ComponentEvents.js";
+import { Attributes, Source } from "./utils.js";
+declare const evt: unique symbol;
+interface EventHost {
+    [evt]: ComponentEvents;
+}
+type FacadeElement = HTMLElement & EventHost & {
+    connectedCallback: Source<void>;
+    disconnectedCallback: Source<void>;
+};
+/**
+ * Fake component that constructs and returns another component instead.
+ * Used for aliasing and adapting components from other libraries.
+ */
+export declare class Facade<A extends Attributes> {
+    static readonly AEQ = "yr:";
+    protected readonly node: FacadeElement;
+    protected readonly isCustom: boolean;
+    protected events(): ComponentEvents;
+    constructor(tag: string, props: Partial<A>, defaults?: Partial<A>);
+    content(): FacadeElement;
+}
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+import { Event } from "@lordfokas/event-bus";
+export type Class<X> = {
+    new (...$: any[]): X;
+};
+export type EventTarget<T extends Event, K1 extends keyof T> = [Class<T> & typeof Event, [] | [K1] | [K1, keyof T[K1]], number];
+export type Attributes = {
+    [key: string]: EventTarget<any, any> | string | Function | undefined;
+};
+export type Consumer<T> = (t: T) => void;
+export type Source<T> = () => T;
+export declare function has($: any): boolean;

package/dist/yrframe.d.ts

@@ -0,0 +1,5 @@
+export { Component } from './Component.js';
+export { ComponentEvents } from './ComponentEvents.js';
+export { ComponentFactory, FakeReact } from './ComponentFactory.js';
+export { Facade } from './Facade.js';
+export { Attributes, EventTarget } from './utils.js';

package/dist/yrframe.js

@@ -1,3 +1,4 @@
 export { Component } from './Component.js';
 export { ComponentEvents } from './ComponentEvents.js';
 export { ComponentFactory, FakeReact } from './ComponentFactory.js';
+export { Facade } from './Facade.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lordfokas/yrframe",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A Typescript class-based WebComponents library using Material Design.",
   "main": "dist/yrframe.js",
   "scripts": {
@@ -20,6 +20,6 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@lordfokas/event-bus": "^1.0.1"
+    "@lordfokas/event-bus": "^1.0.4"
   }
 }