structured-fw 1.3.4 → 1.4.0

package/README.md

@@ -444,13 +444,23 @@ That was the simplest possible example, let's make it more interesting by adding
 ### Component server-side code
 Create a new file `/app/views/HelloWorld/HelloWorld.ts` (server side component code):
 ```
-import { ComponentScaffold } from 'structured-fw/Types';
-export default class HelloWorld implements ComponentScaffold {
-    async getData(): Promise<{
-        luckyNumber: number
-    }> {
+import { Application } from 'structured-fw/Application';
+import { ComponentScaffold, RequestContext } from 'structured-fw/Types';
+
+type ComponentInput = {
+    name: string,
+}
+
+type ComponentOutput = {
+    greetName: string,
+    luckyNumber: number,
+}
+
+export default class HelloWorld implements ComponentScaffold<ComponentInput, ComponentOutput> {
+    async getData(data: ComponentInput, ctx: RequestContext, app: Application): Promise<ComponentOutput> {
         return {
-            luckyNumber: this.num()
+            greetName: data.name,
+            luckyNumber: this.num(),
         }
     }
 
@@ -462,7 +472,7 @@ export default class HelloWorld implements ComponentScaffold {
 
 Update `HelloWorld.html`:
 ```
-Hello, World!<br>
+Hello, {{greetName}}!<br>
 Your lucky number is {{luckyNumber}}
 ```
 

package/build/system/client/ClientComponent.d.ts

@@ -60,7 +60,7 @@ export declare class ClientComponent extends EventEmitter {
     private destroy;
     remove(): Promise<void>;
     bind<T extends any>(element: ClientComponent, event: string, callback: EventEmitterCallback<T>): void;
-    bind<T extends LooseObject | undefined>(element: HTMLElement | Window | Array<HTMLElement | Window>, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: ClientComponentEventCallback<T>): void;
+    bind<T extends LooseObject | undefined, Evt extends Event = Event>(element: HTMLElement | Window | Array<HTMLElement | Window>, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: ClientComponentEventCallback<T, Evt>): void;
     unbind<T extends LooseObject | undefined = undefined>(element: HTMLElement | Window | ClientComponent, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: ClientComponentEventCallback<T> | EventEmitterCallback<T>): void;
     private unbindOwn;
     private unbindAll;

package/build/system/server/Document.d.ts

@@ -17,9 +17,9 @@ export declare class Document extends Component<{
     initializers: Initializers;
     initializersInitialized: boolean;
     componentIds: Array<string>;
-    ctx: undefined | RequestContext;
+    ctx: RequestContext;
     appendHTML: string;
-    constructor(app: Application, title: string, ctx?: RequestContext<any>);
+    constructor(app: Application, title: string, ctx: RequestContext<any>);
     push(response: ServerResponse): void;
     body(): string;
     initInitializers(): Record<string, string>;

package/build/system/types/component.types.d.ts

@@ -26,15 +26,14 @@ export type ComponentEntry = {
     attributes?: Record<string, string>;
     initializer?: InitializerFunction;
 };
-export interface ComponentScaffold<T extends LooseObject = LooseObject, K extends KeysOfUnion<T> = KeysOfUnion<T>> {
+export interface ComponentScaffold<I extends LooseObject = LooseObject, O extends LooseObject = LooseObject, K extends KeysOfUnion<O> = KeysOfUnion<O>> {
     tagName?: string;
     exportData?: boolean;
     exportFields?: ReadonlyArray<K>;
     static?: boolean;
-    deferred?: (data: Record<string, any>, ctx: RequestContext | undefined, app: Application) => boolean;
+    deferred?: (data: Record<string, any>, ctx: RequestContext, app: Application) => boolean;
     attributes?: Record<string, string>;
-    getData: (this: ComponentScaffold, data: LooseObject, ctx: undefined | RequestContext, app: Application, component: Component) => Promise<T | void>;
-    [key: string]: any;
+    getData: (this: ComponentScaffold<I, O>, data: I, ctx: RequestContext, app: Application, component: Component) => Promise<O | void>;
 }
 export type ComponentEvents = {
     componentCreated: Component;
@@ -47,13 +46,13 @@ export type ClientComponentTransition = {
 };
 export type ClientComponentTransitionEvent = 'show' | 'hide';
 export type ClientComponentTransitions = Record<ClientComponentTransitionEvent, ClientComponentTransition>;
-export type ClientComponentBoundEvent<T extends LooseObject | undefined, E extends HTMLElement | Window | ClientComponent> = {
-    element: E;
+export type ClientComponentBoundEvent<Data extends LooseObject | undefined, Element extends HTMLElement | Window | ClientComponent, Evt extends Event = Event> = {
+    element: Element;
     event: keyof HTMLElementEventMap;
-    callback: E extends ClientComponent ? EventEmitterCallback<T> : (e: Event) => void;
-    callbackOriginal: E extends ClientComponent ? EventEmitterCallback<T> : ClientComponentEventCallback<T>;
+    callback: Element extends ClientComponent ? EventEmitterCallback<Data> : (e: Event) => void;
+    callbackOriginal: Element extends ClientComponent ? EventEmitterCallback<Data> : ClientComponentEventCallback<Data, Evt>;
 };
-export type ClientComponentEventCallback<T> = (e: Event, data: T, element: HTMLElement | Window) => void;
+export type ClientComponentEventCallback<T, E extends Event = Event> = (e: E, data: T, element: HTMLElement | Window) => void;
 export type InitializerFunction = (this: ClientComponent, ctx: InitializerFunctionContext) => Promise<void>;
 export type Initializers = {
     [key: string]: InitializerFunction;

package/package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,hbs,css index.js",