@fluxdown/solid 0.0.0-stage → 0.2.0

package/dist/esm/server/raw.js

@@ -0,0 +1,591 @@
+import { Dynamic, createComponent, escape, mergeProps, ssrElement } from "solid-js/web";
+import { BaseRenderer, Core, isPluggablesEqual, isPluginSetEqual } from "@fluxdown/core";
+import { PRESET_MAPPER_PLUGINS } from "@fluxdown/core-plugins/presets/mapper";
+import { PREFIX, SlotProvider, createStateOf, createStateValue, filterDisabledBy, getSolidProps, isHastElement, isHastParent, toPluginList } from "@fluxdown/solid-plugins/base";
+import { castArray, defaults, forOwn, isArray, isBoolean, isNumber, isObject, isObjectLike, isString, mapValues, merge, replace, toLower, toString } from "lodash-es";
+import { shallowEqual } from "shallow-equal";
+import { For, createContext, createMemo, createUniqueId, mergeProps as mergeProps$1, onCleanup, splitProps, useContext } from "solid-js";
+import { D, S, render, toState } from "stative";
+import { PluginPriority } from "@fluxdown/types";
+import { IntervalSmoothTicker, RafSmoothTicker, SpringSmoothScheduler } from "@fluxdown/core-plugins/plugins/mapper/smooth";
+import { assert, defaultsBy, isEnableRAF } from "@fluxdown/utils";
+//#region src/context/render/index.ts
+var RenderContext = /*#__PURE__*/ createContext(null);
+var RenderProvider = RenderContext.Provider;
+var useRender = () => {
+	const config = useContext(RenderContext);
+	if (config === null) throw new Error("[Fluxdown] A render context is required.");
+	return config;
+};
+//#endregion
+//#region src/components/block-reconciler/utils.tsx
+var isElementContent = (node) => {
+	return node.type === "comment" || node.type === "element" || node.type === "text";
+};
+var getChildKey = (node, fallbackIndex) => {
+	if (node.type === "element" && node.properties?.dataParserPatch === "1" && isString(node.properties.dataPatchKey)) return `patch:${node.properties.dataPatchKey}`;
+	if (isString(node.data?.renderKey)) return `render:${node.data.renderKey}`;
+	const tagName = node.type === "element" ? `:${node.tagName}` : "";
+	if (node.position?.start.offset !== void 0) return `source:${node.position.start.offset}:${node.type}${tagName}`;
+	return `${fallbackIndex}:${node.type}${tagName}`;
+};
+var ChildrenReconciler = (props) => {
+	const nodes = createMemo(() => {
+		const children = props.node?.children ?? [];
+		const result = /* @__PURE__ */ new Map();
+		children.forEach((child, index) => {
+			if (!isElementContent(child)) return;
+			const previous = children[index - 1];
+			const key = child.type === "text" ? `text:${previous ? getChildKey(previous, index - 1) : "start"}` : getChildKey(child, index);
+			result.set(result.has(key) ? `fallback:${index}` : key, child);
+		});
+		return result;
+	});
+	const keys = createMemo(() => [...nodes().keys()]);
+	return createComponent(For, {
+		get each() {
+			return keys();
+		},
+		children: (key) => {
+			return createComponent(NodeReconciler, mergeProps(props, { get node() {
+				return nodes().get(key);
+			} }));
+		}
+	});
+};
+var NodeReconciler = (props) => {
+	const childParents = createMemo(() => {
+		const node = props.node;
+		return node && isHastParent(node) ? [...props.parents, node] : props.parents;
+	});
+	const render = (node) => {
+		return createComponent(NodeReconciler, mergeProps(props, {
+			get node() {
+				return typeof node === "function" ? node() : node;
+			},
+			get parents() {
+				return childParents();
+			}
+		}));
+	};
+	const renderChildren = (target) => {
+		const current = target === void 0 || target === props.node;
+		const node = () => {
+			const value = current ? props.node : typeof target === "function" ? target() : target;
+			return value && isHastParent(value) ? value : void 0;
+		};
+		const parents = () => {
+			const value = node();
+			return current || !value ? childParents() : [...childParents(), value];
+		};
+		return createComponent(ChildrenReconciler, mergeProps(props, {
+			get node() {
+				return node();
+			},
+			get parents() {
+				return parents();
+			}
+		}));
+	};
+	const getProps = (target) => {
+		if (props.getProps === null) return {};
+		const node = props.node;
+		const current = target ?? (node && isHastElement(node) ? node : void 0);
+		return props.getProps ? props.getProps(current) : { ...current?.properties };
+	};
+	const matched = createMemo(() => {
+		const node = props.node;
+		if (!node) return;
+		let result;
+		let priority = Infinity;
+		for (const plugin of props.plugins) {
+			const nextPriority = plugin.config.priority ?? PluginPriority.Default;
+			if (nextPriority > priority || !plugin.match({
+				node,
+				parents: props.parents
+			})) continue;
+			result = plugin;
+			priority = nextPriority;
+		}
+		return result;
+	});
+	const Renderer = createMemo(() => {
+		const plugin = matched();
+		return plugin?.render.bind(plugin);
+	});
+	return createComponent(Dynamic, mergeProps({ get component() {
+		return Renderer();
+	} }, mergeProps$1(props, {
+		getProps,
+		render,
+		renderChildren
+	}), { get node() {
+		return props.node;
+	} }));
+};
+//#endregion
+//#region src/components/block-reconciler/index.tsx
+var BlockReconciler = (props) => {
+	const config = useRender();
+	const root = createStateValue(() => props.block.value);
+	const patches = createMemo(() => toState(props.patches));
+	const plugins = createStateValue(() => toState(props.plugins));
+	return createComponent(ChildrenReconciler, {
+		get node() {
+			return root();
+		},
+		get parents() {
+			return [root()];
+		},
+		get patches() {
+			return patches();
+		},
+		get plugins() {
+			return plugins();
+		},
+		get getProps() {
+			return config.getProps;
+		}
+	});
+};
+//#endregion
+//#region src/components/root-reconciler/index.tsx
+var RootReconciler = (props) => {
+	const value = createStateValue(() => props.value);
+	const blocks = createMemo(() => {
+		const entries = value();
+		return new Map(entries.map((block) => [block.key, block]));
+	});
+	const keys = createMemo(() => [...blocks().keys()]);
+	return createComponent(For, {
+		get each() {
+			return keys();
+		},
+		children: (key) => {
+			return createComponent(BlockReconciler, mergeProps(() => blocks().get(key)));
+		}
+	});
+};
+//#endregion
+//#region src/consts/config.ts
+var DEFAULT_CONFIG = {
+	footnote: false,
+	repair: true,
+	repairEnding: false,
+	tex: false,
+	indentedCode: false,
+	setextHeading: false
+};
+//#endregion
+//#region src/consts/defaults.ts
+var EL = [];
+var EO = {};
+//#endregion
+//#region src/consts/smooth.ts
+var ALL_TICKERS = [RafSmoothTicker, IntervalSmoothTicker];
+var ALL_SCHEDULERS = [SpringSmoothScheduler];
+//#endregion
+//#region src/consts/styles.ts
+var ROOT_CLASS_NAME = `${PREFIX}-root`;
+//#endregion
+//#region src/hooks/plugins.ts
+var createPlugins = (items, type) => {
+	return createMemo(() => toPluginList(items(), type));
+};
+var createMergedPlugins = (presets, plugins) => {
+	return createMemo(() => {
+		const items = castArray(plugins() ?? EL);
+		const merge = (type) => {
+			const overrides = toPluginList(items, type);
+			return [...filterDisabledBy(toPluginList(presets, type), overrides), ...overrides];
+		};
+		return {
+			remarks: merge("remarks"),
+			rehypes: merge("rehypes"),
+			repairs: merge("repairs"),
+			mappers: merge("mappers"),
+			renders: merge("renders"),
+			slots: merge("slots")
+		};
+	});
+};
+//#endregion
+//#region src/modules/solid-renderer/index.tsx
+var SolidRenderer = class extends BaseRenderer {
+	renderItem(item) {
+		const { patches, plugins } = this.inputs;
+		return {
+			key: item.meta.value.key,
+			block: item,
+			patches,
+			plugins
+		};
+	}
+};
+var index_module_default = { root: "_root_f61oc_1" };
+//#endregion
+//#region src/theme/presets/base.ts
+var BASE_TOKENS = {
+	typography: {
+		fontSans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif",
+		fontMono: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+		fontSmoothing: "antialiased",
+		fontSize: {
+			xs: "0.75rem",
+			sm: "0.875rem",
+			md: "1rem"
+		},
+		lineHeight: {
+			sm: 1.4,
+			md: 1.65,
+			lg: 1.8
+		},
+		fontWeight: {
+			normal: 400,
+			medium: 600,
+			bold: 650
+		}
+	},
+	heading: {
+		h1: {
+			fontSize: "2rem",
+			fontWeight: 650,
+			lineHeight: 1.25,
+			marginTop: "2rem",
+			marginBottom: "1rem"
+		},
+		h2: {
+			fontSize: "1.5rem",
+			fontWeight: 650,
+			lineHeight: 1.3,
+			marginTop: "1.75rem",
+			marginBottom: "0.875rem"
+		},
+		h3: {
+			fontSize: "1.25rem",
+			fontWeight: 600,
+			lineHeight: 1.4,
+			marginTop: "1.5rem",
+			marginBottom: "0.75rem"
+		},
+		h4: {
+			fontSize: "1.125rem",
+			fontWeight: 600,
+			lineHeight: 1.4,
+			marginTop: "1.25rem",
+			marginBottom: "0.625rem"
+		},
+		h5: {
+			fontSize: "1rem",
+			fontWeight: 600,
+			lineHeight: 1.5,
+			marginTop: "1rem",
+			marginBottom: "0.5rem"
+		},
+		h6: {
+			fontSize: "0.875rem",
+			fontWeight: 600,
+			lineHeight: 1.5,
+			marginTop: "1rem",
+			marginBottom: "0.5rem"
+		}
+	},
+	paragraph: {
+		marginTop: "0",
+		marginBottom: "1rem"
+	},
+	code: {
+		fontSize: "0.875rem",
+		lineHeight: 1.65
+	},
+	inlineCode: {
+		paddingBlock: "0.15em",
+		paddingInline: "0.35em",
+		border: `1px solid var(--${PREFIX}-colors-border)`,
+		borderRadius: `var(--${PREFIX}-radius-sm)`,
+		background: `var(--${PREFIX}-colors-surface-muted)`,
+		fontFamily: `var(--${PREFIX}-typography-font-mono)`,
+		fontSize: "0.875em",
+		whiteSpace: "break-spaces"
+	},
+	divider: {
+		height: "1px",
+		marginBlock: `var(--${PREFIX}-spacing-xl)`,
+		marginInline: "0",
+		border: "0",
+		borderBlockEnd: `var(--${PREFIX}-divider-border)`,
+		background: `var(--${PREFIX}-colors-border)`
+	},
+	footnotes: {
+		marginTop: `var(--${PREFIX}-spacing-xl)`,
+		paddingTop: `var(--${PREFIX}-spacing-lg)`,
+		borderTop: `1px solid var(--${PREFIX}-colors-border)`,
+		color: `var(--${PREFIX}-colors-fg-muted)`,
+		fontSize: `var(--${PREFIX}-typography-font-size-sm)`
+	},
+	radius: {
+		sm: "0.25rem",
+		md: "0.5rem",
+		lg: "0.875rem"
+	},
+	spacing: {
+		xs: "0.25rem",
+		sm: "0.5rem",
+		md: "0.75rem",
+		lg: "1rem",
+		xl: "1.5rem"
+	}
+};
+//#endregion
+//#region src/theme/presets/dark.ts
+var DARK_THEME = { tokens: {
+	...BASE_TOKENS,
+	colors: {
+		fg: "#ececf1",
+		fgMuted: "#a6a8b0",
+		bg: "#212121",
+		border: "#3c3e42",
+		accent: "#82b7ff",
+		accentHover: "#b1d2ff",
+		surfaceMuted: "#353639",
+		surfaceSubtle: "#292a2d",
+		borderEmphasis: "#666970"
+	},
+	syntax: {
+		comment: "#9da7b3",
+		keyword: "#ff7b72",
+		string: "#a5d6ff",
+		number: "#79c0ff",
+		function: "#d2a8ff",
+		variable: "#ffa657",
+		punctuation: "#c9d1d9",
+		inserted: "#7ee787",
+		deleted: "#ffa198"
+	}
+} };
+//#endregion
+//#region src/theme/presets/index.ts
+var PRESET_THEME_MAP = {
+	light: { tokens: {
+		...BASE_TOKENS,
+		colors: {
+			fg: "#202123",
+			fgMuted: "#64676b",
+			bg: "#ffffff",
+			border: "#e5e7eb",
+			accent: "#0969da",
+			accentHover: "#0550ae",
+			surfaceMuted: "#f1f2f4",
+			surfaceSubtle: "#f7f8fa",
+			borderEmphasis: "#b5bac1"
+		},
+		syntax: {
+			comment: "#6e7781",
+			keyword: "#cf222e",
+			string: "#0a3069",
+			number: "#0550ae",
+			function: "#8250df",
+			variable: "#953800",
+			punctuation: "#57606a",
+			inserted: "#116329",
+			deleted: "#a40e26"
+		}
+	} },
+	dark: DARK_THEME
+};
+//#endregion
+//#region src/theme/utils.ts
+var isThemeTuple = (theme) => isArray(theme);
+var resolveTheme = (theme = "light") => {
+	if (isString(theme)) return PRESET_THEME_MAP[theme];
+	const [preset, overrides] = isThemeTuple(theme) ? theme : ["light", theme];
+	return merge({}, PRESET_THEME_MAP[preset], overrides);
+};
+var mapTokensToStyles = (tokens) => {
+	const styles = {};
+	const visit = (value, path) => {
+		forOwn(value, (token, key) => {
+			const name = `${path}-${replace(key, /[A-Z]/g, (letter) => `-${toLower(letter)}`)}`;
+			if (isObject(token)) visit(token, name);
+			else styles[name] = toString(token);
+		});
+	};
+	visit(tokens, `--${PREFIX}`);
+	return styles;
+};
+//#endregion
+//#region src/theme/consts.ts
+var PRESET_STYLES = /*#__PURE__*/ mapValues(PRESET_THEME_MAP, ({ tokens }) => mapTokensToStyles(tokens));
+//#endregion
+//#region src/theme/hooks.ts
+var createThemeStyles = (theme = () => "light") => {
+	return createMemo(() => {
+		const value = theme();
+		return isString(value) ? PRESET_STYLES[value] : mapTokensToStyles(resolveTheme(value).tokens);
+	});
+};
+//#endregion
+//#region src/packs/utils/config.ts
+var getTickerByType = (type) => {
+	if (!isString(type)) return type;
+	const ticker = ALL_TICKERS.find((item) => item.name === type);
+	assert(ticker, `Unknown ticker type: ${type}`);
+	return ticker;
+};
+var getSchedulerByType = (type) => {
+	if (!isString(type)) return type;
+	const scheduler = ALL_SCHEDULERS.find((item) => item.name === type);
+	assert(scheduler, `Unknown scheduler type: ${type}`);
+	return scheduler;
+};
+var toSmoothConfig = (config) => {
+	const { enabled = false, ticker, scheduler } = isBoolean(config) ? {
+		enabled: config,
+		ticker: isEnableRAF() ? "raf" : "interval",
+		scheduler: "spring"
+	} : config;
+	return {
+		enabled,
+		ticker: getTickerByType(ticker),
+		scheduler: getSchedulerByType(scheduler)
+	};
+};
+var toStreamingConfig = (config = false) => {
+	if (isBoolean(config)) return {
+		repairEnding: config,
+		smooth: config,
+		effect: config ? "scale" : false
+	};
+	const { repairEnding = true, smooth = true, effect = "scale" } = config;
+	return {
+		repairEnding,
+		smooth,
+		effect
+	};
+};
+var toBuildConfig = ({ base, repairEnding, idPrefix }) => {
+	return {
+		...defaultsBy(base, {
+			...DEFAULT_CONFIG,
+			idPrefix
+		}),
+		repairEnding
+	};
+};
+//#endregion
+//#region src/packs/utils/effect.ts
+var toEffects = (effect = false) => {
+	if (effect === false) return [];
+	if (effect === true) return ["scale"];
+	if (!isArray(effect)) return [effect];
+	if (effect.length === 2 && !isArray(effect[1]) && isObjectLike(effect[1])) return [effect];
+	return effect;
+};
+var toEffectMappers = (effects, presets) => {
+	return effects.map((effect) => {
+		const [key, config] = isArray(effect) ? effect : [effect, EO];
+		if (!isString(key)) return effect;
+		const Mapper = presets.find((item) => item.key === key);
+		assert(Mapper, `Unknown effect: ${key}`);
+		return [Mapper, defaults({ ...config }, { enabled: true })];
+	});
+};
+//#endregion
+//#region src/packs/utils/patches.ts
+var isPatchRangeEqual = (left, right) => {
+	return left === right || (isNumber(left) ? left : left[0]) === (isNumber(right) ? right : right[0]) && (isNumber(left) ? left : left[1]) === (isNumber(right) ? right : right[1]);
+};
+var isPatchesEqual = (left, right) => {
+	return left === right || left.length === right.length && left.every((patch, index) => {
+		const other = right[index];
+		return other !== void 0 && patch.key === other.key && isPatchRangeEqual(patch.range, other.range) && patch.render === other.render;
+	});
+};
+//#endregion
+//#region src/packs/raw/utils.ts
+var mergeStyles = (theme, style) => {
+	if (!isString(style)) return {
+		...theme,
+		...style
+	};
+	return `${Object.entries(theme).map(([name, value]) => `${name}:${value}`).join(";")};${style}`;
+};
+//#endregion
+//#region src/packs/raw/index.tsx
+var FluxdownRaw = (props) => {
+	const [options, attributes] = splitProps(props, [
+		"text",
+		"build",
+		"streaming",
+		"patches",
+		"plugins",
+		"theme",
+		"class",
+		"style",
+		"ref"
+	]);
+	const streaming = createMemo(() => toStreamingConfig(options.streaming));
+	const effects = createMemo(() => toEffectMappers(toEffects(streaming().effect), PRESET_MAPPER_PLUGINS));
+	const idPrefix = createUniqueId();
+	const build = createStateOf(() => toBuildConfig({
+		base: options.build ?? EO,
+		repairEnding: streaming().repairEnding,
+		idPrefix
+	}), shallowEqual);
+	const patches = createStateOf(() => options.patches ?? EL, isPatchesEqual);
+	const text = createStateOf(() => options.text);
+	const plugins = createMemo(() => castArray(options.plugins));
+	const _remarks = createPlugins(plugins, "remarks");
+	const _rehypes = createPlugins(plugins, "rehypes");
+	const _repairs = createPlugins(plugins, "repairs");
+	const _mappers = createPlugins(plugins, "mappers");
+	const _renders = createPlugins(plugins, "renders");
+	const slots = createPlugins(plugins, "slots");
+	const remarks = createStateOf(_remarks, isPluggablesEqual);
+	const rehypes = createStateOf(_rehypes, isPluggablesEqual);
+	const repairs = createStateOf(_repairs, isPluggablesEqual);
+	const mappers = createStateOf(() => [[..._mappers(), ...effects()], { smooth: toSmoothConfig(streaming().smooth) }], isPluginSetEqual);
+	const renders = createStateOf(_renders, isPluggablesEqual);
+	const core = render(S([Core, {
+		Renderer: D(SolidRenderer),
+		build,
+		patches,
+		rehypes,
+		remarks,
+		renders,
+		repairs,
+		mappers,
+		text
+	}]));
+	const theme = createThemeStyles(() => options.theme ?? "light");
+	options.ref?.(core);
+	onCleanup(() => core.destroy());
+	return ssrElement("div", mergeProps(attributes, {
+		get ["class"]() {
+			return [
+				index_module_default.root,
+				ROOT_CLASS_NAME,
+				options.class
+			].filter(Boolean).join(" ");
+		},
+		get style() {
+			return mergeStyles(theme(), options.style);
+		}
+	}), () => escape(createComponent(RenderProvider, {
+		value: { getProps: getSolidProps },
+		get children() {
+			return createComponent(SlotProvider, {
+				get plugins() {
+					return slots();
+				},
+				get children() {
+					return createComponent(RootReconciler, { get value() {
+						return core.value;
+					} });
+				}
+			});
+		}
+	})), true);
+};
+//#endregion
+export { FluxdownRaw, createMergedPlugins as t };

package/dist/esm/styles.css

@@ -0,0 +1,2 @@
+@import '@fluxdown/solid-plugins/styles.css';
+@import './assets/raw-Dob3BCyv.css';

package/dist/esm/theme/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const PRESET_STYLES: {
+    light: import("solid-js").JSX.CSSProperties;
+    dark: import("solid-js").JSX.CSSProperties;
+};

package/dist/esm/theme/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '../types/index.js';
+export declare const createThemeStyles: (theme?: () => Theme) => import("solid-js").Accessor<import("solid-js").JSX.CSSProperties>;

package/dist/esm/theme/index.d.ts

@@ -0,0 +1 @@
+export * from './hooks.js';

package/dist/esm/theme/presets/base.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeTokens } from '../../types/index.js';
+export declare const BASE_TOKENS: Omit<ThemeTokens, 'colors' | 'syntax'>;

package/dist/esm/theme/presets/dark.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeConfig } from '../../types/index.js';
+export declare const DARK_THEME: ThemeConfig;

package/dist/esm/theme/presets/index.d.ts

@@ -0,0 +1,4 @@
+export declare const PRESET_THEME_MAP: {
+    light: import("../../types/index.js").ThemeConfig;
+    dark: import("../../types/index.js").ThemeConfig;
+};

package/dist/esm/theme/presets/light.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeConfig } from '../../types/index.js';
+export declare const LIGHT_THEME: ThemeConfig;

package/dist/esm/theme/utils.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import type { Theme, ThemeConfig, ThemeTokens } from '../types/index.js';
+export declare const resolveTheme: (theme?: Theme) => ThemeConfig;
+export declare const mapTokensToStyles: (tokens: ThemeTokens) => JSX.CSSProperties;

package/dist/esm/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from '@fluxdown/solid-plugins/typings';
+export * from './theme.js';