@mapsight/vector-style-compiler 8.0.0

package/src/js/cssToRules/mapValue.ts

@@ -0,0 +1,84 @@
+import uniq from "lodash/uniq.js";
+
+import {ensureNonNullable} from "@mapsight/lib-js/nonNullable";
+import trimQuotes from "@mapsight/lib-js/string/trimQuotes";
+import isNumberLike from "@mapsight/lib-js/types/isNumberLike";
+
+import type {ReplacerFn} from "../helpers/Replacer.ts";
+import Replacer from "../helpers/Replacer.ts";
+import pathToExpression from "../helpers/pathToExpression.ts";
+
+const replace: ReplacerFn = (_match, parameter) => {
+	const [search, replacement, subject] = parameter
+		.split(",")
+		.map((a) => a.trim())
+		.map(trimQuotes);
+
+	return `' + replace('${search}', '${replacement}', '${subject}') + '`;
+};
+
+const calc: ReplacerFn = (_match, parameter, replacer) => {
+	// parameter is e.g. "%%%0%%% * 5"
+	// Resolve the inner tags back to their actual string representations
+	let resolvedParam = replacer.replace(parameter);
+
+	// Clean up the string concatenations generated by the earlier `attr` pass.
+	// It extracts `props['test']` out of `' + props['test'] + '`
+	resolvedParam = resolvedParam.replace(/' \+ (.*?) \+ '/g, "$1");
+
+	return `' + (${resolvedParam}) + '`;
+};
+
+export default function mapValue(
+	value: string | number | null | undefined | boolean,
+) {
+	const meta = {
+		styleProps: [] as Array<string>,
+		stylePropExpressions: [] as Array<string>,
+	};
+
+	if (!value) {
+		return {value: null, __meta: meta};
+	}
+
+	let valueStr = String(value);
+	if (isNumberLike(value)) {
+		return {value: parseFloat(valueStr), __meta: meta};
+	}
+
+	valueStr = trimQuotes(valueStr);
+	const replacer = new Replacer([
+		[
+			"attr",
+			(_match, parameter) => {
+				const isEnv = parameter.startsWith("--env-");
+				const parameters = parameter.split("-");
+
+				if (isEnv) {
+					const restParameters = parameters.slice(3);
+					return `' + ${pathToExpression("env", restParameters)} + '`;
+				}
+
+				const expression = pathToExpression("props", parameters);
+				meta.styleProps.push(ensureNonNullable(parameters[0]));
+				meta.stylePropExpressions.push(expression);
+				return `' + ${expression} + '`;
+			},
+		],
+		["replace", replace],
+		["calc", calc],
+	]);
+	valueStr = replacer.execute(valueStr);
+	valueStr = valueStr.replace(/'/g, "\\'");
+	valueStr = replacer.replace(valueStr);
+	valueStr = `'${valueStr}'`;
+
+	return {
+		value: valueStr,
+
+		__meta: {
+			styleProps: uniq(meta.styleProps),
+			stylePropExpressions: uniq(meta.stylePropExpressions),
+		},
+	} as const;
+}

package/src/js/cssToRules.ts

@@ -0,0 +1,49 @@
+import type css from "css";
+import {parse} from "css";
+
+import unique from "@mapsight/lib-js/array/unique";
+
+import mapRule from "./cssToRules/mapRule.ts";
+
+type Meta = Record<string, unknown>;
+
+const collectMeta = <
+	TMeta extends Meta,
+	TMetaKey extends keyof TMeta = keyof Meta,
+>(
+	vals: Array<{__meta: TMeta}>,
+	key: TMetaKey,
+) => {
+	const values = vals.map((v) => v.__meta[key]).flat();
+
+	return unique(values);
+};
+
+function isRule(val: css.Rule | css.Comment | css.AtRule): val is css.Rule {
+	return val.type === "rule";
+}
+
+// types: rule,
+// ignored types: media, stylesheet, comment, charset, custom-media, document, font-face,
+//                import, keyframes, keyframe, media, namespace, page, supports
+function cssOmToRules(om: css.Stylesheet) {
+	return om.stylesheet?.rules.filter(isRule).flatMap(mapRule) ?? [];
+}
+
+export type Rules = ReturnType<typeof cssToRules>;
+
+export default function cssToRules(content: string) {
+	const om = parse(content);
+	const rules = cssOmToRules(om);
+	return {
+		rules,
+		__meta: {
+			styleNames: collectMeta(rules, "styleNames"),
+			stateNames: collectMeta(rules, "stateNames"),
+			groupNames: collectMeta(rules, "groupNames"),
+			declarationNames: collectMeta(rules, "declarationNames"),
+			styleProps: collectMeta(rules, "styleProps"),
+			stylePropExpressions: collectMeta(rules, "stylePropExpressions"),
+		},
+	};
+}

package/src/js/helpers/Replacer.ts

@@ -0,0 +1,50 @@
+const RE_FUNCTION_PARAMETER = "([^\\)]*?)";
+const RE_DOUBLE_QUOTES_IN_PARIS_ONLY = '(?:(?:[^"]*"){2})*[^"]*$';
+const TAG_DELIMITER = "%%%";
+
+export type ReplacerFn = (
+	match: string,
+	parameter: string,
+	replacer: Replacer,
+) => string;
+
+export default class Replacer {
+	private replacementCounter: number = 0;
+	private replacements: Array<{tag: string; replacement: string}> = [];
+	private functions: Array<(val: string) => string> = [];
+
+	constructor(functions: Array<[string, ReplacerFn]> = []) {
+		functions.forEach(([functionName, replacer]) =>
+			this.addFunction(functionName, replacer),
+		);
+	}
+
+	addFunction(functionName: string, replacer: ReplacerFn) {
+		const regex = new RegExp(
+			`(${functionName}\\(${RE_FUNCTION_PARAMETER}\\))(?=${RE_DOUBLE_QUOTES_IN_PARIS_ONLY})`,
+			"ig",
+		);
+		const fn = (value: string): string =>
+			value.replace(regex, (match, _, parameter) => {
+				const tag =
+					TAG_DELIMITER + this.replacementCounter++ + TAG_DELIMITER;
+				const replacement = replacer(match, parameter as string, this);
+				this.replacements.push({tag, replacement});
+
+				return tag;
+			});
+		this.functions.push(fn);
+	}
+
+	execute(value: string): string {
+		return this.functions.reduce((acc, fn) => fn(acc), value);
+	}
+
+	replace(value: string): string {
+		return this.replacements.reduceRight(
+			(acc, {tag, replacement}) =>
+				acc.replace(new RegExp(tag, "g"), replacement),
+			value,
+		);
+	}
+}

package/src/js/helpers/compileDeclarationBlock.ts

@@ -0,0 +1,60 @@
+export type NodeValue = {value: string | number | boolean | null};
+
+export type BlockTree = {
+	[property: string]: BlockTree | NodeValue | null;
+};
+
+const isValueNode = (node: unknown): node is NodeValue =>
+	node !== null && typeof node === "object" && "value" in node;
+
+const getPropertyAccess = (key: string): string => {
+	const isValidIdentifier = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(key);
+	return isValidIdentifier ? `.${key}` : `["${key}"]`;
+};
+
+/**
+ * Compiles a parsed Style AST block into highly optimized JS assignments.
+ * @param ast The parsed style block
+ * @param rootName The name of the base object (default: "declaration")
+ * @param indent String used for indentation
+ */
+export function compileDeclarationBlock(
+	ast: BlockTree,
+	rootName: string = "declaration",
+	indent: string = "  ",
+): string {
+	const lines: string[] = [];
+
+	function traverse(node: BlockTree, parentRef: string, path: string[]) {
+		for (const [key, child] of Object.entries(node)) {
+			const access = getPropertyAccess(key);
+
+			if (child === null) {
+				lines.push(`${indent}${parentRef}${access} = null;`);
+				continue;
+			}
+
+			if (isValueNode(child)) {
+				lines.push(
+					`${indent}${parentRef}${access} = { value: ${child.value} };`,
+				);
+			} else {
+				const newPath = [...path, key];
+				const cacheVar =
+					"_" +
+					newPath
+						.map((p) => p.replace(/[^a-zA-Z0-9]/g, ""))
+						.join("_");
+
+				lines.push(
+					`${indent}const ${cacheVar} = (${indent}${parentRef}${access} ??= {});`,
+				);
+
+				traverse(child, cacheVar, newPath);
+			}
+		}
+	}
+
+	traverse(ast, rootName, []);
+	return lines.join("");
+}

package/src/js/helpers/createModulesMapFromDependencies.ts

@@ -0,0 +1,40 @@
+import uniq from "lodash/uniq.js";
+
+import {isTruthy} from "@mapsight/lib-js/boolean";
+
+const IMPORT_PREFIX = "__vectorStyle_";
+
+const OL_IMPORT_PATH_BY_NAME: Record<string, string> = {
+	style: "ol/style/Style",
+	image: "ol/style/Image",
+	icon: "ol/style/Icon",
+	circle: "ol/style/Circle",
+	stroke: "ol/style/Stroke",
+	text: "ol/style/Text",
+	fill: "ol/style/Fill",
+	regularShape: "ol/style/RegularShape",
+};
+
+export default function createModulesMapFromDependencies(
+	declarationNames: Array<string>,
+) {
+	// @TODO: Find a better way?:
+	// special case for circle. we cannot detect fill and stroke if they are used in circle (circle-stroke-color etc.)
+	// this assumes a circle uses fill and stroke (which it might not!)
+	if (declarationNames.indexOf("circle") > -1) {
+		declarationNames.push("stroke");
+		declarationNames.push("fill");
+	}
+
+	const names = uniq(
+		declarationNames
+			.concat(["style"]) /* we always need at least ol.style.Style */
+			.filter(isTruthy),
+	).filter((name) => OL_IMPORT_PATH_BY_NAME[name]);
+
+	// prettier-ignore
+	return {
+		imports: names.map(name => `import ${IMPORT_PREFIX}${name} from '${OL_IMPORT_PATH_BY_NAME[name]}';`).join('\n'),
+		map: `{${names.map(name => `${name}: ${IMPORT_PREFIX}${name},`).join('\n')}}`,
+	};
+}

package/src/js/helpers/ensureObject.ts

@@ -0,0 +1,17 @@
+/** Replaces the value if it's falsy. */
+export default function ensureObject<T extends object, K extends keyof T>(
+	parent: T,
+	key: K,
+	base: T[K],
+): T[K] {
+	if (parent === null || parent === undefined) {
+		return base;
+	}
+
+	if (parent[key]) {
+		return parent[key];
+	}
+
+	parent[key] = base;
+	return base;
+}

package/src/js/helpers/pathToExpression.ts

@@ -0,0 +1,5 @@
+export default function pathToExpression(target: string, path: string[]) {
+	return path.length > 1
+		? `get(${target}, [${path.map((a) => `'${a}'`).join(", ")}])`
+		: `${target}['${path[0]}']`;
+}

package/src/js/helpers/uniqueSerialized.ts

@@ -0,0 +1,7 @@
+import unique from "@mapsight/lib-js/array/unique";
+
+export default function uniqueSerialized<T>(a: Array<T>): Array<T> {
+	return unique(a.map((b) => JSON.stringify(b))).map(
+		(b) => JSON.parse(b) as T,
+	);
+}

package/src/js/index.ts

@@ -0,0 +1,28 @@
+import cssToRules from "./cssToRules.ts";
+import rulesToTree from "./rulesToTree.ts";
+import defaultTemplate, {type Template} from "./template.ts";
+import treeToProgram from "./treeToProgram.ts";
+
+export type Options = {
+	template?: Template;
+	additionalData?: Record<string, string | number>;
+	baseIndent?: number;
+};
+
+export default function compileMapsightVectorStyle(
+	content: string,
+	{
+		template = defaultTemplate,
+		additionalData = {},
+		baseIndent = 2,
+	}: Options = {},
+) {
+	const rules = cssToRules(content);
+	const tree = rulesToTree(rules.rules);
+	return template({
+		__meta: rules.__meta,
+		program1: treeToProgram(tree, "hash", baseIndent),
+		program2: treeToProgram(tree, "declaration", baseIndent),
+		...additionalData,
+	});
+}

package/src/js/rulesToTree.ts

@@ -0,0 +1,83 @@
+import deepExtend from "@mapsight/lib-js/object/deep-extend";
+
+import type {Rules} from "./cssToRules.ts";
+import type {DeclarationNode} from "./cssToRules/mapDeclaration.ts";
+import type {Check} from "./cssToRules/mapSelectorPart.ts";
+
+export type TreeLeaf = {
+	declarations?: DeclarationNode;
+	children: Child[];
+	stylePropExpressions?: Array<string>;
+};
+
+export type Child = {
+	conditions: Array<Array<Check>>;
+	declarations?: DeclarationNode;
+	stylePropExpressions?: Array<string>;
+};
+
+export type Tree = {
+	[style: string]: {
+		[state: string]: TreeLeaf;
+	};
+};
+
+export default function rulesToTree(rules: Rules["rules"]) {
+	const tree: Tree = {};
+
+	rules.forEach((rule) => {
+		const ruleTree: Record<
+			string,
+			Record<string, Array<Array<Check>>>
+		> = {};
+
+		rule.conditions.forEach((condition) => {
+			const style = condition.style || "default";
+			const state = condition.state || "default";
+
+			ruleTree[style] ??= {};
+			ruleTree[style][state] ??= [];
+
+			if (condition.checks) {
+				ruleTree[style][state].push(condition.checks);
+			}
+		});
+
+		Object.keys(ruleTree).forEach((style) => {
+			const sub = ruleTree[style];
+			if (!sub) {
+				return;
+			}
+
+			const styleTree = tree[style] || {};
+			Object.keys(sub).forEach((state) => {
+				const stateTree: Tree[string][string] = styleTree[state] ?? {
+					children: [],
+				};
+
+				const conditions = sub[state];
+				if (conditions?.length) {
+					stateTree.children.push({
+						conditions: conditions,
+						declarations: rule.declarations,
+						stylePropExpressions: rule.__meta.stylePropExpressions,
+					});
+					return;
+				}
+				stateTree.stylePropExpressions = (
+					stateTree.stylePropExpressions || []
+				).concat(rule.__meta.stylePropExpressions);
+
+				stateTree.declarations = deepExtend(
+					stateTree.declarations || {},
+					rule.declarations,
+				);
+
+				styleTree[state] = stateTree;
+			});
+			tree[style] = styleTree;
+		});
+	});
+
+	return tree;
+}

package/src/js/template.source.js

@@ -0,0 +1,56 @@
+import get from "@mapsight/lib-js/object/getPath";
+import replace from "@mapsight/lib-js/string/replaceRegex";
+import createCachedStyleFunction from "@mapsight/lib-ol/style/createCachedStyleFunction";
+/* styleImports-start: */
+import __vectorStyle_circle from "ol/style/Circle";
+
+/* :styleImports-end */
+
+/** @type {(value: unknown) => string} */
+const createHash = /* @__PURE__ */ (value) =>
+	/* @__PURE__ */ JSON.stringify(value);
+/** @type {import('@mapsight/lib-ol/style/createCachedStyleFunction').StyleFunctionOptions} */
+const styleOptions = {
+	constructorsMap: /* constructorMap-start: */ {
+		circle: __vectorStyle_circle,
+	} /* :constructorMap-end */,
+	allowedStyles: /* styleNames-start: */ [] /* :styleNames-end */,
+	allowedProps: /* styleProps-start: */ ["test"] /* :styleProps-end */,
+	declarationHashFunction: (env, props, hashPrefix, geometryType, style) => {
+		/** @type {Array<string|number>} */
+		const hash = [hashPrefix, geometryType];
+		// noinspection UnnecessaryLocalVariableJS
+		/** @type {(a: string|number) => void} */
+		const h = (a) => {
+			hash.push(a);
+		};
+
+		/* program1-start: */
+		h(1);
+		h("@" + createHash(style));
+		h("@" + createHash(props["test"]));
+		h("@" + createHash(env["test"]));
+		h("@" + createHash(get(props, ["path", "to", "test"])));
+		/* :program1-end */
+
+		return hash.join("|");
+	},
+	declarationFunction: (env, props, geometryType, style) => {
+		/** @type {Record<string, unknown>} */
+		const d = {};
+
+		/* program2-start: */
+		d.zIndex = 1;
+		d.calcTest = {value: "" + replace("a", "e", "hallo") + ""};
+		d.a = env.a;
+		d.b = props.b;
+		d.geometryType = geometryType;
+		d.style = style;
+		d.test = "foo";
+		/* :program2-end */
+
+		return d;
+	},
+};
+
+export default createCachedStyleFunction(styleOptions);

package/src/js/template.ts

@@ -0,0 +1,50 @@
+import {readFileSync} from "node:fs";
+import {resolve} from "node:path";
+
+import createModulesMapFromDependencies from "./helpers/createModulesMapFromDependencies.ts";
+
+export type TemplateArgs<
+	TAdditionalData extends Record<string, unknown> = Record<string, unknown>,
+> = TAdditionalData & {
+	__meta: {
+		styleNames: string[];
+		stateNames: string[];
+		groupNames: string[];
+		declarationNames: string[];
+		styleProps: string[];
+		stylePropExpressions: string[];
+	};
+	program1: string;
+	program2: string;
+};
+export type Template<
+	TAdditionalData extends Record<string, unknown> = Record<string, unknown>,
+> = (args: TemplateArgs<TAdditionalData>) => string;
+
+const templateSource = readFileSync(
+	resolve(import.meta.dirname, "template.source.js"),
+	"utf8",
+);
+
+const replaceTag = (content: string, tag: string, value: string) => {
+	const pattern = `\\/\\*\\s*${tag}-start:\\s*\\*\\/[\\s\\S]*?\\/\\*\\s*:${tag}-end\\s*\\*\\/`;
+	return content.replace(new RegExp(pattern, "g"), () => value);
+};
+
+const defaultTemplate = ({__meta, program1, program2}: TemplateArgs) => {
+	const {declarationNames, styleProps, styleNames} = __meta;
+	const {map: constructorMap, imports: styleImports} =
+		createModulesMapFromDependencies(declarationNames);
+
+	let result = "// @ts-nocheck\n" + templateSource;
+	result = replaceTag(result, "styleImports", styleImports);
+	result = replaceTag(result, "constructorMap", constructorMap);
+	result = replaceTag(result, "styleNames", JSON.stringify(styleNames));
+	result = replaceTag(result, "styleProps", JSON.stringify(styleProps));
+	result = replaceTag(result, "program1", program1);
+	result = replaceTag(result, "program2", program2);
+
+	return result;
+};
+
+export default defaultTemplate;