@monimesl/dot-renderer-react 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/markdown.js

@@ -0,0 +1,230 @@
+//#region src/markdown.ts
+const HEADING = /^(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^ {0,3}([-*_])( *\1){2,} *$/;
+const QUOTE = /^ {0,3}> ?/;
+const LIST_ITEM = /^ {0,3}([-*+]|\d{1,9}[.)])\s+/;
+const LINK = /^(!?)\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/;
+const AUTOLINK = /^<(https?:\/\/[^>\s]+)>/;
+const PUNCTUATION = /[!-/:-@[-`{-~]/;
+const ITEM_INDENT = "  ";
+function parseMarkdown(markdown) {
+	return parseBlocks(markdown.replace(/\r\n?/g, "\n").split("\n"));
+}
+function parseBlocks(lines) {
+	const blocks = [];
+	let index = 0;
+	while (index < lines.length) {
+		const line = lines[index];
+		if (line.trim() === "") {
+			index += 1;
+			continue;
+		}
+		const single = oneLineBlock(line);
+		if (single) {
+			blocks.push(single);
+			index += 1;
+		} else if (QUOTE.test(line)) {
+			const quoted = [];
+			while (index < lines.length && QUOTE.test(lines[index])) {
+				quoted.push(lines[index].replace(QUOTE, ""));
+				index += 1;
+			}
+			blocks.push({
+				kind: "quote",
+				blocks: parseBlocks(quoted)
+			});
+		} else if (LIST_ITEM.test(line)) {
+			const { list, next } = parseList(lines, index);
+			blocks.push(list);
+			index = next;
+		} else {
+			const paragraph = [];
+			while (index < lines.length && !endsParagraph(lines[index])) {
+				paragraph.push(lines[index]);
+				index += 1;
+			}
+			blocks.push({
+				kind: "paragraph",
+				content: parseInline(joinLines(paragraph))
+			});
+		}
+	}
+	return blocks;
+}
+function oneLineBlock(line) {
+	const heading = HEADING.exec(line);
+	if (heading) return {
+		kind: "heading",
+		level: Math.min(heading[1].length, 3),
+		content: parseInline(heading[2])
+	};
+	if (RULE.test(line)) return { kind: "rule" };
+	const trimmed = line.trim();
+	const picture = LINK.exec(trimmed);
+	if (picture && picture[1] === "!" && picture[0].length === trimmed.length) return {
+		kind: "image",
+		alt: picture[2],
+		src: picture[3]
+	};
+	return null;
+}
+function endsParagraph(line) {
+	return line.trim() === "" || HEADING.test(line) || RULE.test(line) || QUOTE.test(line) || LIST_ITEM.test(line);
+}
+function joinLines(lines) {
+	let text = "";
+	lines.forEach((line, index) => {
+		text += line.trim().replace(/\\$/, "");
+		if (index < lines.length - 1) text += /( {2,}|\\)$/.test(line) ? "\n" : " ";
+	});
+	return text;
+}
+function parseList(lines, start) {
+	const ordered = isOrdered(LIST_ITEM.exec(lines[start]));
+	const items = [];
+	let index = start;
+	while (index < lines.length) {
+		const marker = LIST_ITEM.exec(lines[index]);
+		if (!marker || isOrdered(marker) !== ordered) break;
+		const indent = marker[0].length;
+		const itemLines = [lines[index].slice(indent)];
+		index += 1;
+		while (index < lines.length) {
+			const line = lines[index];
+			if (line.trim() === "") {
+				if (!lines[index + 1]?.startsWith(ITEM_INDENT)) break;
+				itemLines.push("");
+			} else if (line.startsWith(ITEM_INDENT)) itemLines.push(withoutIndent(line, indent));
+			else if (endsParagraph(line)) break;
+			else itemLines.push(line);
+			index += 1;
+		}
+		items.push(parseBlocks(itemLines));
+	}
+	return {
+		list: {
+			kind: "list",
+			ordered,
+			items
+		},
+		next: index
+	};
+}
+function isOrdered(marker) {
+	return /\d/.test(marker[1]);
+}
+function withoutIndent(line, indent) {
+	const spaces = line.length - line.trimStart().length;
+	return line.slice(Math.min(spaces, indent));
+}
+function parseInline(text) {
+	const inlines = [];
+	let plain = "";
+	let index = 0;
+	const flush = () => {
+		if (plain) {
+			inlines.push({
+				kind: "text",
+				text: plain
+			});
+			plain = "";
+		}
+	};
+	const take = (inline, length) => {
+		flush();
+		inlines.push(inline);
+		index += length;
+	};
+	while (index < text.length) {
+		const char = text[index];
+		const next = text[index + 1];
+		const rest = text.slice(index);
+		if (char === "\\" && next !== void 0 && PUNCTUATION.test(next)) {
+			plain += next;
+			index += 2;
+			continue;
+		}
+		if (char === "\n") {
+			take({ kind: "break" }, 1);
+			continue;
+		}
+		if (char === "`") {
+			const codeEnd = text.indexOf("`", index + 1);
+			if (codeEnd > index + 1) {
+				take({
+					kind: "code",
+					text: text.slice(index + 1, codeEnd)
+				}, codeEnd + 1 - index);
+				continue;
+			}
+		}
+		const link = LINK.exec(rest);
+		if (link) {
+			const [whole, picture, label, href] = link;
+			take(picture === "!" ? {
+				kind: "text",
+				text: label
+			} : {
+				kind: "link",
+				href,
+				children: parseInline(label)
+			}, whole.length);
+			continue;
+		}
+		const autolink = AUTOLINK.exec(rest);
+		if (autolink) {
+			const [whole, href] = autolink;
+			take({
+				kind: "link",
+				href,
+				children: [{
+					kind: "text",
+					text: href
+				}]
+			}, whole.length);
+			continue;
+		}
+		if (char === "*" || char === "_") {
+			const strong = between(text, index, char + char);
+			if (strong) {
+				take({
+					kind: "strong",
+					children: parseInline(strong.inner)
+				}, strong.length);
+				continue;
+			}
+			const emphasis = between(text, index, char);
+			if (emphasis) {
+				take({
+					kind: "emphasis",
+					children: parseInline(emphasis.inner)
+				}, emphasis.length);
+				continue;
+			}
+		}
+		plain += char;
+		index += 1;
+	}
+	flush();
+	return inlines;
+}
+function between(text, start, delimiter) {
+	const open = start + delimiter.length;
+	if (!text.startsWith(delimiter, start) || open >= text.length || /\s/.test(text[open])) return null;
+	const underscore = delimiter.startsWith("_");
+	if (underscore && /\w/.test(text[start - 1] ?? "")) return null;
+	let close = text.indexOf(delimiter, open + 1);
+	while (close !== -1) {
+		const touchesSpace = /\s/.test(text[close - 1]);
+		const insideWord = underscore && /\w/.test(text[close + delimiter.length] ?? "");
+		const startsPair = delimiter.length === 1 && text[close + 1] === delimiter;
+		if (!touchesSpace && !insideWord && !startsPair) return {
+			inner: text.slice(open, close),
+			length: close + delimiter.length - start
+		};
+		close = text.indexOf(delimiter, close + (startsPair ? 2 : 1));
+	}
+	return null;
+}
+//#endregion
+export { parseInline, parseMarkdown };

package/dist/page-root.d.ts

@@ -0,0 +1,2 @@
+import { ComponentType, ReactNode } from "react";
+import "@monimesl/dot-webview";

package/dist/page-root.js

@@ -0,0 +1,20 @@
+import { toList, toText } from "@monimesl/dot-core";
+import { Fragment, createElement, useMemo, useSyncExternalStore } from "react";
+//#region src/page-root.tsx
+function PageRoot({ page, components }) {
+	const state = useSyncExternalStore(page.subscribe, page.getState);
+	const context = useMemo(() => ({
+		h(type, props, ...children) {
+			const component = components[type];
+			if (!component) throw new Error(`The renderer has no component for <${type}>. Check the tag's name, or pass a component for it to the renderer.`);
+			return createElement(component, props, ...children);
+		},
+		text: toText,
+		on: (handler, data) => page.on(handler, data),
+		each: (items, render, key) => createElement(Fragment, null, toList(items).map((item, index) => createElement(Fragment, { key: key ? String(key(item, index)) : index }, ...render(item, index))))
+	}), [page, components]);
+	if (!state) return null;
+	return page.viewRenderer(state, context);
+}
+//#endregion
+export { PageRoot };

package/dist/portal.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+//#region src/portal.ts
+const PortalContainerContext = createContext(null);
+function usePortalContainer() {
+	return useContext(PortalContainerContext) ?? void 0;
+}
+//#endregion
+export { PortalContainerContext, usePortalContainer };

package/dist/pull-to-refresh.js

@@ -0,0 +1,120 @@
+import { useTheme } from "./theme.js";
+import { CENTERED } from "./components/tokens.js";
+import { LoadingIcon } from "./components/spinner.js";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pull-to-refresh.tsx
+const PULL_DISTANCE = 64;
+const LONGEST_PULL = PULL_DISTANCE * 1.5;
+const RESISTANCE = .5;
+const INDICATOR_SIZE = 36;
+const DRAG_DISTANCE = 6;
+function PullToRefresh({ page, children }) {
+	const { colors } = useTheme();
+	const refreshing = useSyncExternalStore(page.subscribeToRefreshing, page.isRefreshing);
+	const [pullDistance, setPullDistance] = useState(0);
+	const areaRef = useRef(null);
+	useEffect(() => {
+		const area = areaRef.current;
+		const view = area.ownerDocument.defaultView;
+		let startY;
+		let pulled = 0;
+		let dragged = false;
+		const begin = (y) => {
+			const atTop = view.scrollY <= 0;
+			startY = page.refreshable && atTop && !page.isRefreshing() ? y : void 0;
+			dragged = false;
+		};
+		const move = (y, event) => {
+			if (startY === void 0) return;
+			const distance = (y - startY) * RESISTANCE;
+			if (distance <= 0) {
+				pulled = 0;
+				setPullDistance(0);
+				return;
+			}
+			if (event.cancelable) event.preventDefault();
+			if (distance > DRAG_DISTANCE) dragged = true;
+			pulled = Math.min(distance, LONGEST_PULL);
+			setPullDistance(pulled);
+		};
+		const end = () => {
+			if (startY !== void 0 && pulled >= PULL_DISTANCE) page.refresh();
+			startY = void 0;
+			pulled = 0;
+			setPullDistance(0);
+		};
+		const ignoreDragClick = (event) => {
+			if (dragged) {
+				dragged = false;
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		};
+		const touchStart = (event) => begin(event.touches[0].clientY);
+		const touchMove = (event) => move(event.touches[0].clientY, event);
+		const mouseDown = (event) => {
+			if (event.button === 0) begin(event.clientY);
+		};
+		const mouseMove = (event) => move(event.clientY, event);
+		const removeListeners = [
+			listen(area, "touchstart", touchStart, { passive: true }),
+			listen(area, "touchmove", touchMove, { passive: false }),
+			listen(area, "touchend", end),
+			listen(area, "touchcancel", end),
+			listen(area, "mousedown", mouseDown),
+			listen(area, "click", ignoreDragClick, { capture: true }),
+			listen(view, "mousemove", mouseMove),
+			listen(view, "mouseup", end)
+		];
+		return () => {
+			for (const removeListener of removeListeners) removeListener();
+		};
+	}, [page]);
+	const indicatorDistance = refreshing ? PULL_DISTANCE : pullDistance;
+	const arrowTurn = Math.min(pullDistance, PULL_DISTANCE) / PULL_DISTANCE * 180;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: areaRef,
+		className: "dot-pull-to-refresh",
+		style: { display: "contents" },
+		children: [children, indicatorDistance > 0 ? /* @__PURE__ */ jsx("span", {
+			role: refreshing ? "status" : void 0,
+			"aria-label": refreshing ? "Refreshing" : void 0,
+			style: {
+				position: "fixed",
+				top: 0,
+				left: "50%",
+				zIndex: 2,
+				...CENTERED,
+				width: INDICATOR_SIZE,
+				height: INDICATOR_SIZE,
+				marginLeft: -18,
+				borderRadius: "50%",
+				background: colors.surface,
+				color: colors.primary,
+				boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+				transform: `translateY(${indicatorDistance - INDICATOR_SIZE / 2}px)`,
+				transition: pullDistance > 0 ? "none" : "transform 0.2s",
+				pointerEvents: "none"
+			},
+			children: refreshing ? /* @__PURE__ */ jsx(LoadingIcon, { size: 20 }) : /* @__PURE__ */ jsx("svg", {
+				width: 20,
+				height: 20,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				style: { transform: `rotate(${arrowTurn}deg)` },
+				children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M6 13l6 6 6-6" })
+			})
+		}) : null]
+	});
+}
+function listen(target, type, listener, options) {
+	target.addEventListener(type, listener, options);
+	return () => target.removeEventListener(type, listener, options);
+}
+//#endregion
+export { PullToRefresh };

package/dist/react-host/19.3.0/react-dom.js

@@ -0,0 +1,3 @@
+import { ReactDom } from './react-host.js';
+export default ReactDom;
+export const { __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, browser, createPortal, flushSync, preconnect, prefetchDNS, preinit, preinitModule, preload, preloadModule, requestFormReset, unstable_batchedUpdates, useFormState, useFormStatus, version } = ReactDom;