Merge pull request #4 from functionalland/feature/types

Fix all types and update tests

Author: sebastienfilion

library/asserts.js

@@ -1,4 +1,4 @@
-import { maybeCall, parseSpineCaseToCamelCase } from "./utilities.js";
+import { maybeCall, parseSpineCaseToCamelCase } from "./utilities.ts";
 
 export const StateSymbol = Symbol();
 export const ValidateAttributeSymbol = Symbol();
@@ -42,8 +42,8 @@ export type ValidateAttributeCallback<
 > = (
   a: {
     name: string;
-    oldValue: Partial<S>[Extract<keyof Partial<S>, string>];
-    value: Partial<S>[Extract<keyof Partial<S>, string>];
+    oldValue: S[Extract<keyof S, string>];
+    value: S[Extract<keyof S, string>];
   },
   e: CustomElement<S>,
   s: S,
@@ -161,7 +161,7 @@ const asyncRender = <
 const factorizeFunctionalComponentClass = <
   S extends State,
   E extends CustomElement<S> = CustomElement<S>,
->(TargetConstructor = HTMLElement) => (
+>(TargetConstructor = globalThis.HTMLElement) => (
   class FunctionalComponent extends TargetConstructor {
     constructor(gs: Array<ConstructCallback<S, E>>) {
       super();
@@ -356,7 +356,7 @@ export const factorizeComponent = <
       configurable: true,
       enumerable: false,
       value() {
-        return maybeCall(_connectedCallback, this)
+        return maybeCall(() => _connectedCallback.call(this))
           .then((s = {}) => {
             this[StateSymbol] = Object.assign({}, state, s);
             _render(this, this[StateSymbol], {
@@ -497,14 +497,10 @@ export const useAttributes = <
                   // Overwrite the type because sometime it's just a string
                   oldValue: (Reflect.has(map, name)
                     ? map[name](oldValue)
-                    : oldValue) as unknown as Partial<
-                      S
-                    >[Extract<keyof Partial<S>, string>],
+                    : oldValue) as unknown as S[Extract<keyof S, string>],
                   value: (Reflect.has(map, name)
                     ? map[name](value)
-                    : value) as unknown as Partial<
-                      S
-                    >[Extract<keyof Partial<S>, string>],
+                    : value) as unknown as S[Extract<keyof S, string>],
                 },
                 this,
                 Object.assign({}, this[StateSymbol]),
@@ -552,7 +548,7 @@ export const useAttributes = <
             configurable: true,
             enumerable: true,
             value(this: E) {
-              return maybeCall(_connectedCallback, this)
+              return maybeCall(() => _connectedCallback.call(this))
                 .then(() => {
                   for (const key of observedAttributes) {
                     const normalizedKey = parseDatasetToState(key) as keyof S;
@@ -664,7 +660,7 @@ export const useCallbacks = <
             configurable: true,
             enumerable: true,
             value(...xs: [string, string, string]) {
-              return maybeCall(g, this, ...xs)
+              return maybeCall(() => g.call(this, ...xs))
                 .then(() =>
                   f(
                     this,
@@ -796,8 +792,8 @@ export const useTemplate = <
           configurable: true,
           enumerable: true,
           value(this: E) {
-            return maybeCall(_connectedCallback, this)
-              .then(() => maybeCall(f))
+            return maybeCall(() => _connectedCallback.call(this))
+              .then(() => maybeCall<HTMLTemplateElement>(f))
               .then((template) => {
                 if (!template) return;
                 (this.shadowRoot || this).appendChild(

library/component.d.ts

@@ -1,21 +1,21 @@
-import { assert, assertEquals } from "./asserts.js";
+import { assert, assertEquals } from "./asserts.ts";
 import {
   AsyncRenderCallback,
-  CustomElement,
   ConstructHOF,
+  CustomElement,
+  factorizeComponent,
   HOF,
   LifeCycleCallback,
   State,
   StateSymbol,
-  factorizeComponent,
   useAttributes,
   useCallbacks,
   useShadow,
   useTemplate,
+  ValidateAttributeCallback,
 } from "./component.ts";
-// @deno-types="./testing.d.ts"
-import { constructComponent, factorizeSpy, test, withDom } from "./testing.js";
-import { deferUntil, deferUntilNextFrame, noop } from "./utilities.js";
+import { constructComponent, factorizeSpy, test, withDom } from "./testing.ts";
+import { deferUntil, deferUntilNextFrame, noop } from "./utilities.ts";
 
 type RenderSpyFunction<
   S extends State,
@@ -44,7 +44,6 @@ test(
         });
       });
   }),
-  () => "ShadowRoot" in globalThis,
 );
 
 test(
@@ -91,7 +90,6 @@ test(
         });
       });
   }),
-  () => "ShadowRoot" in globalThis,
 );
 
 test(
@@ -111,15 +109,17 @@ test(
     const e = constructComponent<ComponentState>(Component);
     assert(e.shadowRoot);
   }),
-  () => "ShadowRoot" in globalThis,
+  () => "DocumentFragment" in globalThis,
 );
 
 test(
   "useAttributes",
   withDom(() => {
     type ComponentState = { value: number };
     const [attributeMapSpy, assertAttributeMapSpy] = factorizeSpy(Number);
-    const [validateAttributeSpy, assertValidateAttributeSpy] = factorizeSpy(
+    const [validateAttributeSpy, assertValidateAttributeSpy] = factorizeSpy<
+      ValidateAttributeCallback<ComponentState>
+    >(
       ({ name: _name, oldValue, value }) => (oldValue !== value && value >= 0),
     );
     const [renderSpy, assertRenderSpy] = factorizeSpy<
@@ -159,7 +159,6 @@ test(
         });
       });
   }),
-  () => "ShadowRoot" in globalThis,
 );
 
 test(
@@ -170,16 +169,15 @@ test(
       active: false,
       count: 0,
     };
-    const callback =
-      ((
-        _e: CustomElement<ComponentState>,
-        render: AsyncRenderCallback<ComponentState>,
-        ...xs: [string, string, string]
-      ) => {
-        render((_, { count }) => ({ active: true, count: ++count }))(
-          {} as unknown as Event,
-        );
-      }) as LifeCycleCallback<ComponentState>;
+    const callback = ((
+      _e: CustomElement<ComponentState>,
+      render: AsyncRenderCallback<ComponentState>,
+      ..._xs: [string, string, string]
+    ) => {
+      render((_, { count }) => ({ active: true, count: ++count }))(
+        {} as unknown as Event,
+      );
+    }) as LifeCycleCallback<ComponentState>;
     const [adoptedCallbackSpy, assertAdoptedCallbackSpy] = factorizeSpy(
       callback,
     );
@@ -210,13 +208,13 @@ test(
 
     const e = constructComponent(Component);
 
+    e.connectedCallback && e.connectedCallback();
+
     e.adoptedCallback && e.adoptedCallback();
 
     e.attributeChangedCallback &&
       e.attributeChangedCallback("value", null, "42");
 
-    e.connectedCallback && e.connectedCallback();
-
     e.disconnectedCallback && e.disconnectedCallback();
 
     return deferUntilNextFrame()
@@ -234,7 +232,6 @@ test(
         assert(assertRenderSpy.callCount === 5);
       });
   }),
-  () => "ShadowRoot" in globalThis,
 );
 
 test(
@@ -280,7 +277,10 @@ test(
         addButton: (e) => e.querySelector("button"),
         number: (e) => e.querySelector("span"),
       },
-    )((f) => f(Component, renderSpy, initialState), noop as ConstructHOF<ComponentState>);
+    )(
+      (f) => f(Component, renderSpy, initialState),
+      noop as ConstructHOF<ComponentState>,
+    );
 
     const e = constructComponent<ComponentState>(Component);