@esportsplus/template 0.12.12 → 0.14.0

package/src/types.ts

@@ -1,5 +1,5 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants';
+import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP } from './constants';
 import { firstChild } from './utilities';
 import attributes from './attributes';
 import event from './event';
@@ -14,13 +14,19 @@ type Attributes = {
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
+    // Element is mounted to DOM
+    // - Trigger animations, etc.
+    onmount?: (element: Element) => void;
+    // Element is rendered in fragment
+    // - Used to retrieve reference to the element
+    onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 
 type Effect<T> = () => EffectResponse<T>;
 
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
 
-type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
+type Element = HTMLElement & Attributes & { [SLOT_CLEANUP]?: VoidFunction[] } & Record<PropertyKey, unknown>;
 
 type Elements = Element[];
 
@@ -51,8 +57,7 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.set | typeof attributes.spread | typeof event | typeof slot;
-        name: PropertyKey | null;
+        fn: typeof attributes.spread | typeof event | typeof slot;
         path: typeof firstChild[];
         slot: number;
     }[] | null;