@monimesl/dot-renderer-react 0.1.0-alpha.8 → 1.0.0-beta.0

package/dist/markdown.js

@@ -0,0 +1,255 @@
+//#region src/markdown.ts
+const HEADING = /^(#{1,6})\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 = "  ";
+const MAX_INLINE_LENGTH = 2e4;
+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(withoutClosingHashes(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 withoutClosingHashes(text) {
+	let end = text.trimEnd().length;
+	while (end > 0 && text[end - 1] === "#") end -= 1;
+	return text.slice(0, end).trimEnd();
+}
+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) {
+	if (text.length > MAX_INLINE_LENGTH) return [{
+		kind: "text",
+		text
+	}];
+	const inlines = [];
+	const closingSearches = /* @__PURE__ */ new Map();
+	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, closingSearches);
+			if (strong) {
+				take({
+					kind: "strong",
+					children: parseInline(strong.inner)
+				}, strong.length);
+				continue;
+			}
+			const emphasis = between(text, index, char, closingSearches);
+			if (emphasis) {
+				take({
+					kind: "emphasis",
+					children: parseInline(emphasis.inner)
+				}, emphasis.length);
+				continue;
+			}
+		}
+		plain += char;
+		index += 1;
+	}
+	flush();
+	return inlines;
+}
+function between(text, start, delimiter, closingSearches) {
+	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 searchEnds = closingSearches.get(delimiter);
+	if (!searchEnds) {
+		searchEnds = /* @__PURE__ */ new Map();
+		closingSearches.set(delimiter, searchEnds);
+	}
+	const placesLookedAt = [];
+	let close = text.indexOf(delimiter, open + 1);
+	while (close !== -1) {
+		const earlierEnd = searchEnds.get(close);
+		if (earlierEnd !== void 0) {
+			close = earlierEnd;
+			break;
+		}
+		placesLookedAt.push(close);
+		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) break;
+		close = text.indexOf(delimiter, close + (startsPair ? 2 : 1));
+	}
+	for (const place of placesLookedAt) searchEnds.set(place, close);
+	if (close === -1) return null;
+	return {
+		inner: text.slice(open, close),
+		length: close + delimiter.length - start
+	};
+}
+//#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/renderer.d.ts

@@ -0,0 +1,17 @@
+import { Wrapper } from "./root.js";
+import { BuiltinReactComponents } from "./types.js";
+import { JSXElementConstructor } from "react";
+import { Renderer } from "@monimesl/dot-webview";
+//#region src/renderer.d.ts
+type ComponentImplementations = Readonly<Record<string, JSXElementConstructor<never>>>;
+export interface ReactRendererOptions {
+  components?: Partial<BuiltinReactComponents> & ComponentImplementations;
+  wrapper?: Wrapper | undefined;
+}
+export interface CreateReactRendererOptions {
+  components: ComponentImplementations;
+  wrapper?: Wrapper | undefined;
+}
+export declare function createReactRenderer({ components, wrapper }: CreateReactRendererOptions): Renderer;
+export declare function reactRenderer({ components, wrapper }?: ReactRendererOptions): Renderer;
+//#endregion

package/dist/renderer.js

@@ -0,0 +1,33 @@
+import { components_exports } from "./components/index.js";
+import { Root } from "./root.js";
+import { createRoot } from "react-dom/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer.tsx
+const builtins = components_exports;
+function createReactRenderer({ components, wrapper }) {
+	const registry = components;
+	return {
+		name: "react",
+		mount(container, page, dotContext) {
+			const root = createRoot(container);
+			root.render(/* @__PURE__ */ jsx(Root, {
+				page,
+				dotContext,
+				components: registry,
+				wrapper
+			}));
+			return () => root.unmount();
+		}
+	};
+}
+function reactRenderer({ components = {}, wrapper } = {}) {
+	return createReactRenderer({
+		components: {
+			...builtins,
+			...components
+		},
+		wrapper
+	});
+}
+//#endregion
+export { createReactRenderer, reactRenderer };

package/dist/root.d.ts

@@ -0,0 +1,10 @@
+import "./page-root.js";
+import { Theme } from "@monimesl/dot-core";
+import { ComponentType, ReactNode } from "react";
+import "@monimesl/dot-webview";
+//#region src/root.d.ts
+export type Wrapper = ComponentType<{
+  theme: Theme;
+  children: ReactNode;
+}>;
+//#endregion

package/dist/root.js

@@ -0,0 +1,71 @@
+import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.js";
+import { HOME_INDICATOR } from "./components/padding.js";
+import { PortalContainerContext } from "./portal.js";
+import { PageRoot } from "./page-root.js";
+import { PullToRefresh } from "./pull-to-refresh.js";
+import { mergeColors } from "@monimesl/dot-core";
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/root.tsx
+function Root({ page, dotContext, components, wrapper: Wrapper }) {
+	const theme = useSyncExternalStore(dotContext.theme.subscribe, dotContext.theme.get);
+	const systemContext = useSyncExternalStore(dotContext.systemContext.subscribe, dotContext.systemContext.get);
+	const pageColors = useSyncExternalStore(page.subscribeToColors, page.getColors);
+	const resolvedTheme = useMemo(() => resolveTheme(theme, systemContext.scheme, pageColors), [
+		theme,
+		systemContext.scheme,
+		pageColors
+	]);
+	const [rootElement, setRootElement] = useState(null);
+	const pageContent = /* @__PURE__ */ jsx(PageRoot, {
+		page,
+		components
+	});
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: resolvedTheme,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setRootElement,
+			className: "dot-theme-root",
+			"data-dot-scheme": resolvedTheme.scheme,
+			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
+				value: rootElement,
+				children: /* @__PURE__ */ jsx(PullToRefresh, {
+					page,
+					children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
+						theme: withPageColors(theme, resolvedTheme.scheme, pageColors),
+						children: pageContent
+					}) : /* @__PURE__ */ jsx(DefaultSurface, { children: pageContent })
+				})
+			})
+		})
+	});
+}
+function withPageColors(theme, scheme, pageColors) {
+	return {
+		...theme,
+		scheme,
+		colors: {
+			...theme.colors,
+			...mergeColors(theme.colors ?? {}, pageColors)
+		}
+	};
+}
+function DefaultSurface({ children }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-surface",
+		style: {
+			boxSizing: "border-box",
+			minHeight: "100vh",
+			paddingBottom: HOME_INDICATOR,
+			display: "flex",
+			flexDirection: "column",
+			background: colors.background,
+			color: colors.text,
+			fontFamily: FONT_FAMILY
+		},
+		children
+	});
+}
+//#endregion
+export { Root };