poseui 0.0.3 → 0.0.4

package/dist/index.d.ts

@@ -46,6 +46,9 @@ type Child<TProps> = ChildValue | ((props: TProps) => ChildValue);
 type RenderReturn<TSchema extends StandardSchemaV1 | undefined> = TSchema extends StandardSchemaV1 ? ReturnType<TSchema["~standard"]["validate"]> extends Promise<any> ? Promise<string> : string : string;
 type CallArgs<TProps extends Record<string, unknown>, TSchema> = TSchema extends StandardSchemaV1 ? [TProps?] : [keyof TProps] extends [never] ? [TProps?] : [TProps];
 type ClassEntry<TProps> = string | ((props: TProps) => string);
+/** null means the attribute is omitted from the rendered output */
+type AttrValue = string | null;
+type AttrRecord<TProps> = Record<string, Dyn<TProps, AttrValue>>;
 interface PoseElement<TProps extends Record<string, unknown>, TSchema extends StandardSchemaV1 | undefined = undefined> {
   (...args: CallArgs<TProps, TSchema>): RenderReturn<TSchema>;
   readonly classes: ReadonlyArray<ClassEntry<TProps>>;
@@ -798,6 +801,24 @@ interface PoseElement<TProps extends Record<string, unknown>, TSchema extends St
    */
   when(pred: (props: TProps) => boolean, apply: (b: PoseElement<TProps, undefined>) => PoseElement<TProps, any>): PoseElement<TProps, TSchema>;
   when<K extends keyof TProps>(key: K, cases: Partial<Record<TProps[K] & PropertyKey, (b: PoseElement<TProps, undefined>) => PoseElement<TProps, any>>>): PoseElement<TProps, TSchema>;
+  /**
+   * Set a single HTML attribute. Value can be static or derived from props.
+   * Pass `null` to omit the attribute.
+   *
+   * @example
+   * pose.as('a').attr('href', ({ url }) => url).attr('target', '_blank')
+   */
+  attr(name: string, value: Dyn<TProps, AttrValue>): PoseElement<TProps, TSchema>;
+  /**
+   * Set multiple HTML attributes at once. Each value can be static or a
+   * `(props) => string | null` function. `null` omits the attribute.
+   *
+   * @example
+   * pose.as('input').attrs({ type: 'text', name: ({ field }) => field, required: ({ req }) => req ? '' : null })
+   * // or with a props function for multi-field logic:
+   * pose.as('a').attrs(({ url, external }) => ({ href: url, target: external ? '_blank' : null }))
+   */
+  attrs(record: AttrRecord<TProps> | ((props: TProps) => Record<string, AttrValue>)): PoseElement<TProps, TSchema>;
   /**
    * Append any raw Tailwind class — static or derived from props.
    * @example
@@ -825,4 +846,4 @@ interface Pose {
 declare const pose: Pose;
 declare const div: PoseElement<Record<never, never>, undefined>;
 //#endregion
-export { Child, ChildValue, Dyn, Pose, PoseElement, PoseValidationError, StandardSchemaV1, pose as default, div };
+export { AttrRecord, AttrValue, Child, ChildValue, Dyn, Pose, PoseElement, PoseValidationError, StandardSchemaV1, pose as default, div };

package/dist/index.js

@@ -29,6 +29,25 @@ function arbitrary(value) {
 function resolveClasses(classes, props) {
 	return classes.map((c) => typeof c === "function" ? c(props) : c).filter(Boolean).join(" ");
 }
+function renderAttrPair(name, value) {
+	if (value === null) return "";
+	return value === "" ? name : `${name}="${value}"`;
+}
+function resolveAttrs(attrs, props) {
+	const parts = [];
+	for (const entry of attrs) if (entry[0] === "single") {
+		const [, name, value] = entry;
+		const rendered = renderAttrPair(name, typeof value === "function" ? value(props) : value);
+		if (rendered) parts.push(rendered);
+	} else {
+		const [, fn] = entry;
+		for (const [name, value] of Object.entries(fn(props))) {
+			const rendered = renderAttrPair(name, value);
+			if (rendered) parts.push(rendered);
+		}
+	}
+	return parts.join(" ");
+}
 function renderChild(child, props) {
 	if (typeof child === "function") return renderChild(child(props), props);
 	if (Array.isArray(child)) return child.filter((c) => c != null).map((c) => renderChild(c, props)).join("");
@@ -40,15 +59,17 @@ function createBlankBuilder() {
 	return createBuilder({
 		tag: "div",
 		classes: [],
+		attrs: [],
 		children: [],
 		schema: void 0
 	});
 }
 function createBuilder(state) {
-	function derive(extraClasses = [], extraChildren = []) {
+	function derive(extraClasses = [], extraChildren = [], extraAttrs = []) {
 		return createBuilder({
 			...state,
 			classes: [...state.classes, ...extraClasses],
+			attrs: [...state.attrs, ...extraAttrs],
 			children: [...state.children, ...extraChildren]
 		});
 	}
@@ -64,9 +85,11 @@ function createBuilder(state) {
 	}
 	function buildHtml(resolvedProps) {
 		const classStr = resolveClasses(state.classes, resolvedProps);
+		const attrsStr = resolveAttrs(state.attrs, resolvedProps);
 		const childrenStr = state.children.map((c) => renderChild(c, resolvedProps)).join("");
 		const classAttr = classStr ? ` class="${classStr}"` : "";
-		return `<${state.tag}${classAttr}>${childrenStr}</${state.tag}>`;
+		const attrsAttr = attrsStr ? ` ${attrsStr}` : "";
+		return `<${state.tag}${classAttr}${attrsAttr}>${childrenStr}</${state.tag}>`;
 	}
 	function render(...args) {
 		const props = args[0] ?? {};
@@ -85,6 +108,7 @@ function createBuilder(state) {
 	el.input = (schema) => createBuilder({
 		tag: state.tag,
 		classes: state.classes,
+		attrs: state.attrs,
 		children: state.children,
 		schema
 	});
@@ -491,6 +515,19 @@ function createBuilder(state) {
 			});
 		}
 	};
+	el.attr = (name, value) => derive([], [], [[
+		"single",
+		name,
+		value
+	]]);
+	el.attrs = (recordOrFn) => {
+		if (typeof recordOrFn === "function") return derive([], [], [["record", recordOrFn]]);
+		return derive([], [], Object.entries(recordOrFn).map(([name, value]) => [
+			"single",
+			name,
+			value
+		]));
+	};
 	el.cls = (value) => typeof value === "function" ? derive([value]) : derive([value]);
 	el.render = async (props, opts) => {
 		const html = render(props);
@@ -504,6 +541,7 @@ function createBuilder(state) {
 	el.child = (value) => createBuilder({
 		...state,
 		classes: [...state.classes],
+		attrs: [...state.attrs],
 		children: [...state.children, value]
 	});
 	return el;
@@ -520,6 +558,7 @@ const pose = { as(tag) {
 	return createBuilder({
 		tag,
 		classes: [],
+		attrs: [],
 		children: [],
 		schema: void 0
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poseui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Type-safe HTML templating engine on steroids",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",