ilha 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -55,6 +55,14 @@ interface MarkedSignalAccessor<T> {
 }
 declare function ilhaRaw(value: string): RawHtml;
 declare function ilhaCss(strings: TemplateStringsArray | string, ...values: (string | number)[]): string;
+type JsxChild = unknown;
+type JsxProps = Record<string, unknown> | null | undefined;
+type JsxType = string | ((props: Record<string, unknown>) => unknown);
+declare function ilhaJsx(type: JsxType, props: JsxProps, ...children: JsxChild[]): RawHtml;
+declare function ilhaFragment(props: {
+  children?: JsxChild;
+} | null, ...children: JsxChild[]): RawHtml;
+declare function ilhaJsxDEV(type: JsxType, props: JsxProps): RawHtml;
 declare function ilhaHtml(strings: TemplateStringsArray, ...values: unknown[]): RawHtml;
 type ContextSignal<T> = {
   (): T;
@@ -269,6 +277,10 @@ declare function mountAll(registry: IslandRegistry, options?: MountOptions): Mou
 declare const ilha: IlhaBuilder<Record<string, unknown>, Record<never, never>, Record<never, never>> & {
   html: typeof ilhaHtml;
   raw: typeof ilhaRaw;
+  jsx: typeof ilhaJsx;
+  jsxs: typeof ilhaJsx;
+  jsxDEV: typeof ilhaJsxDEV;
+  Fragment: typeof ilhaFragment;
   mount: typeof mountAll;
   from: typeof ilhaFrom;
   context: typeof ilhaContext;
@@ -278,9 +290,13 @@ declare const ilha: IlhaBuilder<Record<string, unknown>, Record<never, never>, R
 };
 declare const html: typeof ilhaHtml;
 declare const raw: typeof ilhaRaw;
+declare const jsx: typeof ilhaJsx;
+declare const jsxs: typeof ilhaJsx;
+declare const jsxDEV: typeof ilhaJsxDEV;
+declare const Fragment: typeof ilhaFragment;
 declare const css: typeof ilhaCss;
 declare const mount: typeof mountAll;
 declare const from: typeof ilhaFrom;
 declare const context: typeof ilhaContext;
 //#endregion
-export { DerivedValue, ErrorContext, ErrorSource, ExternalSignal, HandlerContext, HandlerContextFor, HydratableOptions, ISLAND_MOUNT_INTERNAL, Island, IslandDerived, IslandState, KeyedIsland, MountOptions, MountResult, OnMountContext, RawHtml, SignalAccessor, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, mount, raw, untrack };
+export { DerivedValue, ErrorContext, ErrorSource, ExternalSignal, Fragment, HandlerContext, HandlerContextFor, HydratableOptions, ISLAND_MOUNT_INTERNAL, Island, IslandDerived, IslandState, KeyedIsland, MountOptions, MountResult, OnMountContext, RawHtml, SignalAccessor, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, jsx, jsxDEV, jsxs, mount, raw, untrack };

package/dist/index.js

@@ -191,8 +191,120 @@ function ilhaCss(strings, ...values) {
 	}
 	return result;
 }
+const SAFE_NAME_RE = /^[A-Za-z_:][A-Za-z0-9:._-]*$/;
+const SAFE_BIND_LOCAL_RE = /^[A-Za-z][A-Za-z0-9]*$/;
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+const SAFE_CSS_PROP_RE = /^(-{2}[a-zA-Z][a-zA-Z0-9-]*|-?[a-zA-Z][a-zA-Z0-9-]*)$/;
+const URL_ATTRS = new Set([
+	"href",
+	"src",
+	"action",
+	"formaction",
+	"cite",
+	"data",
+	"poster"
+]);
+const SAFE_URL_RE = /^(?!javascript:|data:text\/html|data:text\/xml|data:application\/xhtml\+xml|data:image\/svg|vbscript:)/i;
+function normalizeClass(value) {
+	if (Array.isArray(value)) return value.filter(Boolean).join(" ");
+	if (value && typeof value === "object") return Object.entries(value).filter(([, enabled]) => Boolean(enabled)).map(([name]) => name).join(" ");
+	return String(value);
+}
+function normalizeJsxChildren(props, children) {
+	const propChildren = props && "children" in props ? props.children : void 0;
+	return (children.length > 0 ? children : propChildren === void 0 ? [] : [propChildren]).flat(1);
+}
+function serializeStyle(value) {
+	return Object.entries(value).map(([k, v]) => {
+		if (!SAFE_CSS_PROP_RE.test(k)) return "";
+		const prop = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+		let safeV = String(v).replace(/["<>{};]/g, "");
+		if (/expression\(/i.test(safeV) || /^javascript:/i.test(safeV)) return "";
+		return `${prop}:${safeV}`;
+	}).filter(Boolean).join(";");
+}
+function pushJsxAttr(chunks, values, name, value) {
+	if (value == null || value === false || name === "children" || name === "key") return;
+	if (name === "__proto__" || name === "constructor" || name === "prototype") return;
+	if (name.startsWith("bind:")) {
+		const [prefix, localName, ...rest] = name.split(":");
+		if (prefix !== "bind" || rest.length > 0 || !localName || !SAFE_BIND_LOCAL_RE.test(localName)) return;
+		if (!isSignalAccessor(value)) return;
+		const safeName = `${prefix}:${localName}`;
+		chunks[chunks.length - 1] += ` ${safeName}=`;
+		values.push(value);
+		chunks.push("");
+		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 === "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)) && typeof value === "string" && !SAFE_URL_RE.test(value.trim())) return;
+	if (value === true) {
+		chunks[chunks.length - 1] += ` ${safeName}`;
+		return;
+	}
+	chunks[chunks.length - 1] += ` ${safeName}="`;
+	values.push(value);
+	chunks.push("\"");
+}
+function renderJsxElement(type, props, children) {
+	const chunks = [`<${type}`];
+	const values = [];
+	if (props) for (const [name, value] of Object.entries(props)) pushJsxAttr(chunks, values, name, value);
+	chunks[chunks.length - 1] += ">";
+	if (!VOID_ELEMENTS.has(type)) {
+		for (const child of children) {
+			values.push(child);
+			chunks.push("");
+		}
+		chunks[chunks.length - 1] += `</${type}>`;
+	} else if (children.length > 0 && __DEV__) warn(`Void element <${type}> should not have children. They will be ignored.`);
+	return ilhaHtml(chunks, ...values);
+}
+function ilhaJsx(type, props, ...children) {
+	const normalizedChildren = normalizeJsxChildren(props, children);
+	if (typeof type === "function") {
+		const componentProps = {
+			...props ?? {},
+			...normalizedChildren.length > 0 ? { children: normalizedChildren } : {}
+		};
+		delete componentProps["key"];
+		const out = type(Object.keys(componentProps).length ? componentProps : {});
+		if (typeof out === "string") return ilhaHtml`${out}`;
+		if (out && typeof out === "object" && RAW in out) return out;
+		return ilhaHtml`${out}`;
+	}
+	return renderJsxElement(type, props, normalizedChildren);
+}
+function ilhaFragment(props, ...children) {
+	const normalizedChildren = normalizeJsxChildren(props, children);
+	return ilhaHtml(["", ...normalizedChildren.map(() => "")], ...normalizedChildren);
+}
+function ilhaJsxDEV(type, props) {
+	return ilhaJsx(type, props);
+}
 function interpolateValue(v) {
-	if (v == null) return "";
+	if (v == null || v === true || v === false) return "";
 	if (Array.isArray(v)) return v.map(interpolateValue).join("");
 	if (typeof v === "object" && RAW in v) return v.value;
 	if (isIslandCall(v)) {
@@ -216,7 +328,11 @@ const BIND_VALID_KINDS = new Set([
 ]);
 const BIND_PREFIX_RE = /\bbind:([a-zA-Z]+)\s*=\s*("|')?$/;
 function formatDateForInput(d) {
-	if (d instanceof Date && !isNaN(d.getTime())) {
+	if (d instanceof Date) {
+		if (isNaN(d.getTime())) {
+			if (__DEV__) warn("bind:valueAsDate received an invalid Date object — value attribute will be empty.");
+			return "";
+		}
 		const pad = (n) => String(n).padStart(2, "0");
 		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 	}
@@ -1469,6 +1585,10 @@ const rootBuilder = new IlhaBuilder({
 const ilha = Object.assign(rootBuilder, {
 	html: ilhaHtml,
 	raw: ilhaRaw,
+	jsx: ilhaJsx,
+	jsxs: ilhaJsx,
+	jsxDEV: ilhaJsxDEV,
+	Fragment: ilhaFragment,
 	mount: mountAll,
 	from: ilhaFrom,
 	context: ilhaContext,
@@ -1478,9 +1598,13 @@ const ilha = Object.assign(rootBuilder, {
 });
 const html = ilhaHtml;
 const raw = ilhaRaw;
+const jsx = ilhaJsx;
+const jsxs = ilhaJsx;
+const jsxDEV = ilhaJsxDEV;
+const Fragment = ilhaFragment;
 const css = ilhaCss;
 const mount = mountAll;
 const from = ilhaFrom;
 const context = ilhaContext;
 //#endregion
-export { ISLAND_MOUNT_INTERNAL, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, mount, raw, untrack };
+export { Fragment, ISLAND_MOUNT_INTERNAL, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, jsx, jsxDEV, jsxs, mount, raw, untrack };

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

@@ -0,0 +1,3 @@
+import { Fragment, jsxDEV } from "./index.js";
+import { t as JSX } from "./jsx-types-DSrM2NdI.js";
+export { Fragment, type JSX, jsxDEV };

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsxDEV } from "./index.js";
+export { Fragment, jsxDEV };

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,3 @@
+import { Fragment, jsx, jsxs } from "./index.js";
+import { t as JSX } from "./jsx-types-DSrM2NdI.js";
+export { Fragment, type JSX, jsx, jsxs };

package/dist/jsx-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsx, jsxs } from "./index.js";
+export { Fragment, jsx, jsxs };

package/dist/jsx-types-DSrM2NdI.d.ts

@@ -0,0 +1,26 @@
+import { RawHtml } from "./index.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
+export { JSX as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A tiny, framework-free island architecture library",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",
@@ -19,6 +19,14 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "import": "./dist/jsx-dev-runtime.js"
     }
   },
   "scripts": {