feat(mount): pass attributes directly to component

.github/workflows/ci.yml

@@ -8,6 +8,7 @@ on:
   pull_request:
     branches:
       - main
+      - next
 
 jobs:
   build:

CHANGELOG.md

@@ -5,6 +5,24 @@ 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]
+
+### Added
+
+- Add ability to pass attributes to a component on mount
+
+## [0.0.33-1] - 2024-06-02
+
+### 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
+
+- Add `mounted` to `tags` to run code after the tag has been mounted
+
 ## [0.0.32] - 2024-05-20
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tentjs/tent",
-  "version": "0.0.32",
+  "version": "0.0.33-1",
   "description": "A jsx-free, super-lightweight and zero-dependency library to add interactivity to the web - without all the nonsense.",
   "source": "src/main.ts",
   "main": "dist/main.js",

src/__tests__/attributes.test.ts

@@ -1,4 +1,5 @@
-import { addAttribute } from '../attributes';
+import { addAttribute, addAttributes } from '../attributes';
+import { tags } from '../tags';
 
 describe('attributes.ts', () => {
   test('adds a simple attribute', () => {
@@ -34,4 +35,24 @@ describe('attributes.ts', () => {
 
     expect(el.value).toBe('test');
   });
+
+  test("doesn't add `mounted` as an attribute", () => {
+    const el = document.createElement('div');
+
+    addAttribute(el, 'mounted', 'test');
+
+    expect(el.hasAttribute('mounted')).toBe(false);
+  });
+
+  test('addAttributes adds all attributes', () => {
+    const el = tags.div([]);
+
+    addAttributes(el, {
+      id: 'test',
+      foo: 'bar',
+    });
+
+    expect(el.getAttribute('id')).toBe('test');
+    expect(el.getAttribute('foo')).toBe('bar');
+  });
 });

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/__tests__/main.test.ts

@@ -1,4 +1,9 @@
-import { Component, mount, tags } from '../main';
+import { fireEvent, getByRole, getByTestId } from '@testing-library/dom';
+import { mount, tags, type Component } from '../main';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
 
 describe('main', () => {
   test('`null` element', () => {
@@ -34,4 +39,65 @@ describe('main', () => {
       }),
     ).not.toThrow();
   });
+
+  test('that attributes are set when using `mount` with attrs set', () => {
+    const target = document.createElement('div');
+    target.setAttribute('data-testid', 'test');
+    document.body.append(target);
+
+    const TestComponent: Component = {
+      view: () => tags.div('Hey, this is me!'),
+    };
+
+    mount(target, TestComponent, {
+      id: 'foo',
+      foo: 'bar',
+    });
+
+    const el = getByTestId(document.body, 'test');
+
+    expect(el.getAttribute('id')).toBe('foo');
+    expect(el.getAttribute('foo')).toBe('bar');
+  });
+
+  test('that attributes are set when using `mount` and dynamic mounting', () => {
+    const target = document.createElement('div');
+    target.setAttribute('data-testid', 'test');
+    document.body.append(target);
+
+    const modalTarget = document.createElement('div');
+    modalTarget.setAttribute('data-testid', 'modal');
+    document.body.append(modalTarget);
+
+    const Parent: Component = {
+      view: () =>
+        tags.button('Click me', {
+          onclick() {
+            mount(modalTarget, Modal, { modalId: 'foo' });
+          },
+        }),
+    };
+
+    const Modal: Component = {
+      view: () => tags.p('I am a modal'),
+    };
+
+    mount(target, Parent, {
+      id: 'foo',
+      foo: 'bar',
+    });
+
+    const el = getByTestId(document.body, 'test');
+
+    expect(el.getAttribute('id')).toBe('foo');
+    expect(el.getAttribute('foo')).toBe('bar');
+
+    const btn = getByRole(document.body, 'button');
+
+    fireEvent.click(btn);
+
+    const modal = getByTestId(document.body, 'modal');
+
+    expect(modal.getAttribute('modalId')).toBe('foo');
+  });
 });

src/__tests__/tags.test.ts

@@ -68,4 +68,12 @@ describe('tags.ts', () => {
     expect(el.$tent.attributes['data-bar']).toBe('baz');
     expect(el.$tent.attributes['onclick']).toBe(fn);
   });
+
+  test('mounted', () => {
+    const fn = jest.fn();
+    const el = createTag(['div', 'test', { mounted: fn }]);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith({ el });
+  });
 });

src/attributes.ts

@@ -1,10 +1,24 @@
-import { type TentNode, type Attrs } from './types';
+import { type TentNode, type Attrs, type TagAttrsValues } from './types';
+
+function addAttributes<A extends Attrs>(el: TentNode<A>, attributes: A) {
+  for (const key in attributes) {
+    const value = attributes[key as string];
+
+    addAttribute(el, key, value);
+  }
+}
 
 function addAttribute<A extends Attrs>(
   el: TentNode<A> | HTMLElement,
   key: string,
-  value: string | boolean | number,
+  value: TagAttrsValues,
 ) {
+  if (key === 'mounted') return;
+
+  if ('$tent' in el) {
+    el.$tent.attributes[key] = value;
+  }
+
   if (typeof value === 'boolean') {
     if (value) {
       el.setAttribute(key, '');
@@ -24,29 +38,4 @@ function addAttribute<A extends Attrs>(
   }
 }
 
-/**
- * @deprecated
- * Use `el.dataset` instead, will be removed in the next major version.
- */
-function getAttribute<A>(el: HTMLElement | Element) {
-  return <K extends keyof A>(name: K): A[K] | undefined => {
-    const attr = el.attributes.getNamedItem(name as string);
-
-    if (!attr) {
-      return;
-    }
-
-    const value = attr.value;
-
-    if (value === '') {
-      // TODO: This might not be the desired behavior.
-      // I should find a better way to handle this,
-      // what I want to avoid is returning `T | undefined | 'true'`
-      return 'true' as A[K];
-    }
-
-    return value as A[K];
-  };
-}
-
-export { addAttribute, getAttribute };
+export { addAttributes, addAttribute };

src/main.ts

@@ -1,29 +1,22 @@
-import { getAttribute } from './attributes';
-import {
-  type Children,
-  type Context,
-  type Component,
-  type TentNode,
-  type Attrs,
-} from './types';
+import type { Children, Context, Component, TentNode, Attrs } from './types';
 import { createTag, tags } from './tags';
 import { walker } from './walker';
+import { addAttributes } from './attributes';
 
 function mount<S extends {} = {}, A extends Attrs = {}>(
   element: HTMLElement | Element | TentNode<A> | null,
   component: Component<S, A>,
+  attributes?: 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: {} };
+  addAttributes(el, attributes);
 
   const handler = {
     get(obj: S, key: string) {
@@ -43,30 +36,28 @@ function mount<S extends {} = {}, A extends Attrs = {}>(
 
       const s = Reflect.set(obj, prop, value);
 
-      walker(node, view({ state: proxy, el, attr: getAttribute<A>(el) }));
+      walker(node, view({ state: proxy, el }));
 
       return s;
     },
   };
 
   const proxy = new Proxy<S>({ ...state }, handler);
 
-  node = view({ state: proxy, el, attr: getAttribute<A>(el) });
-  node.$tent = {
-    attributes: {},
-  };
+  node = view({ state: proxy, el });
+  node.$tent = { attributes: {} };
 
   el.append(node);
 
-  mounted?.({ state: proxy, el, attr: getAttribute<A>(el) });
+  mounted?.({ state: proxy, el });
 }
 
 export {
-  mount,
   tags,
+  mount,
   createTag,
-  type Component,
-  type Children,
   type Context,
   type TentNode,
+  type Children,
+  type Component,
 };