Skip to content

Commit 1df2878

Browse files
sebastienfilionsebastienfilion
committed
wip
1 parent bdf5f13 commit 1df2878

4 files changed

Lines changed: 39 additions & 35 deletions

File tree

‎library/component.d.ts‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const StateSymbol: unique symbol;
22

33
export type State = { [k: string]: unknown };
4-
export type CustomElement = HTMLElement & {
4+
export type CustomElement<S extends State = {}> = HTMLElement & {
55
adoptedCallback?(): void;
66
attributeChangedCallback?(
77
name: string,
@@ -11,16 +11,18 @@ export type CustomElement = HTMLElement & {
1111
connectedCallback?(): void;
1212
disconnectedCallback?(): void;
1313
elements?: { [k: string]: HTMLElement };
14-
state: Partial<State>;
14+
state: Partial<S>;
1515
};
1616
export type Constructor<E extends CustomElement = CustomElement> = {
1717
new (): E;
1818
} & { observedAttributes: Array<string> };
19+
export type FactorizeHOF<S extends State = State, E extends CustomElement = CustomElement> = (
20+
f: (Component: Constructor<E>, render: (e: E, s: S) => void) => void,
21+
) => void
22+
export type ConstructHOF<E extends CustomElement = CustomElement> = (f: (e: E) => void) => void
1923
export type HOF<S extends State, E extends CustomElement = CustomElement> = (
20-
factorize: (
21-
f: (Component: Constructor<E>, render: (e: E, s: S) => void) => void,
22-
) => void,
23-
construct: (f: (e: E) => void) => void,
24+
factorize: FactorizeHOF<S, E>,
25+
construct: ConstructHOF<E>,
2426
) => void;
2527
export type AsyncRenderCallback<
2628
S extends State,
@@ -70,7 +72,7 @@ export declare enum Callbacks {
7072
type ValueOf<T> = T[keyof T];
7173

7274
export function factorizeComponent<
73-
S extends State,
75+
S extends State = State,
7476
E extends CustomElement = CustomElement,
7577
>(
7678
render: Render<S, E>,
@@ -105,7 +107,8 @@ export function useShadow<
105107
export function useTemplate<
106108
S extends State,
107109
E extends CustomElement = CustomElement,
110+
X extends Node = Node
108111
>(
109112
getTemplate: () => HTMLTemplateElement,
110-
map?: { [k: string]: (e: E) => CustomElement },
113+
map?: { [k: string]: (e: E) => X | null },
111114
): HOF<S, E>;

‎library/component_test.ts‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { assert, assertEquals } from "./asserts.js";
22
// @deno-types="./component.d.ts"
3-
import { CustomElement, State } from "./component.d.ts";
3+
import { CustomElement, HOF, State } from "./component.d.ts";
44
import {
55
factorizeComponent,
66
StateSymbol,
@@ -22,13 +22,13 @@ test(
2222
const Component = factorizeComponent(renderSpy, { active: false });
2323

2424
const e = constructComponent(Component);
25-
e?.connectedCallback();
25+
e.connectedCallback && e.connectedCallback();
2626

2727
return deferUntil(null, () => assertRenderSpy.called)
2828
.then(() => {
2929
assert(assertRenderSpy.callCount === 1);
3030
assertRenderSpy(([e, state]) => {
31-
assertEquals(e[StateSymbol], state);
31+
assertEquals(e.state, state);
3232
});
3333
});
3434
}),
@@ -37,11 +37,12 @@ test(
3737
test(
3838
"factorizeComponent: Add a factory",
3939
withDom(() => {
40+
type ComponentState = { active: boolean };
4041
const [renderSpy, assertRenderSpy] = factorizeSpy<RenderSpyFunction>();
41-
const Component = factorizeComponent(
42+
const Component = factorizeComponent<ComponentState>(
4243
renderSpy,
4344
{ active: false },
44-
(factorize) => {
45+
((factorize) => {
4546
factorize((Component, render) => {
4647
const _connectedCallback = Component.prototype.connectedCallback;
4748

@@ -58,11 +59,11 @@ test(
5859
},
5960
);
6061
});
61-
},
62+
}) as HOF<ComponentState>,
6263
);
6364

6465
const e = constructComponent(Component);
65-
e?.connectedCallback();
66+
e.connectedCallback && e.connectedCallback();
6667

6768
return deferUntil(null, () => assertRenderSpy.callCount === 2)
6869
.then(() => {
@@ -80,14 +81,15 @@ test(
8081
test(
8182
"factorizeComponent: Add a contructor",
8283
withDom(() => {
83-
const Component = factorizeComponent(
84+
type ComponentState = { active: boolean }
85+
const Component = factorizeComponent<ComponentState>(
8486
() => {},
8587
{ active: false },
86-
(_, construct) => {
88+
((_, construct) => {
8789
construct((e) => {
8890
e.attachShadow({ mode: "open" });
8991
});
90-
},
92+
}) as HOF<ComponentState>,
9193
);
9294

9395
const e = constructComponent(Component);
@@ -177,13 +179,13 @@ test(
177179

178180
const e = constructComponent(Component);
179181

180-
e?.adoptedCallback();
182+
e.adoptedCallback && e.adoptedCallback();
181183

182-
e?.attributeChangedCallback("value", null, "42");
184+
e.attributeChangedCallback && e.attributeChangedCallback("value", null, "42");
183185

184-
e?.connectedCallback();
186+
e.connectedCallback && e.connectedCallback();
185187

186-
e?.disconnectedCallback();
188+
e.disconnectedCallback && e.disconnectedCallback();
187189

188190
return deferUntilNextFrame()
189191
.then(() => {
@@ -220,9 +222,9 @@ test(
220222
test(
221223
"useTemplate",
222224
withDom(() => {
225+
type ComponentState = { active: boolean, count: number }
223226
const [renderSpy, assertRenderSpy] = factorizeSpy<RenderSpyFunction>();
224-
225-
const Component = factorizeComponent(renderSpy, {
227+
const Component = factorizeComponent<ComponentState>(renderSpy, {
226228
active: false,
227229
count: 0,
228230
});
@@ -238,18 +240,18 @@ test(
238240
addButton: (e) => e.querySelector("button"),
239241
number: (e) => e.querySelector("span"),
240242
},
241-
)((f) => f(Component, renderSpy));
243+
)((f) => f(Component, renderSpy) as HOF<ComponentState>);
242244

243245
const e = constructComponent(Component);
244246

245-
e?.connectedCallback();
247+
e.connectedCallback && e.connectedCallback();
246248

247249
return deferUntil(null, () => assertRenderSpy.called)
248250
.then(() => {
249251
assert(assertRenderSpy.called);
250252
assertRenderSpy(([e]) => {
251-
assert(e?.elements.addButton);
252-
assert(e?.elements.number);
253+
assert(e?.elements?.addButton);
254+
assert(e?.elements?.number);
253255
});
254256
});
255257
}),

‎library/testing.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function constructComponent<E extends CustomElement>(
88
C: Constructor<E>,
99
): E;
1010

11-
export function factorizeSpy<F extends (...xs: Array<unknown>) => unknown>(
11+
export function factorizeSpy<F extends (...xs: Array<any>) => unknown>(
1212
f?: F,
1313
): [
1414
F,
@@ -25,7 +25,7 @@ export function factorizeSpy<F extends (...xs: Array<unknown>) => unknown>(
2525
},
2626
];
2727

28-
export function test(name: string, f: () => void, g: () => boolean): void;
28+
export function test(name: string, f: () => void, g?: () => boolean): void;
2929

3030
export function withDom(
3131
f: (document: HTMLDocument) => void,

‎library/testing.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { maybeCall, randomUUID } from "./utilities.js";
33
export const TestsSymbol = Symbol.for("iy-tests");
44

55
export const constructComponent = (Component) => {
6-
if (globalThis.Deno) return new Component();
7-
else {
6+
if ('customElements' in globalThis) {
87
const uuid = `iy-${randomUUID()}`;
9-
window.customElements.define(uuid, Component);
10-
return window.document.createElement(uuid);
11-
}
8+
globalThis.customElements.define(uuid, Component);
9+
return globalThis.document.createElement(uuid);
10+
} else return new Component();
1211
};
1312

1413
/**

0 commit comments

Comments
 (0)