ilha 0.9.4 → 0.10.0

package/dist/jsx-runtime.js

@@ -1,4 +1,4 @@
-import { __ilhaJsxSlot, html, raw } from "./index.js";
+import { __ilhaJsxEvent, __ilhaJsxSlot, html, raw } from "./index.js";
 
 //#region src/jsx-runtime.ts
 const RAW = Symbol.for("ilha.raw");
@@ -8,6 +8,47 @@ const ISLAND_CALL = Symbol.for("ilha.islandCall");
 const RENDER_PART = Symbol.for("ilha.renderPart");
 const SAFE_NAME_RE = /^[A-Za-z_:][A-Za-z0-9:._-]*$/;
 const SAFE_BIND_LOCAL_RE = /^[A-Za-z][A-Za-z0-9]*$/;
+const SAFE_EVENT_PROP_RE = /^on([a-z][a-z0-9-]*)(?::(abortable|once|capture|passive))?$/;
+const JSX_ATTRIBUTE_ALIASES = {
+	className: "class",
+	htmlFor: "for",
+	acceptCharset: "accept-charset",
+	httpEquiv: "http-equiv",
+	accentHeight: "accent-height",
+	alignmentBaseline: "alignment-baseline",
+	baselineShift: "baseline-shift",
+	clipPath: "clip-path",
+	clipRule: "clip-rule",
+	dominantBaseline: "dominant-baseline",
+	fillOpacity: "fill-opacity",
+	fillRule: "fill-rule",
+	floodColor: "flood-color",
+	floodOpacity: "flood-opacity",
+	fontFamily: "font-family",
+	fontSize: "font-size",
+	fontStyle: "font-style",
+	fontWeight: "font-weight",
+	markerEnd: "marker-end",
+	markerMid: "marker-mid",
+	markerStart: "marker-start",
+	stopColor: "stop-color",
+	stopOpacity: "stop-opacity",
+	strokeDasharray: "stroke-dasharray",
+	strokeDashoffset: "stroke-dashoffset",
+	strokeLinecap: "stroke-linecap",
+	strokeLinejoin: "stroke-linejoin",
+	strokeMiterlimit: "stroke-miterlimit",
+	strokeOpacity: "stroke-opacity",
+	strokeWidth: "stroke-width",
+	textAnchor: "text-anchor",
+	vectorEffect: "vector-effect",
+	xlinkHref: "xlink:href"
+};
+const STRING_BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
+	"contenteditable",
+	"draggable",
+	"spellcheck"
+]);
 const VOID_ELEMENTS = /* @__PURE__ */ new Set([
 	"area",
 	"base",
@@ -82,8 +123,8 @@ function serializeStyle(value) {
 		return `${prop}:${str}`;
 	}).filter(Boolean).join(";");
 }
-function pushJsxAttr(chunks, values, name, value) {
-	if (value == null || value === false || name === "children" || name === "key") return;
+function pushJsxAttr({ chunks, values, eventSpecs, name, value }) {
+	if (value == null || name === "children" || name === "key") return;
 	if (name === "__proto__" || name === "constructor" || name === "prototype") return;
 	if (name.startsWith("bind:")) {
 		const [prefix, localName, ...rest] = name.split(":");
@@ -95,14 +136,28 @@ function pushJsxAttr(chunks, values, name, value) {
 		return;
 	}
 	if (!SAFE_NAME_RE.test(name)) return;
-	let safeName = name;
-	if (safeName === "className") safeName = "class";
-	if (safeName === "htmlFor") safeName = "for";
-	if (safeName.startsWith("on")) return;
-	if (safeName === "srcdoc") return;
-	if (safeName === "class") value = normalizeClass(value);
-	if (safeName === "style" && value && typeof value === "object") value = serializeStyle(value);
-	if ((URL_ATTRS.has(safeName) || /:(href|src|action|formaction|cite|data|poster)$/.test(safeName)) && !isSafeUrl(typeof value === "string" ? value : String(value))) return;
+	const safeName = JSX_ATTRIBUTE_ALIASES[name] ?? name;
+	if (safeName.startsWith("on")) {
+		const eventMatch = SAFE_EVENT_PROP_RE.exec(safeName);
+		if (typeof value !== "function" || !eventMatch) return;
+		const eventName = eventMatch[1];
+		const modifier = eventMatch[2];
+		const index = __ilhaJsxEvent({
+			type: eventName,
+			handler: value,
+			modifier
+		});
+		if (index !== void 0) eventSpecs.push(`${eventName}:${index}`);
+		return;
+	}
+	const securityName = safeName.toLowerCase();
+	if (securityName === "srcdoc") return;
+	const stringBoolean = securityName.startsWith("aria-") || STRING_BOOLEAN_ATTRIBUTES.has(securityName);
+	if (typeof value === "boolean" && stringBoolean) value = String(value);
+	else if (value === false) return;
+	if (safeName === "class" && !isRawHtml(value)) value = normalizeClass(value);
+	if (safeName === "style" && value && typeof value === "object" && !isRawHtml(value)) value = serializeStyle(value);
+	if ((URL_ATTRS.has(securityName) || /:(href|src|action|formaction|cite|data|poster)$/.test(securityName)) && !isSafeUrl(typeof value === "string" ? value : String(value))) return;
 	if (value === true) {
 		chunks[chunks.length - 1] += ` ${safeName}`;
 		return;
@@ -123,11 +178,25 @@ function injectDataKey(out, key) {
 	const insertAt = m.index + m[0].length;
 	return raw(`${out.value.slice(0, insertAt)} data-key="${escapeAttrValue(key)}"${out.value.slice(insertAt)}`);
 }
-function renderJsxElement(type, props, children, slotKey) {
+function renderJsxElement({ type, props, children, slotKey }) {
 	const chunks = [`<${type}`];
 	const values = [];
-	if (props) for (const [name, value] of Object.entries(props)) pushJsxAttr(chunks, values, name, value);
-	if (slotKey !== void 0 && props?.["data-key"] == null) pushJsxAttr(chunks, values, "data-key", slotKey);
+	const eventSpecs = [];
+	if (props) for (const [name, value] of Object.entries(props)) pushJsxAttr({
+		chunks,
+		values,
+		eventSpecs,
+		name,
+		value
+	});
+	if (slotKey !== void 0 && props?.["data-key"] == null) pushJsxAttr({
+		chunks,
+		values,
+		eventSpecs,
+		name: "data-key",
+		value: slotKey
+	});
+	if (eventSpecs.length > 0) chunks[chunks.length - 1] += ` data-ilha-on="${eventSpecs.join(",")}"`;
 	chunks[chunks.length - 1] += ">";
 	if (!VOID_ELEMENTS.has(type)) {
 		for (const child of children) {
@@ -155,12 +224,21 @@ function jsx(type, props, maybeKey, ...restChildren) {
 			return html`${out}`;
 		}
 		if (isRawHtml(out)) return slotKey !== void 0 ? injectDataKey(out, slotKey) : out;
-		if (typeof out === "string" && isIsland(type)) return __ilhaJsxSlot(type, componentProps, slotKey);
+		if (typeof out === "string" && isIsland(type)) return __ilhaJsxSlot({
+			island: type,
+			props: componentProps,
+			key: slotKey
+		});
 		if (typeof out === "string") return html`${out}`;
 		if (typeof out === "object" && out !== null && Object.getPrototypeOf(out) === Object.prototype && out[RENDER_PART] === true && typeof out.toString === "function") return raw(String(out));
 		return html`${out}`;
 	}
-	return renderJsxElement(type, props, normalizedChildren, slotKey);
+	return renderJsxElement({
+		type,
+		props,
+		children: normalizedChildren,
+		slotKey
+	});
 }
 const jsxs = jsx;
 function Fragment(props, ...children) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "description": "A tiny, framework-free island architecture library",
   "keywords": [
     "framework-free",

package/dist/jsx-runtime-DysRyz9R.d.ts

@@ -1,37 +0,0 @@
-import { y as RawHtml } from "./index-Dx_q_SGo.js";
-
-//#region src/jsx-types.d.ts
-declare namespace JSX {
-  type Child = unknown;
-  type ElementType = string | ((props: any) => any);
-  interface Element extends RawHtml {}
-  interface ElementChildrenAttribute {
-    children: {};
-  }
-  interface IntrinsicAttributes {
-    key?: string | number;
-  }
-  type IntrinsicElementProps = {
-    children?: Child;
-    class?: string | unknown[] | Record<string, boolean>;
-    className?: string | unknown[] | Record<string, boolean>;
-    htmlFor?: string;
-    [name: string]: unknown;
-  };
-  interface IntrinsicElements {
-    [name: string]: IntrinsicElementProps;
-  }
-}
-//#endregion
-//#region src/jsx-runtime.d.ts
-type JsxChild = unknown;
-type JsxProps = Record<string, unknown> | null | undefined;
-type JsxType = string | ((props: Record<string, unknown>) => unknown);
-declare function jsx(type: JsxType, props: JsxProps, maybeKey?: JsxChild | string | number, ...restChildren: JsxChild[]): RawHtml;
-declare const jsxs: typeof jsx;
-declare function Fragment(props: {
-  children?: JsxChild;
-} | null, ...children: JsxChild[]): RawHtml;
-declare function jsxDEV(type: JsxType, props: JsxProps, maybeKey?: string | number, _source?: unknown, _self?: unknown): RawHtml;
-//#endregion
-export { JSX as a, jsxs as i, jsx as n, jsxDEV as r, Fragment as t };