@esportsplus/template 0.19.1 → 0.19.3

package/build/html/index.d.ts

@@ -1,7 +1,8 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RenderableReactive, RenderableValue } from '../types.js';
+import { Attributes, Renderable, RenderableReactive } from '../types.js';
+type Values<T = unknown> = Attributes | Attributes[] | Readonly<Attributes> | Readonly<Attributes[]> | Renderable<T>;
 declare const html: {
-    (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]): Node;
-    reactive<T>(array: ReactiveArray<T[]>, template: RenderableReactive["template"]): RenderableReactive;
+    (literals: TemplateStringsArray, ...values: (Values | Values[])[]): Node;
+    reactive<T>(array: ReactiveArray<T>, template: RenderableReactive<T>["template"]): RenderableReactive<T>;
 };
 export default html;

package/build/index.d.ts

@@ -1,4 +1,4 @@
 export { default as html } from './html/index.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
-export type { Attributes, Element, Renderable, RenderableValue } from './types.js';
+export type { Attributes, Element, Renderable } from './types.js';

package/build/slot/reactive.d.ts

@@ -1,3 +1,3 @@
 import { RenderableReactive } from '../types.js';
-declare const _default: (anchor: Element, renderable: RenderableReactive) => Node;
+declare const _default: <T>(anchor: Element, renderable: RenderableReactive<T>) => Node;
 export default _default;

package/build/types.d.ts

@@ -17,17 +17,15 @@ type Attributes = {
     ondisconnect?: (element: Element) => void;
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
-type Effect<T> = () => EffectResponse<T>;
-type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive | Renderable;
+type Effect<T> = () => T extends [] ? Renderable[] : Renderable;
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Primitive = bigint | boolean | null | number | string | undefined;
-type Renderable = DocumentFragment | Node | NodeList | Primitive | RenderableReactive | Renderable[];
-type RenderableReactive = Readonly<{
+type Renderable<T = unknown> = DocumentFragment | Effect<T> | Node | NodeList | Primitive | RenderableReactive<T> | Renderable[];
+type RenderableReactive<T> = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
-    array: ReactiveArray<unknown[]>;
-    template: (this: ReactiveArray<unknown[]>, ...args: Parameters<Parameters<ReactiveArray<unknown[]>['map']>[0]>) => ReturnType<typeof html>;
+    array: ReactiveArray<T>;
+    template: (this: ReactiveArray<T>, ...args: Parameters<Parameters<ReactiveArray<T>['map']>[0]>) => ReturnType<typeof html>;
 }>;
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | RenderableReactive;
 type SlotGroup = {
     head: Element;
     tail: Element;
@@ -42,4 +40,4 @@ type Template = {
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Renderable, RenderableReactive, RenderableValue, SlotGroup, Template };
+export type { Attributes, Effect, Element, Renderable, RenderableReactive, SlotGroup, Template };

package/package.json

@@ -2,7 +2,7 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.16.1",
+    "@esportsplus/reactivity": "^0.16.6",
     "@esportsplus/tasks": "^0.2.1",
     "@esportsplus/utilities": "^0.22.1"
   },
@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/html/index.ts

@@ -1,11 +1,14 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
 import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
-import { RenderableReactive, RenderableValue } from '~/types';
+import { Attributes, Renderable, RenderableReactive } from '~/types';
 import { cloneNode } from '~/utilities/node';
 import parser from './parser';
 
 
-const html = (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]) => {
+type Values<T = unknown> = Attributes | Attributes[] | Readonly<Attributes> | Readonly<Attributes[]> | Renderable<T>;
+
+
+const html = (literals: TemplateStringsArray, ...values: (Values | Values[])[]) => {
     let { fragment, slots } = parser.parse(literals),
         clone = cloneNode.call(fragment, true);
 
@@ -62,7 +65,7 @@ const html = (literals: TemplateStringsArray, ...values: (RenderableValue | Rend
     return clone;
 };
 
-html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']): RenderableReactive => {
+html.reactive = <T>(array: ReactiveArray<T>, template: RenderableReactive<T>['template']): RenderableReactive<T> => {
     return {
         [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
         array,

package/src/index.ts

@@ -1,4 +1,4 @@
 export { default as html } from './html';
 export { default as render } from './render';
 export { default as svg } from './svg';
-export type { Attributes, Element, Renderable, RenderableValue } from './types';
+export type { Attributes, Element, Renderable } from './types';

package/src/slot/reactive.ts

@@ -7,17 +7,17 @@ import { ondisconnect, remove } from './cleanup';
 
 
 class ReactiveArraySlot<T> {
-    array: ReactiveArray<T[]>;
+    array: ReactiveArray<T>;
     fragment: Node;
     marker: Element;
     nodes: SlotGroup[] = [];
     template: (
-        this: ReactiveArray<T[]>,
-        ...args: Parameters< Parameters<ReactiveArray<T[]>['map']>[0] >
+        this: ReactiveArray<T>,
+        ...args: Parameters< Parameters<ReactiveArray<T>['map']>[0] >
     ) => SlotGroup;
 
 
-    constructor(anchor: Element, array: ReactiveArray<T[]>, template: RenderableReactive['template']) {
+    constructor(anchor: Element, array: ReactiveArray<T>, template: RenderableReactive<T>['template']) {
         let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
 
         this.array = array;
@@ -163,7 +163,7 @@ class ReactiveArraySlot<T> {
 }
 
 
-export default (anchor: Element, renderable: RenderableReactive) => {
+export default <T>(anchor: Element, renderable: RenderableReactive<T>) => {
     let { array, template } = renderable,
         slot = new ReactiveArraySlot(anchor, array, template);
 

package/src/slot/render.ts

@@ -21,7 +21,7 @@ export default function render(anchor: Element, input: unknown): Node {
     }
 
     if (RENDERABLE in input) {
-        return reactive(anchor, input as RenderableReactive);
+        return reactive(anchor, input as RenderableReactive<unknown>);
     }
 
     if (isArray(input)) {

package/src/types.ts

@@ -18,14 +18,10 @@ type Attributes = {
     [key: `data-${string}`]: string | undefined;
     onconnect?: (element: Element) => void;
     ondisconnect?: (element: Element) => void;
-    // 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 [] ? (Primitive | Renderable)[] : Primitive | Renderable;
+type Effect<T> = () => T extends [] ? Renderable[] : Renderable;
 
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 
@@ -33,19 +29,17 @@ type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 // - Importing from ^ causes 'cannot be named without a reference to...' error
 type Primitive = bigint | boolean | null | number | string | undefined;
 
-type Renderable = DocumentFragment | Node | NodeList | Primitive | RenderableReactive | Renderable[];
+type Renderable<T = unknown> = DocumentFragment | Effect<T> | Node | NodeList | Primitive | RenderableReactive<T> | Renderable[];
 
-type RenderableReactive = Readonly<{
+type RenderableReactive<T> = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
-    array: ReactiveArray<unknown[]>;
+    array: ReactiveArray<T>;
     template: (
-        this: ReactiveArray<unknown[]>,
-        ...args: Parameters< Parameters<ReactiveArray<unknown[]>['map']>[0] >
+        this: ReactiveArray<T>,
+        ...args: Parameters< Parameters<ReactiveArray<T>['map']>[0] >
     ) => ReturnType<typeof html>;
 }>;
 
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | RenderableReactive;
-
 type SlotGroup = {
     head: Element;
     tail: Element;
@@ -72,7 +66,7 @@ type Template = {
 export type {
     Attributes,
     Effect, Element,
-    Renderable, RenderableReactive, RenderableValue,
+    Renderable, RenderableReactive,
     SlotGroup,
     Template
 };