fix(Component): require state if S is defined (#45)

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- `Component<S>` now requires `state` if `S` is defined ([#43](https://github.com/tentjs/tent/issues/43))
+
 ## [0.0.33-0] - 2024-05-27
 
 ### Added

src/__tests__/component.test.ts

@@ -5,6 +5,10 @@ import { getByText, getByTestId, fireEvent } from '@testing-library/dom';
 
 const { div, p, button } = tags;
 
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
 const Counter: Component<{ count: number }> = {
   state: { count: 0 },
   view: ({ state }) =>
@@ -47,4 +51,29 @@ describe('components', () => {
 
     expect(mounted).toHaveBeenCalledTimes(1);
   });
+
+  test('with state', () => {
+    const WithState: Component<{ count: number }> = {
+      state: { count: 0 },
+      view: ({ state }) => div(p(`Count: ${state.count}`)),
+    };
+
+    mount(document.body, WithState);
+
+    const el = getByText(document.body, /Count: 0/);
+
+    expect(el).toBeDefined();
+  });
+
+  test('without state', () => {
+    const WithoutState: Component = {
+      view: () => div(p(`No state`)),
+    };
+
+    mount(document.body, WithoutState);
+
+    const el = getByText(document.body, /No state/);
+
+    expect(el).toBeDefined();
+  });
 });

src/main.ts

@@ -6,17 +6,14 @@ function mount<S extends {} = {}, A extends Attrs = {}>(
   element: HTMLElement | Element | TentNode<A> | null,
   component: Component<S, A>,
 ) {
-  if (element == null) {
-    return;
-  }
+  if (element == null) return;
 
   let node: TentNode<A>;
-  const { state = {} as S, view, mounted } = component;
+  const { view, mounted } = component;
+  const state = 'state' in component ? component.state : ({} as S);
   const el = element as TentNode<A>;
 
-  el.$tent = {
-    attributes: {},
-  };
+  el.$tent = { attributes: {} };
 
   const handler = {
     get(obj: S, key: string) {
@@ -45,21 +42,19 @@ function mount<S extends {} = {}, A extends Attrs = {}>(
   const proxy = new Proxy<S>({ ...state }, handler);
 
   node = view({ state: proxy, el });
-  node.$tent = {
-    attributes: {},
-  };
+  node.$tent = { attributes: {} };
 
   el.append(node);
 
   mounted?.({ state: proxy, el });
 }
 
 export {
-  mount,
   tags,
+  mount,
   createTag,
-  type Component,
-  type Children,
   type Context,
   type TentNode,
+  type Children,
+  type Component,
 };

src/types.ts

@@ -6,9 +6,9 @@ type ComponentContext<S, A extends Attrs> = {
 export type Attrs = {} | undefined;
 export type Component<S extends {} = {}, A extends Attrs = {}> = {
   view: (context: ComponentContext<S, A>) => TentNode<A>;
-  state?: S;
   mounted?: (context: ComponentContext<S, A>) => void;
-};
+} & State<S>;
+type State<S> = {} extends S ? {} : { state: S };
 
 export type TentNode<A extends Attrs = undefined> = Node &
   Element &

src/walker.ts

@@ -45,9 +45,7 @@ function walker<A extends Attrs>(oldNode: TentNode<A>, newNode: TentNode<A>) {
     addAttribute(oldNode, key, attrs[key]);
   }
 
-  if (oc.length === 0 && nc.length === 0) {
-    return;
-  }
+  if (oc.length === 0 && nc.length === 0) return;
 
   if (oc.length < nc.length) {
     for (let i = 0; i < nc.length; i++) {
@@ -69,9 +67,7 @@ function walker<A extends Attrs>(oldNode: TentNode<A>, newNode: TentNode<A>) {
     const oChild = oc[i];
     const nChild = nc[i];
 
-    if (nChild == null) {
-      continue;
-    }
+    if (nChild == null) continue;
 
     if (oChild.tagName !== nChild.tagName) {
       oChild.replaceWith(nChild);