dothtml-interfaces 6.0.4 → 6.0.6

package/package.json

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

package/src/bindings/i-ref.ts

@@ -1,5 +1,9 @@
 import { IWatcher } from "./i-watcher";
+import { DotContent } from "../i-dot";
 
 export interface IRef<T = any> extends IWatcher<T | null> {
 	get element(): T;
+	ready(): Promise<T>;
+	append(content: DotContent): this;
+	prepend(content: DotContent): this;
 }

package/src/i-dot.ts

@@ -6,9 +6,10 @@ import {IReactive} from "./bindings/i-reactive";
 import { IBinding } from "./bindings/i-binding";
 import { IWatcher } from "./bindings/i-watcher";
 import IDotcssProp from "./styles/i-css-prop";
+import { IDotStyleBuilder } from "./styles/i-dot-style-builder";
 import { IRef } from "./bindings/i-ref";
 
-type DotContentPrimitive = string | number | boolean | undefined | null;
+export type DotContentPrimitive = string | number | boolean | undefined | null;
 type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IDotComponent | IDotDocument//typeof DotDocument;
 export type DotContent = DotContentBasic | Array<DotContent> | IReactive;//|(()=>DotContent);
 
@@ -51,19 +52,27 @@ export interface IDotDocument {
 	/**
 	 * Creates a generic HTML node that can render a string, HTML nodes, or dotHTML content.
 	*/
-	html(content: string | number | boolean | IReactive): IDotDocument;
+	html(content: DotContent): IDotDocument;
 	/**
 	 * Creates a text node that will render as a string, rather than being parsed as markup.
 	*/
-	text(content: string | number | boolean | IReactive): IDotDocument;
+	text(content: DotContent): IDotDocument;
 	/**
 	 * Creates a text node that will render as a string, rather than being parsed as markup.
 	*/
-	md(content: string | number | boolean | IReactive): IDotDocument;
+	md(content: DotContent): IDotDocument;
 	/**
-	 * Mounts a component.
+	 * Mounts a component or appends content.
 	 */
-	mount<T extends IDotComponent>(component: T, ...args: any[]): IDotDocument;
+	mount(content: DotContent, ...args: any[]): IDotDocument;
+	/**
+	 * Appends content to the current document.
+	 */
+	append(content: DotContent): this;
+	/**
+	 * Prepends content to the current document.
+	 */
+	prepend(content: DotContent): this;
 	slot(name?: string | any, fallback?: any): IDotDocument;
 	// mount<T extends IComponent>(init: (c: IMountedComponent<T>) => IMountedComponent<T> | void, component: T): IDotDocument;
 	// mount(component: IComponent, init: (init=>IMountedComponent): IMountedComponent|void): IDotDocument;
@@ -86,7 +95,7 @@ export interface IDotDocument {
 	*/
 	remove(): void;
 
-	style(c: string | ISignal<any> | IBinding<any, any> | IDotCss | ((s: IDotCss) => void)): this;
+	style(c: string | ISignal<any> | IBinding<any, any> | IDotcssProp | IDotStyleBuilder | ((s: IDotStyleBuilder) => void)): this;
 	attr(name: string, value: any): this;
 	on(event: string, callback: (e: any) => void): this;
 	onEnter(callback: (el: HTMLElement) => void): this;
@@ -452,7 +461,7 @@ export interface IDotGlobalAttrs<T extends HTMLElement = HTMLElement> {
 	part?: AttrVal<string>;
 	role?: AttrVal<string>;
 	spellCheck?: AttrVal<"true"> | AttrVal<"false">;
-	style?: AttrVal<string> | IDotcssProp | ((s: IDotCss) => void);
+	style?: AttrVal<string> | IDotcssProp | IDotStyleBuilder | ((s: IDotStyleBuilder) => void);
 	tabIndex?: AttrVal<number>;
 	title?: AttrVal<string>;
 	translate?: AttrVal<string>;

package/src/index.ts

@@ -4,6 +4,8 @@ export * from "./i-dot";
 
 export { default as IDotCss } from "./styles/i-dot-css";
 export * from "./styles/i-dot-css";
+export { default as IDotcssProp } from "./styles/i-css-prop";
+export { IDotStyleBuilder } from "./styles/i-dot-style-builder";
 
 
 export { default as IDotComponent, FrameworkItems } from "./i-dot-component";

package/src/styles/i-dot-css.ts

@@ -6,6 +6,7 @@ import IAtFontPaletteValues from "./at-rules/i-at-font-palette-values";
 import IAtKeyframesBuilder from "./at-rules/i-at-keyframes-builder";
 import IAtPageBuilder from "./at-rules/i-at-page-builder";
 import IDotcssProp from "./i-css-prop";
+import { IDotStyleBuilder } from "./i-dot-style-builder";
 
 
 
@@ -148,7 +149,7 @@ type Flex = `${number}fr`;
 // type FlexFlowShorthand = BasicCommonValues|`${FlexDirectionNames} ${FlexWrapNames}`;
 // type FlexShorthand = BasicCommonValues|`${BasicCommonValues|number} ${BasicCommonValues|number} ${BasicCommonValues|`${number}${AllLengthUnits}`}`;
 
-export default interface IDotCss extends IDotcssProp{
+export default interface IDotCss extends IDotStyleBuilder{
 	// TODO: ensure each of these has test cases.
 	// Right now, most of these don't actually work. But they're typed so that they can progressively be added to the librrary.
 	(selector: "@charset", charset: string): void;
@@ -177,10 +178,6 @@ export default interface IDotCss extends IDotcssProp{
 	(selector: Array<HTMLElement>|HTMLElement|string, styles: IDotcssProp): void;
 	(styles: IDotcssProp): void;
 
-	variable(name: string, value: any): this;
-	v(name: string): string;
-	[prop: string]: any;
-
 	version: string;
 }
 

package/src/styles/i-dot-style-builder.ts

@@ -0,0 +1,13 @@
+import IDotcssProp from "./i-css-prop";
+
+/**
+ * A fluent builder for CSS properties.
+ * Transforms all properties from IDotcssProp into methods that return the builder.
+ */
+export type IDotStyleBuilder = {
+	[K in keyof IDotcssProp]-?: (value: Exclude<IDotcssProp[K], undefined>) => IDotStyleBuilder;
+} & {
+	variable(name: string, value: any): IDotStyleBuilder;
+	v(name: string): string;
+	[prop: string]: any;
+};