dothtml-interfaces 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml-interfaces",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "description": "Dependency injection interfaces for DOTHtml.",
   "main": "src/index.d.ts",
   "types": "src/index.d.ts",

package/src/{i-component.d.ts → i-dot-component.d.ts}

@@ -1,6 +1,5 @@
 
-import { IDotDocument } from "./i-dot";
-import IDotCss from "./styles/i-dot-css";
+import { IDotCore, IDotDocument } from "./i-dot";
 
 // export type EventNames<T> = T extends { allowedEvents: infer E } ? E : never;
 
@@ -18,7 +17,7 @@ export interface FrameworkItems {
 		readonly shadowRoot: ShadowRoot;
 		readonly isRendered: boolean;
 		readonly tagName: string;
-		readonly styles: Array<string>;
+		// readonly styles: Array<string>; // Can't have this anymore because it's a memory leak.
 		readonly args: Array<any>;
 		// readonly styleElement: HTMLStyleElement;
 		readonly sharedStyles: CSSStyleSheet[];
@@ -31,7 +30,7 @@ export interface FrameworkItems {
 // TODO: there's a weird problem where if a constructor is not provided, it's not possible have a custom builder.
 // It should be the contsructor that depends on the builder, not the other way around. If we can't get this working, 
 // it might just be better to rethink how stuff gets passed into components.
-export default interface IComponent/*<TProps extends Array<string> = [], TEvents extends Array<string> = []>*/ {
+export default interface IDotComponent/*<TProps extends Array<string> = [], TEvents extends Array<string> = []>*/ {
 
 	readonly _?: FrameworkItems;
 
@@ -44,8 +43,9 @@ export default interface IComponent/*<TProps extends Array<string> = [], TEvents
 
 	/**
 	 * A function returning DOThtml (required). The `build` hook is called once per component instance, and constructs the component's virtual DOM.
-	 */
-    build(): IDotDocument;
+	 * @param dot - The DOThtml core object passed in for DI purposes. You can also just use the main .
+	 * @returns The DOThtml document representing the component's virtual DOM.	 */
+    build(dot: IDotCore): IDotDocument;
 
 	/**
 	 * An optional function called after the component is built. Is only called once per component instance. 
@@ -73,12 +73,12 @@ export default interface IComponent/*<TProps extends Array<string> = [], TEvents
     unmounted?(): void;
 
 	/**
-	 * An optional function called before the component is deleted.
-	 */
-    deleting?(): void;
-
-	/**
-	 * An optional function called after the component is deleted.
+	 * A function that returns a string containing CSS rules to be applied to all instances of the component.
+	 * It will only be called exactly once per component. We use a function so that you can return a potentially 
+	 * large string containing CSS without introducing a memory leak. The reason it's not static is so that 
+	 * it will work in JavaScript, and because static members are not valid in DI interfaces. All styles are scoped
+	 * to the component's shadow DOM.
+	 * @returns A string (or array of strings) containing imported CSS rules.
 	 */
-    deleted?(): void;
+	stylize?(): string|Array<string>;
 }

package/src/i-dot.d.ts

@@ -1,12 +1,12 @@
 
-import IComponent, { FrameworkItems } from "./i-component";
+import IDotComponent from "./i-dot-component";
 import IDotCss from "./styles/i-dot-css";
 import IEventBus from "./i-event-bus";
 import {IReactive} from "./i-reactive";
 import IDotcssProp from "./styles/i-css-prop";
 
 type DotContentPrimitive = string | number | boolean;
-type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IComponent | IDotDocument//typeof DotDocument;
+type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IDotComponent | IDotDocument//typeof DotDocument;
 export type DotContent = DotContentBasic | Array<DotContent> | IReactive;//|(()=>DotContent);
 
 type AttrVal<T = string | number | boolean> = T | IReactive<T>;
@@ -55,7 +55,7 @@ export interface IDotDocument {
 	 * Mounts a component.
 	 * TODO: add second arg.
 	 */
-	mount<T extends IComponent>(component: T): IDotDocument;
+	mount<T extends IDotComponent>(component: T): IDotDocument;
 	// mount<T extends IComponent>(init: (c: IMountedComponent<T>) => IMountedComponent<T> | void, component: T): IDotDocument;
 	// mount(component: IComponent, init: (init=>IMountedComponent): IMountedComponent|void): IDotDocument;
 	/**
@@ -382,8 +382,8 @@ export interface IDotCore extends IDotDocument {
 	// Works but doesn't infer types from the component.
 	// There's room for improvement here but it's not clear to me how to do it.
 	// What I'd like to do is have the types tied to the IComponent interface rather than the component factory function.
-	component<TProps extends string[] = [], TEvents extends string[] = []>(Base: new () => IComponent, styles?: string|IDotcssProp|Array<string|IDotcssProp>)
-		: new (attrs?: ComponentArgs<TProps, TEvents>) => IComponent & { new (attrs?: ComponentArgs<TProps, TEvents>): IComponent };
+	component<TProps extends string[] = [], TEvents extends string[] = []>(Base: new () => IDotComponent, styles?: string|IDotcssProp|Array<string|IDotcssProp>)
+		: new (attrs?: ComponentArgs<TProps, TEvents>) => IDotComponent & { new (attrs?: ComponentArgs<TProps, TEvents>): IDotComponent };
 
 	useStyles(document: Document, styles: Styles): HTMLStyleElement;
 }
@@ -399,7 +399,7 @@ export interface IDotWindowWrapper{
 }
 
 export interface IDotWindowBuilder {
-	(options: {content: IDotDocument, width?: number, height?: number, title?: string}): IDotWindowWrapper;
+	(options: {content: IDotComponent|IDotDocument, width?: number, height?: number, title?: string}): IDotWindowWrapper;
 }
 
 export interface IDotConditionalDocument extends IDotDocument {

package/src/index.d.ts

@@ -6,7 +6,7 @@ export { default as IDotCss } from "./styles/i-dot-css";
 export * from "./styles/i-dot-css";
 
 
-export { default as IComponent, FrameworkItems } from "./i-component";
+export { default as IDotComponent, FrameworkItems } from "./i-dot-component";
 
 export { IReactive, IReactiveWatcher } from "./i-reactive";
 export { default as IEventBus } from "./i-event-bus";