Tokenizer + :class directive

Author: Machy8

index.html

@@ -18,6 +18,7 @@
 				"signalizejs/directives": "/packages/signalizejs/src/modules/directives.js",
 				"signalizejs/directives/if": "/packages/signalizejs/src/modules/directives/if.js",
 				"signalizejs/directives/for": "/packages/signalizejs/src/modules/directives/for.js",
+				"signalizejs/directives/class": "/packages/signalizejs/src/modules/directives/class.js",
 				"signalizejs/dialog": "/packages/signalizejs/src/modules/dialog.js",
 				"signalizejs/dom/ready": "/packages/signalizejs/src/modules/dom/ready.js",
 				"signalizejs/dom/traverser": "/packages/signalizejs/src/modules/dom/traverser.js",
@@ -33,6 +34,8 @@
 				"signalizejs/sizes": "/packages/signalizejs/src/modules/sizes.js",
 				"signalizejs/snippets": "/packages/signalizejs/src/modules/snippets.js",
 				"signalizejs/spa": "/packages/signalizejs/src/modules/spa.js",
+				"signalizejs/strings/cases": "/packages/signalizejs/src/modules/strings/cases.js",
+				"signalizejs/strings/tokenizer": "/packages/signalizejs/src/modules/strings/tokenizer.js",
 				"signalizejs/task": "/packages/signalizejs/src/modules/task.js",
 				"signalizejs/viewport": "/packages/signalizejs/src/modules/viewport.js"
 			}

packages/signalizejs/package.json

@@ -46,6 +46,9 @@
 		"./directives/if": {
 			"import": "./src/modules/directives/if.js"
 		},
+		"./directives/class": {
+			"import": "./src/modules/directives/class.js"
+		},
 		"./dom/ready": {
 			"import": "./src/modules/dom/ready.js"
 		},
@@ -97,6 +100,9 @@
 		"./strings/cases": {
 			"import": "./src/modules/strings/cases.js"
 		},
+		"./strings/tokenizer": {
+			"import": "./src/modules/strings/tokenizer.js"
+		},
 		"./task": {
 			"import": "./src/modules/task.js"
 		},

packages/signalizejs/src/Signalize.js

@@ -7,13 +7,13 @@ export class Signalize {
 		'ajax',
 		'bind',
 		'component',
-		'dialog', 'dom/ready', 'dom/traverser', 'directives', 'directives/for', 'directives/if',
+		'dialog', 'dom/ready', 'dom/traverser', 'directives', 'directives/for', 'directives/if', 'directives/class',
 		'evaluator', 'event',
 		'hyperscript',
 		'intersection-observer', 'visibility',
 		'mutation-observer',
 		'offset',
-		'scope', 'signal', 'sizes', 'snippets', 'spa', 'strings/cases',
+		'scope', 'signal', 'sizes', 'snippets', 'spa', 'strings/cases', 'strings/tokenizer',
 		'task',
 		'viewport',
 	];

packages/signalizejs/src/modules/directives.js

@@ -58,14 +58,19 @@ export default async ($, config) => {
 
 					const matcherReturn = matcher({ element, attribute });
 
+					/** @type {RegExpExecArray|null} */
+					let matches = null;
+
 					if (matcherReturn === undefined) {
 						continue;
-					}
-
-					const matches = new RegExp(`^${matcherReturn.source}$`).exec(attribute.name);
-
-					if (matches === null) {
+					} else if (typeof matcherReturn === 'boolean' && !matcherReturn) {
 						continue;
+
+					} else if (matcherReturn instanceof RegExp) {
+						matches = new RegExp(`^${matcherReturn.source}$`).exec(attribute.name);
+						if (matches === null) {
+							continue;
+						}
 					}
 
 					elementScope = scope(element, (node) => {
@@ -225,6 +230,10 @@ export default async ($, config) => {
 				return;
 			}
 
+			if (attribute.name === ':class') {
+				return;
+			}
+
 			return new RegExp(`(?::|${attributePrefix}bind${attributeSeparator})([\\S-]+)|(\\{([^{}]+)\\})`);
 		},
 		callback: async (data) => {
@@ -336,6 +345,14 @@ export default async ($, config) => {
 		}
 	});
 
+	directive('class', {
+		matcher: ({ attribute }) => attribute.name === ':class',
+		callback: async (data) => {
+			const { classDirective } = await resolve('directives/class');
+			await classDirective(data);
+		}
+	});
+
 	directive('if', {
 		matcher: ({ element }) => {
 			if (element.tagName.toLowerCase() !== 'template') {

packages/signalizejs/src/modules/directives/class.js

@@ -0,0 +1,131 @@
+/** @type {import('../../../types/Signalize').Module} */
+export default async ({ resolve }) => {
+	const resolved = await resolve('directives', 'evaluator', 'scope', 'signal', 'strings/tokenizer');
+	const { evaluate, Signal, createTokenizer } = resolved;
+
+	const classDirective = async ({ matches, attribute, scope }) => {
+		const { $el } = scope;
+		const isShorthand = attribute.name.startsWith('{');
+		const attributeValue = isShorthand ? matches[3] : attribute.value;
+		let inString = false;
+		let openingQuote = '';
+		let requiredClosingBrackets = 0;
+		let openingBracket = '';
+		let chunkTokenQueue = ''
+		const tokenizer = createTokenizer(attributeValue);
+		const classRawParts = [];
+
+		const openCloseBracketsPair = {
+			'(': ')',
+			'[': ']',
+			'{': '}'
+		};
+		while (tokenizer.canConsumeTokens()) {
+			const token = tokenizer.consumeTokens();
+
+			if (tokenizer.isToken('quote', token)) {
+				if (inString && openingQuote === token) {
+					openingQuote = '';
+					inString = false;
+				} else {
+					openingQuote = token;
+					inString = true;
+				}
+			}
+
+			if (!inString) {
+				if (tokenizer.isToken('openingBracket', token)) {
+					if (requiredClosingBrackets === 0) {
+						openingBracket = token;
+					}
+
+					requiredClosingBrackets++;
+				} else if (tokenizer.isToken('closingBracket', token) && token === openCloseBracketsPair[openingBracket]) {
+					requiredClosingBrackets--;
+					if (requiredClosingBrackets === 0) {
+						openingBracket = '';
+					}
+				}
+			}
+
+			if (!inString && requiredClosingBrackets === 0) {
+				if (token === ',') {
+					classRawParts.push(chunkTokenQueue);
+					chunkTokenQueue = '';
+				} else {
+					chunkTokenQueue += token;
+				}
+			} else {
+				chunkTokenQueue += token;
+			}
+		}
+
+		if (chunkTokenQueue.trim() !== '') {
+			classRawParts.push(chunkTokenQueue);
+		}
+
+		/** @type {Record<string, string>} */
+		const evaluatedClassCache = {};
+
+		/** @type {string[]} */
+		let settedClasses = [];
+
+		const setClassAttribute = () => {
+			const newClasses = [];
+
+			for (const newClass of Object.values(evaluatedClassCache)) {
+				if (newClass.trim() !== '') {
+					newClasses.push(newClass);
+					$el.classList.add(newClass);
+				}
+			}
+
+			for (const className of settedClasses) {
+				if (!newClasses.includes(className)) {
+					$el.classList.remove(className);
+				}
+			}
+
+			settedClasses = newClasses
+		}
+
+		/**
+		 * @param {string} classPart
+		 * @param {boolean} setAttribute
+		 * @param {boolean} trackSignals
+		 */
+		const evaluateClassPart = (classPart, setAttribute, trackSignals = false) => {
+			const { result, detectedSignals } = evaluate(
+				classPart,
+				{
+					$el,
+					...scope
+				},
+				trackSignals
+			);
+
+			evaluatedClassCache[classPart] = result instanceof Signal ? result() : result;
+
+			if (setAttribute === true) {
+				setClassAttribute();
+			}
+
+			return detectedSignals;
+		};
+
+
+		for (const classRawPart of classRawParts) {
+			const detectedSignals = evaluateClassPart(classRawPart, false, true);
+
+			for (const signal of detectedSignals) {
+				signal.watch(() => evaluateClassPart(classRawPart, true));
+			}
+		}
+
+		setClassAttribute();
+	}
+
+
+
+	return { classDirective }
+};