@tir.jp/hob 1.0.0

package/LICENSE

@@ -0,0 +1,19 @@
+zlib License
+
+(C) 2026 ayamada
+
+This software is provided 'as-is', without any express or implied
+warranty.  In no event will the authors be held liable for any damages
+arising from the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not
+   claim that you wrote the original software. If you use this software
+   in a product, an acknowledgment in the product documentation would be
+   appreciated but is not required.
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+3. This notice may not be removed or altered from any source distribution.

package/README.md

@@ -0,0 +1,71 @@
+# @tir.jp/hob (HTML Object Builder)
+
+A minimal, property-centric DOM builder inspired by Clojure's Hiccup.
+
+## Features
+
+- **Lightweight:** Tiny footprint (less than 1KB).
+- **Property-centric:** Directly sets DOM properties (like `onclick`, `style.width`) instead of attributes.
+- **Hiccup-like syntax:** Uses standard JavaScript arrays to define DOM structures.
+- **Smart Attributes:** Automatically maps `class` to `className`, supports `style` strings, and correctly handles `data-*` and `aria-*` attributes.
+- **Functional Components:** Supports React-like functional components for easy UI reuse.
+
+## Installation
+
+```bash
+npm install @tir.jp/hob
+```
+
+## Usage
+
+### Basic Usage
+```javascript
+import * as Hob from '@tir.jp/hob';
+
+const myUI = Hob.build([
+  "DIV", { class: "container", style: "padding: 10px;" },
+  ["H1", "Hello World"],
+  ["BUTTON", { onclick: () => alert('Clicked!') }, "Click me"]
+]);
+
+document.body.appendChild(myUI);
+```
+
+### Functional Components
+You can pass a function instead of a tag name to create reusable components.
+
+```javascript
+import * as Hob from '@tir.jp/hob';
+
+// Define a component
+const Card = (attrs, title, content) => [
+  "DIV", { class: "card", ...attrs },
+  ["H2", title],
+  ["P", content]
+];
+
+// Use the component
+const app = Hob.build([
+  "DIV",
+  [Card, { id: "card-1" }, "Title 1", "This is the first card."],
+  [Card, { style: { color: "blue" } }, "Title 2", "This is the second card."]
+]);
+
+document.body.appendChild(app);
+```
+
+## API
+
+### `build(treeArray)`
+Takes a Hiccup-style array and returns an `HTMLElement`.
+
+- `treeArray[0]`: Tag name (e.g., `"DIV"`) or a Function.
+- `treeArray[1]` (optional): Attribute/Property object.
+- `...treeArray[2:]`: Children (strings, numbers, arrays, or existing `HTMLElement`s).
+
+### `setAttr(htmlObj, attrObj)`
+Recursively assigns properties from `attrObj` to `htmlObj`.
+
+## License
+
+Zlib

package/index.d.ts

@@ -0,0 +1,16 @@
+// Tag can be a string (HTML tag) or a functional component
+export type HiccupTag = string | ((attrs: Record<string, any>, ...children: any[]) => HiccupTree);
+
+export type HiccupTree = 
+  | [HiccupTag, Record<string, any>?, ...(HiccupTree | HTMLElement | string | number | null | undefined)[]]
+  | string | number | HTMLElement | null | undefined;
+
+/**
+ * Recursively sets attributes/properties on an HTMLElement.
+ */
+export function setAttr(htmlObj: any, attrObj: Record<string, any>): void;
+
+/**
+ * Builds an HTMLElement tree from a nested array (Hiccup format).
+ */
+export function build(treeArray: HiccupTree): HTMLElement;

package/index.mjs

@@ -0,0 +1,71 @@
+// html-object-builder (HOB)
+// A minimal, property-centric DOM builder inspired by Clojure's Hiccup.
+
+/**
+ * Recursively sets attributes/properties on an HTMLElement.
+ * Unlike standard setAttribute, this assigns directly to the object properties,
+ * with some quality-of-life mappings for common DOM quirks.
+ * 
+ * @param {HTMLElement} htmlObj The target DOM element.
+ * @param {Object} attrObj The object containing attributes/properties to set.
+ */
+export const setAttr = (htmlObj, attrObj) => {
+  Object.entries(attrObj).forEach(([k, v]) => {
+    // QoL: Map 'class' to 'className' for direct property access
+    if (k === 'class') k = 'className';
+
+    if (k === 'style' && typeof v === 'string') {
+      // QoL: Support string assignment to style (e.g., style: "color: red;")
+      htmlObj.style.cssText = v;
+    } else if (k.includes('-')) {
+      // QoL: Support data-* and aria-* attributes which must use setAttribute
+      htmlObj.setAttribute(k, v);
+    } else if (v?.constructor === Object) {
+      setAttr(htmlObj[k], v);
+    } else {
+      htmlObj[k] = v;
+    }
+  });
+};
+
+/**
+ * Builds an HTMLElement tree from a nested array (Hiccup format).
+ * Supports functional components for UI composition.
+ * 
+ * @param {Array} treeArray [tag|Function, attrs?, ...children]
+ * @returns {HTMLElement}
+ */
+export const build = (treeArray) => {
+  if (!Array.isArray(treeArray)) {
+    throw new Error('HOB: build(treeArray) requires an array.');
+  }
+
+  const tag = treeArray[0];
+
+  // Functional Component Support
+  if (typeof tag === 'function') {
+    const hasAttrs = treeArray[1]?.constructor === Object;
+    const attrs = hasAttrs ? treeArray[1] : {};
+    const children = treeArray.slice(hasAttrs ? 2 : 1);
+    // Recursively build the result of the functional component
+    return build(tag(attrs, ...children));
+  }
+
+  const htmlObj = document.createElement(tag);
+
+  for (let i = 1; i < treeArray.length; i++) {
+    const one = treeArray[i];
+    if (one == null) {
+      continue; // Skip null/undefined
+    } else if (one?.constructor === Object) {
+      setAttr(htmlObj, one);
+    } else if (Array.isArray(one)) {
+      htmlObj.appendChild(build(one));
+    } else if (one instanceof HTMLElement) {
+      htmlObj.appendChild(one);
+    } else {
+      htmlObj.appendChild(document.createTextNode((one ?? '').toString()));
+    }
+  }
+  return htmlObj;
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tir.jp/hob",
+  "version": "1.0.0",
+  "description": "A minimal, property-centric DOM builder inspired by Clojure's Hiccup.",
+  "type": "module",
+  "main": "index.mjs",
+  "module": "index.mjs",
+  "types": "index.d.ts",
+  "exports": {
+    ".": "./index.mjs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ayamada/hob.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ayamada/hob/issues"
+  },
+  "homepage": "https://github.com/ayamada/hob#readme",
+  "keywords": [
+    "hiccup",
+    "dom",
+    "minimal",
+    "property-centric"
+  ],
+  "author": "ayamada",
+  "contributors": [
+    "mac"
+  ],
+  "license": "Zlib",
+  "publishConfig": {
+    "access": "public"
+  }
+}