reactolith 1.0.19

package/dist/index.mjs

@@ -0,0 +1,599 @@
+import { createRoot } from 'react-dom/client';
+import React, { createContext, useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const RouterContext = createContext(undefined);
+function RouterProvider({ children }) {
+    const { router } = useApp();
+    const [loading, setLoading] = useState(false);
+    const [lastError, setLastError] = useState(null);
+    const errorId = useRef(0);
+    useEffect(() => {
+        const start = () => setLoading(true);
+        const end = () => setLoading(false);
+        // The router emits: "render:failed", input, init, pushState, response, html, finalUrl
+        const onRenderFailed = (input, init, pushState, response, html, finalUrl) => {
+            errorId.current += 1;
+            setLastError({
+                id: errorId.current,
+                timestamp: Date.now(),
+                input,
+                init,
+                pushState,
+                response,
+                html,
+                finalUrl,
+            });
+        };
+        router.on("nav:started", start);
+        router.on("nav:ended", end);
+        router.on("render:failed", onRenderFailed);
+        return () => {
+            router.off("nav:started", start);
+            router.off("nav:ended", end);
+            router.off("render:failed", onRenderFailed);
+        };
+    }, [router]);
+    const clearError = () => setLastError(null);
+    return (jsx(RouterContext.Provider, { value: { router, loading, lastError, clearError }, children: children }));
+}
+function useRouter() {
+    const ctx = useContext(RouterContext);
+    if (!ctx) {
+        throw new Error("useRouter must be used inside <RouterProvider>");
+    }
+    return ctx;
+}
+
+const AppContext = createContext(undefined);
+function useApp() {
+    const ctx = useContext(AppContext);
+    if (!ctx) {
+        throw new Error("useApp must be used inside <AppProvider>");
+    }
+    return ctx;
+}
+const AppProvider = ({ app, children, }) => {
+    useEffect(() => {
+        app.element.classList.remove("hidden");
+    }, []);
+    return (jsx(AppContext.Provider, { value: app, children: jsx(RouterProvider, { children: children }) }));
+};
+
+const isRelativeHref = (href) => {
+    if (!href)
+        return false;
+    if (href.startsWith("#"))
+        return false;
+    if (href.startsWith("//"))
+        return false;
+    return !/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(href);
+};
+const hasNavBypassModifiers = (e) => e.defaultPrevented ||
+    e.button !== 0 ||
+    e.metaKey ||
+    e.ctrlKey ||
+    e.shiftKey ||
+    e.altKey;
+class Router {
+    constructor(app, doc = document, fetchImpl = fetch) {
+        this.listeners = {};
+        this.app = app;
+        this.fetch = (input, init) => fetchImpl(input, init);
+        if (doc.defaultView) {
+            doc.defaultView.addEventListener("popstate", async () => {
+                await this.visit(location.pathname + location.search, { method: "GET" }, false);
+            });
+        }
+        doc.addEventListener("click", (e) => this.onClick(e));
+        doc.addEventListener("submit", (e) => this.onSubmit(e));
+    }
+    ensureSet(type) {
+        const existing = this.listeners[type];
+        if (existing)
+            return existing;
+        const created = new Set();
+        // Upcast to the union that the field allows; no `any`.
+        this.listeners[type] = created;
+        return created;
+    }
+    emit(type, ...args) {
+        this.listeners[type]?.forEach((h) => h(...args));
+    }
+    on(type, handler) {
+        const set = this.ensureSet(type);
+        set.add(handler);
+        return () => this.off(type, handler);
+    }
+    off(type, handler) {
+        this.listeners[type]?.delete(handler);
+    }
+    async visit(input, init = { method: "GET" }, pushState = true) {
+        this.emit("nav:started", input, init, pushState);
+        const response = await this.fetch(input, init);
+        const html = await response.text();
+        const original = typeof input === "string" ? input : input.toString();
+        const finalUrl = response.redirected ? response.url : original;
+        const result = this.app.render(html);
+        if (result && pushState) {
+            history.pushState({}, "", finalUrl);
+        }
+        const event = result ? "render:success" : "render:failed";
+        this.emit(event, input, init, pushState, response, html, finalUrl);
+        this.emit("nav:ended", input, init, pushState, response, html, finalUrl);
+        return { result, response, html, finalUrl };
+    }
+    async onClick(event) {
+        // Ignore modified clicks, right/middle clicks, already-handled events
+        if (hasNavBypassModifiers(event))
+            return;
+        const link = event.target?.closest("a");
+        if (!link)
+            return;
+        const hrefAttr = link.getAttribute("href");
+        if (!isRelativeHref(hrefAttr))
+            return;
+        // Respect targets like _blank or any non-_self
+        if (link.target && link.target.toLowerCase() !== "_self")
+            return;
+        // Respect downloads and explicit external hints
+        if (link.hasAttribute("download"))
+            return;
+        const rel = link.getAttribute("rel") || "";
+        if (/\bexternal\b/i.test(rel))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        await this.visit(hrefAttr);
+    }
+    async onSubmit(event) {
+        const form = event.target;
+        if (!form)
+            return;
+        const actionAttr = form.getAttribute("action");
+        const isRelativeAction = actionAttr === null || isRelativeHref(actionAttr);
+        if (form.target && form.target.toLowerCase() !== "_self")
+            return;
+        if (!isRelativeAction)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const formData = new FormData(form);
+        if (event.submitter instanceof HTMLButtonElement && event.submitter.name) {
+            formData.append(event.submitter.name, event.submitter.value || "");
+        }
+        const method = (form.method || "GET").toUpperCase();
+        let body = null;
+        let url = actionAttr ?? "";
+        if (method === "GET") {
+            const params = new URLSearchParams();
+            formData.forEach((value, key) => {
+                if (typeof value === "string")
+                    params.append(key, value);
+            });
+            const q = params.toString();
+            const sep = url.includes("?") ? (q ? "&" : "") : q ? "?" : "";
+            url = `${url}${sep}${q}`;
+        }
+        else {
+            body = formData;
+        }
+        await this.visit(url || location.pathname + location.search, {
+            method,
+            body,
+        });
+    }
+    async navigate(path) {
+        await this.visit(path);
+    }
+}
+
+const toPascalCase = (str) => {
+    return str.replace(/(^\w|-\w)/g, (match) => match.replace(/-/, "").toUpperCase());
+};
+const normalizePropName = (name) => {
+    if (name.startsWith("json-")) {
+        name = name.substring(5);
+    }
+    name = toPascalCase(name);
+    return name.substring(0, 1).toLowerCase() + name.substring(1);
+};
+function getKey(element) {
+    return element.attributes.getNamedItem("key")?.value;
+}
+function getProps(element, component, isReactComponent = true) {
+    const props = {};
+    Array.from(element.attributes).forEach((attr) => {
+        if (attr.name !== "key" && !attr.name.startsWith("#")) {
+            let value = attr.value;
+            if (typeof value === "string" &&
+                attr.value.startsWith("{") &&
+                attr.value.endsWith("}")) {
+                value = React.createElement(component, {
+                    is: value.substring(1, value.length - 1),
+                });
+            }
+            if (attr.name.startsWith("json-")) {
+                props[normalizePropName(attr.name)] = JSON.parse(attr.value);
+            }
+            else if (!isReactComponent && attr.name.startsWith("data-")) {
+                props[attr.name] = attr.value;
+            }
+            else {
+                // Special case: Empty value will be transformed to bool true value
+                if (typeof value === "string" && value.length === 0) {
+                    value = true;
+                }
+                props[attr.name === "class" ? "className" : normalizePropName(attr.name)] = value;
+            }
+        }
+    });
+    return props;
+}
+function getSlots(element, component) {
+    const slots = {};
+    Array.from(element.childNodes).forEach((child) => {
+        if (child instanceof HTMLElement) {
+            Array.from(child.attributes).forEach((attr) => {
+                if (attr.name === "slot") {
+                    slots[attr.value] = getChildren(child instanceof HTMLTemplateElement ? child.content : child, component);
+                }
+            });
+        }
+    });
+    return slots;
+}
+function getChildren(element, component) {
+    return Array.from(element.childNodes)
+        .map((child, index) => {
+        if (child instanceof HTMLElement && child.hasAttribute("slot")) {
+            return null;
+        }
+        if (child instanceof Text) {
+            return child.textContent;
+        }
+        else if (child instanceof Element) {
+            const key = child.hasAttribute("key")
+                ? child.getAttribute("key")
+                : index;
+            return (jsx(ReactolithComponent, { element: child, component: component }, key));
+        }
+        return null;
+    })
+        .filter(Boolean);
+}
+const ReactolithComponent = React.forwardRef(({ element, component: Component, ...props }, forwardedRef) => {
+    if (!element)
+        return null;
+    const tagName = element.tagName.toLowerCase();
+    const children = getChildren(element, Component);
+    const isReactComponent = tagName.includes("-") ||
+        document.createElement(tagName).constructor === HTMLUnknownElement;
+    const type = isReactComponent
+        ? Component
+        : tagName;
+    const allProps = {
+        ...getProps(element, Component, isReactComponent),
+        ...getSlots(element, Component),
+        key: getKey(element),
+        ...(isReactComponent ? { is: tagName } : {}),
+        ...props,
+        ref: forwardedRef,
+    };
+    return React.createElement(type, allProps, ...children);
+});
+ReactolithComponent.displayName = "ReactolithComponent";
+
+class App {
+    constructor(component, appProvider = AppProvider, selector = "#reactolith-app", root, doc = document, fetchImp = fetch) {
+        this.router = new Router(this, doc, fetchImp);
+        this.component = component;
+        this.appProvider = appProvider;
+        this.doc = doc;
+        if (typeof selector === "string") {
+            const selStr = selector;
+            selector = (doc) => doc.querySelector(selStr);
+        }
+        this.selector = selector;
+        const element = this.selector(doc);
+        if (!element) {
+            throw new Error("Could not find root element in document. Please check your selector!");
+        }
+        this.element = element;
+        this.root = root || createRoot(this.element);
+        // Auto-configure Mercure from data-mercure-hub-url attribute
+        const mercureHubUrl = this.element.getAttribute("data-mercure-hub-url");
+        if (mercureHubUrl) {
+            this.mercureConfig = {
+                hubUrl: mercureHubUrl,
+                withCredentials: this.element.hasAttribute("data-mercure-with-credentials"),
+            };
+        }
+        this.renderElement(this.element);
+    }
+    render(document) {
+        if (typeof document === "string") {
+            const parser = new DOMParser();
+            document = parser.parseFromString(document, "text/html");
+        }
+        // Try to find the root element in the document
+        const element = this.selector(document);
+        if (!element) {
+            return false;
+        }
+        this.renderElement(element);
+        return true;
+    }
+    renderElement(element) {
+        this.root.render(React.createElement(this.appProvider, {
+            app: this,
+        }, Array.from(element.children)
+            .filter((child) => child instanceof HTMLElement)
+            .map((element, key) => React.createElement(ReactolithComponent, {
+            key,
+            element,
+            component: this.component,
+        }))));
+    }
+    unmount() {
+        this.root.unmount();
+    }
+}
+
+class Mercure {
+    constructor(app) {
+        this.eventSource = null;
+        this.listeners = {};
+        this.currentUrl = null;
+        this.options = null;
+        this.routerUnsubscribe = null;
+        this.app = app;
+    }
+    ensureSet(type) {
+        const existing = this.listeners[type];
+        if (existing)
+            return existing;
+        const created = new Set();
+        this.listeners[type] = created;
+        return created;
+    }
+    emit(type, ...args) {
+        this.listeners[type]?.forEach((h) => h(...args));
+    }
+    on(type, handler) {
+        const set = this.ensureSet(type);
+        set.add(handler);
+        return () => this.off(type, handler);
+    }
+    off(type, handler) {
+        this.listeners[type]?.delete(handler);
+    }
+    /**
+     * Subscribe to a Mercure hub for real-time updates.
+     * Automatically subscribes to the current pathname and re-subscribes on route changes.
+     */
+    subscribe(options) {
+        // Store options for re-subscription
+        this.options = options;
+        // Unsubscribe from previous router listener
+        if (this.routerUnsubscribe) {
+            this.routerUnsubscribe();
+        }
+        // Listen to router navigation to re-subscribe with new pathname
+        this.routerUnsubscribe = this.app.router.on("render:success", () => {
+            this.connectToCurrentPath();
+        });
+        // Connect to current path
+        this.connectToCurrentPath();
+    }
+    /**
+     * Connect to EventSource with current pathname as topic
+     */
+    connectToCurrentPath() {
+        if (!this.options)
+            return;
+        // Close existing connection if any
+        if (this.eventSource) {
+            this.eventSource.close();
+            if (this.currentUrl) {
+                this.emit("sse:disconnected", this.currentUrl);
+            }
+            this.eventSource = null;
+        }
+        const { hubUrl, lastEventId, withCredentials = false } = this.options;
+        // Build the subscription URL with current pathname as topic
+        const url = new URL(hubUrl);
+        const topic = window.location.pathname;
+        url.searchParams.append("topic", topic);
+        if (lastEventId) {
+            url.searchParams.set("lastEventID", lastEventId);
+        }
+        this.currentUrl = url.toString();
+        // Create EventSource connection
+        this.eventSource = new EventSource(this.currentUrl, {
+            withCredentials,
+        });
+        this.eventSource.onopen = () => {
+            this.emit("sse:connected", this.currentUrl);
+        };
+        this.eventSource.onmessage = async (event) => {
+            const html = event.data;
+            this.emit("sse:message", event, html);
+            // If message is empty or only whitespace, refetch the current route
+            if (!html || html.trim() === "") {
+                this.emit("refetch:started", event);
+                try {
+                    const response = await this.app.router.visit(window.location.pathname + window.location.search, { method: "GET" }, false);
+                    if (response.result) {
+                        this.emit("refetch:success", event, response.html);
+                    }
+                    else {
+                        this.emit("refetch:failed", event, new Error("Failed to render refetched content"));
+                    }
+                }
+                catch (error) {
+                    this.emit("refetch:failed", event, error);
+                }
+                return;
+            }
+            // Process the HTML through the app's render method
+            const result = this.app.render(html);
+            if (result) {
+                this.emit("render:success", event, html);
+            }
+            else {
+                this.emit("render:failed", event, html);
+            }
+        };
+        this.eventSource.onerror = (error) => {
+            this.emit("sse:error", error);
+            // If the connection is closed, emit disconnected
+            if (this.eventSource?.readyState === EventSource.CLOSED) {
+                this.emit("sse:disconnected", this.currentUrl);
+            }
+        };
+    }
+    /**
+     * Close the SSE connection
+     */
+    close() {
+        // Unsubscribe from router events
+        if (this.routerUnsubscribe) {
+            this.routerUnsubscribe();
+            this.routerUnsubscribe = null;
+        }
+        if (this.eventSource) {
+            this.eventSource.close();
+            if (this.currentUrl) {
+                this.emit("sse:disconnected", this.currentUrl);
+            }
+            this.eventSource = null;
+            this.currentUrl = null;
+        }
+        this.options = null;
+    }
+    /**
+     * Check if currently connected
+     */
+    get connected() {
+        return this.eventSource?.readyState === EventSource.OPEN;
+    }
+    /**
+     * Get the current connection URL
+     */
+    get url() {
+        return this.currentUrl;
+    }
+    /**
+     * Get the last event ID (useful for reconnection)
+     */
+    get lastEventId() {
+        // EventSource doesn't expose lastEventId directly,
+        // but you can track it via sse:message events
+        return undefined;
+    }
+}
+
+/**
+ * Generic hook for subscribing to a Mercure topic and receiving raw message data.
+ * This is a low-level hook that handles EventSource connection management.
+ *
+ * @param topic - The Mercure topic to subscribe to
+ * @param onMessage - Callback when a message is received
+ * @param onError - Optional callback when an error occurs
+ *
+ * @internal This is a low-level hook. Use useMercureTopic or MercureLive instead.
+ */
+function useMercureEventSource(topic, onMessage, onError) {
+    const app = useApp();
+    useEffect(() => {
+        if (!app.mercureConfig) {
+            console.warn(`useMercureEventSource: app.mercureConfig is not set. Please configure it before using Mercure features.`);
+            return;
+        }
+        const url = new URL(app.mercureConfig.hubUrl);
+        url.searchParams.append("topic", topic);
+        const eventSource = new EventSource(url.toString(), {
+            withCredentials: app.mercureConfig.withCredentials ?? false,
+        });
+        eventSource.onmessage = (event) => {
+            onMessage(event.data);
+        };
+        eventSource.onerror = (error) => {
+            if (onError) {
+                onError(error);
+            }
+            // EventSource will automatically reconnect
+        };
+        return () => eventSource.close();
+    }, [topic, app, onMessage, onError]);
+}
+
+/**
+ * Subscribe to a Mercure topic and receive live JSON data updates.
+ *
+ * @template T - The type of data expected from the topic
+ * @param topic - The Mercure topic to subscribe to
+ * @param initialValue - The initial value before any updates
+ * @returns The current value from the topic
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with type inference
+ * const count = useMercureTopic('/notifications/count', 0);
+ *
+ * // With explicit type
+ * const status = useMercureTopic<'online' | 'offline'>('/status', 'offline');
+ *
+ * // With complex type
+ * interface Stats { visitors: number; sales: number; }
+ * const stats = useMercureTopic<Stats>('/stats', { visitors: 0, sales: 0 });
+ * ```
+ */
+function useMercureTopic(topic, initialValue) {
+    const [value, setValue] = useState(initialValue);
+    const handleMessage = useCallback((data) => {
+        try {
+            const parsed = JSON.parse(data);
+            setValue(parsed);
+        }
+        catch (error) {
+            console.error("Failed to parse Mercure message:", error);
+        }
+    }, []);
+    useMercureEventSource(topic, handleMessage);
+    return value;
+}
+
+function MercureLive({ topic, children }) {
+    const app = useApp();
+    const [content, setContent] = useState(children);
+    // Update content when children prop changes (e.g., during navigation)
+    useEffect(() => {
+        setContent(children);
+    }, [children]);
+    const handleMessage = useCallback((data) => {
+        try {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(data, "text/html");
+            const element = doc.body.firstElementChild;
+            if (element) {
+                setContent(jsx(ReactolithComponent, { element: element, component: app.component }));
+            }
+            else {
+                console.warn("MercureLive: No element found in Mercure message");
+            }
+        }
+        catch (error) {
+            console.error("MercureLive: Failed to parse message:", error);
+        }
+    }, [app.component]);
+    const handleError = useCallback((error) => {
+        console.error("MercureLive: EventSource error:", error);
+    }, []);
+    useMercureEventSource(topic, handleMessage, handleError);
+    return jsx(Fragment, { children: content });
+}
+
+export { App, AppProvider, Mercure, MercureLive, ReactolithComponent, Router, RouterProvider, useApp, useMercureEventSource, useMercureTopic, useRouter };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "reactolith",
+  "version": "1.0.19",
+  "description": "Use HTML on the server to compose your react application.",
+  "license": "MIT",
+  "author": "Franz Mayr-Wilding",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reactolith/reactolith"
+  },
+  "bugs": {
+    "url": "https://github.com/reactolith/reactolith/issues"
+  },
+  "homepage": "https://github.com/reactolith/reactolith",
+  "type": "module",
+  "keywords": [
+    "react",
+    "ssr"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./cli/generate-web-types": {
+      "require": "./cli/generate-web-types.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "bin": {
+    "generate-web-types": "./dist/cli/generate-web-types.cjs"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist dist-webpack types",
+    "build": "npm run clean && npm run build:rollup",
+    "build:rollup": "rollup -c",
+    "typecheck": "tsc --noEmit",
+    "build:release": "npm install && npm ci --dev && npm run typecheck && npm test -- --run && npm run build --if-present",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@react-types/shared": "^3.32.1",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^17.3.0",
+    "jiti": "^2.6.1",
+    "jsdom": "^28.0.0",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rollup": "^4.57.1",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "ts-morph": "^27.0.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}