RubyGems - presently - Versions diffs - 0.1.0 - Mend

presently 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

data/public/_components/@socketry/syntax/test/Syntax/Language/css.js ADDED Viewed

@@ -0,0 +1,431 @@
+// test/Syntax/Language/css.js
+// Tests for CSS language highlighting
+import {test} from 'node:test';
+import assert from 'node:assert';
+import {JSDOM} from 'jsdom';
+// Setup DOM environment
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
+global.document = dom.window.document;
+import Syntax from '../../../Syntax.js';
+import registerCSS from '../../../Syntax/Language/css.js';
+test('CSS language is registered', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	assert.ok(language, 'CSS language should be registered');
+	assert.strictEqual(language.name, 'css');
+});
+test('selectors - element', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: red; }';
+	const matches = await language.getMatches(syntax, code);
+	const selectors = matches.filter(m => m.type === 'selector');
+	assert.ok(selectors.length > 0, 'Should find selector');
+});
+test('selectors - class', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = '.my-class { color: red; }';
+	const matches = await language.getMatches(syntax, code);
+	const selectors = matches.filter(m => m.type === 'selector');
+	assert.ok(selectors.length > 0, 'Should find class selector');
+});
+test('selectors - id', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = '#my-id { color: red; }';
+	const matches = await language.getMatches(syntax, code);
+	const selectors = matches.filter(m => m.type === 'selector');
+	assert.ok(selectors.length > 0, 'Should find id selector');
+});
+test('selectors - attribute', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = '[data-value="test"] { color: red; }';
+	const matches = await language.getMatches(syntax, code);
+	const selectors = matches.filter(m => m.type === 'selector');
+	assert.ok(selectors.length > 0, 'Should find attribute selector');
+});
+test('selectors - pseudo-class', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'a:hover { color: blue; }';
+	const matches = await language.getMatches(syntax, code);
+	const selectors = matches.filter(m => m.type === 'selector');
+	assert.ok(selectors.length > 0, 'Should find pseudo-class selector');
+});
+test('properties and values', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: red; }';
+	const matches = await language.getMatches(syntax, code);
+	const properties = matches.filter(m => m.type === 'property');
+	const values = matches.filter(m => m.type === 'value');
+	assert.ok(properties.length > 0, 'Should find property');
+	assert.ok(values.length > 0, 'Should find value');
+});
+test('color - named color', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: AliceBlue; }';
+	const matches = await language.getMatches(syntax, code);
+	const colors = matches.filter(m => m.type === 'color');
+	assert.ok(colors.length > 0, 'Should find named color');
+});
+test('color - hex short', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: #fff; }';
+	const matches = await language.getMatches(syntax, code);
+	const colors = matches.filter(m => m.type === 'color');
+	assert.ok(colors.length > 0, 'Should find hex color');
+});
+test('color - hex long', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: #ffffff; }';
+	const matches = await language.getMatches(syntax, code);
+	const colors = matches.filter(m => m.type === 'color');
+	assert.ok(colors.length > 0, 'Should find hex color');
+});
+test('color - rgb', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: rgb(255, 0, 0); }';
+	const matches = await language.getMatches(syntax, code);
+	const colors = matches.filter(m => m.type === 'color');
+	assert.ok(colors.length > 0, 'Should find rgb color');
+});
+test('color - rgba', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: rgba(255, 0, 0, 0.5); }';
+	const matches = await language.getMatches(syntax, code);
+	const colors = matches.filter(m => m.type === 'color');
+	assert.ok(colors.length > 0, 'Should find rgba color');
+});
+test('color - hsl', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: hsl(120, 100%, 50%); }';
+	const matches = await language.getMatches(syntax, code);
+	const colors = matches.filter(m => m.type === 'color');
+	assert.ok(colors.length > 0, 'Should find hsl color');
+});
+test('color - hsla', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: hsla(120, 100%, 50%, 0.5); }';
+	const matches = await language.getMatches(syntax, code);
+	const colors = matches.filter(m => m.type === 'color');
+	assert.ok(colors.length > 0, 'Should find hsla color');
+});
+test('comments - single line', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = '/* This is a comment */';
+	const matches = await language.getMatches(syntax, code);
+	const comments = matches.filter(m => m.type === 'comment');
+	assert.ok(comments.length > 0, 'Should find comment');
+});
+test('comments - multiline', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = `/* This is
+	a multiline
+	comment */`;
+	const matches = await language.getMatches(syntax, code);
+	const comments = matches.filter(m => m.type === 'comment');
+	assert.ok(comments.length > 0, 'Should find multiline comment');
+});
+test('strings - single quoted', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = "content: 'hello';";
+	const matches = await language.getMatches(syntax, code);
+	const strings = matches.filter(m => m.type === 'string');
+	assert.ok(strings.length > 0, 'Should find single quoted string');
+});
+test('strings - double quoted', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'content: "hello";';
+	const matches = await language.getMatches(syntax, code);
+	const strings = matches.filter(m => m.type === 'string');
+	assert.ok(strings.length > 0, 'Should find double quoted string');
+});
+test('functions - url', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'background: url(image.png);';
+	const matches = await language.getMatches(syntax, code);
+	const functions = matches.filter(m => m.type === 'function');
+	assert.ok(functions.length > 0, 'Should find url function');
+});
+test('functions - calc', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'width: calc(100% - 20px);';
+	const matches = await language.getMatches(syntax, code);
+	const functions = matches.filter(m => m.type === 'function');
+	assert.ok(functions.length > 0, 'Should find calc function');
+});
+test('media query', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = '@media screen and (max-width: 600px) { .class { color: red; } }';
+	const matches = await language.getMatches(syntax, code);
+	assert.ok(matches.length > 0, 'Should parse media query');
+});
+test('multiple properties', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = `div {
+		color: red;
+		background-color: blue;
+		margin: 10px;
+		padding: 5px;
+	}`;
+	const matches = await language.getMatches(syntax, code);
+	const properties = matches.filter(m => m.type === 'property');
+	assert.ok(properties.length >= 4, 'Should find multiple properties');
+});
+test('complex selector', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div.class#id[attr="value"]:hover > span { color: red; }';
+	const matches = await language.getMatches(syntax, code);
+	const selectors = matches.filter(m => m.type === 'selector');
+	assert.ok(selectors.length > 0, 'Should parse complex selector');
+});
+test('vendor prefixes', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { -webkit-transform: rotate(45deg); }';
+	const matches = await language.getMatches(syntax, code);
+	const properties = matches.filter(m => m.type === 'property');
+	assert.ok(properties.length > 0, 'Should find vendor prefixed property');
+});
+test('keyframes', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = '@keyframes slide { from { left: 0; } to { left: 100px; } }';
+	const matches = await language.getMatches(syntax, code);
+	assert.ok(matches.length > 0, 'Should parse keyframes');
+});
+test('color box - color matches have process function', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: #ff0000; }';
+	const matches = await language.getMatches(syntax, code);
+	const colorMatches = matches.filter(m => m.type === 'color');
+	assert.ok(colorMatches.length > 0, 'Should find color matches');
+	// Check that at least one color match has a process function
+	const matchWithProcess = colorMatches.find(
+		m => m.expression && m.expression.process
+	);
+	assert.ok(matchWithProcess, 'Color match should have process function');
+	assert.strictEqual(
+		typeof matchWithProcess.expression.process,
+		'function',
+		'Process should be a function'
+	);
+});
+test('color box - process function creates colour-box element', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: #ff0000; }';
+	const matches = await language.getMatches(syntax, code);
+	const colorMatch = matches.find(
+		m => m.type === 'color' && m.expression && m.expression.process
+	);
+	assert.ok(colorMatch, 'Should find color match with process function');
+	// Create a test element
+	const element = document.createElement('span');
+	element.textContent = '#ff0000';
+	// Call the process function
+	const result = colorMatch.expression.process(element, colorMatch);
+	// Verify the color box was created
+	assert.strictEqual(result, element, 'Should return the element');
+	const colourBox = element.querySelector('.colour-box');
+	assert.ok(colourBox, 'Should create colour-box element');
+	const sample = colourBox.querySelector('.sample');
+	assert.ok(sample, 'Should create sample element inside colour-box');
+	assert.strictEqual(
+		sample.style.backgroundColor,
+		'rgb(255, 0, 0)',
+		'Should set backgroundColor to the color value'
+	);
+});
+test('color box - handles named colors', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: AliceBlue; }';
+	const matches = await language.getMatches(syntax, code);
+	const colorMatch = matches.find(
+		m => m.type === 'color' && m.expression && m.expression.process
+	);
+	assert.ok(colorMatch, 'Should find color match with process function');
+	const element = document.createElement('span');
+	element.textContent = 'AliceBlue';
+	colorMatch.expression.process(element, colorMatch);
+	const sample = element.querySelector('.sample');
+	assert.ok(sample, 'Should create sample element for named color');
+	assert.strictEqual(
+		sample.style.backgroundColor,
+		'aliceblue',
+		'Should set backgroundColor to named color'
+	);
+});
+test('color box - handles rgba colors', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: rgba(255, 0, 0, 0.5); }';
+	const matches = await language.getMatches(syntax, code);
+	const colorMatch = matches.find(
+		m => m.type === 'color' && m.expression && m.expression.process
+	);
+	assert.ok(colorMatch, 'Should find color match with process function');
+	const element = document.createElement('span');
+	element.textContent = 'rgba(255, 0, 0, 0.5)';
+	colorMatch.expression.process(element, colorMatch);
+	const sample = element.querySelector('.sample');
+	assert.ok(sample, 'Should create sample element for rgba color');
+	assert.strictEqual(
+		sample.style.backgroundColor,
+		'rgba(255, 0, 0, 0.5)',
+		'Should set backgroundColor to rgba value'
+	);
+});
+test('color box - returns element unchanged if no textContent', async () => {
+	const syntax = new Syntax();
+	registerCSS(syntax);
+	const language = await syntax.getLanguage('css');
+	const code = 'div { color: #ff0000; }';
+	const matches = await language.getMatches(syntax, code);
+	const colorMatch = matches.find(
+		m => m.type === 'color' && m.expression && m.expression.process
+	);
+	assert.ok(colorMatch, 'Should find color match with process function');
+	const element = document.createElement('span');
+	// No textContent set
+	const result = colorMatch.expression.process(element, colorMatch);
+	assert.strictEqual(result, element, 'Should return the element');
+	const colourBox = element.querySelector('.colour-box');
+	assert.strictEqual(
+		colourBox,
+		null,
+		'Should not create colour-box if no textContent'
+	);
+});

data/public/_components/@socketry/syntax/test/Syntax/Language/diff.js ADDED Viewed

@@ -0,0 +1,206 @@
+/**
+ * Tests for Diff language syntax highlighting
+ */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {JSDOM} from 'jsdom';
+import Syntax from '../../../Syntax.js';
+// Set up JSDOM
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
+global.window = dom.window;
+global.document = dom.window.document;
+global.HTMLElement = dom.window.HTMLElement;
+global.customElements = dom.window.customElements;
+const syntax = new Syntax();
+test('Diff language can be registered', async () => {
+	const language = await syntax.getResource('diff');
+	assert.ok(language);
+	assert.equal(language.name, 'diff');
+});
+test('Diff can be registered with patch alias', async () => {
+	const diff = await syntax.getResource('diff');
+	const patch = await syntax.getResource('patch');
+	assert.equal(diff, patch);
+});
+test('Diff can match added file headers (+++)', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, '+++ b/file.txt');
+	assert.ok(matches.length > 0);
+	const match = matches.find(m => m.type === 'add');
+	assert.ok(match);
+	assert.equal(match.value, '+++ b/file.txt');
+});
+test('Diff can match removed file headers (---)', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, '--- a/file.txt');
+	assert.ok(matches.length > 0);
+	const match = matches.find(m => m.type === 'del');
+	assert.ok(match);
+	assert.equal(match.value, '--- a/file.txt');
+});
+test('Diff can match chunk headers (@@)', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, '@@ -1,3 +1,4 @@');
+	assert.ok(matches.length > 0);
+	const match = matches.find(m => m.type === 'offset');
+	assert.ok(match);
+	assert.equal(match.value, '@@ -1,3 +1,4 @@');
+});
+test('Diff can match chunk headers with context', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(
+		syntax,
+		'@@ -10,7 +10,8 @@ function test() {'
+	);
+	assert.ok(matches.length > 0);
+	const match = matches.find(m => m.type === 'offset');
+	assert.ok(match);
+	assert.ok(match.value.includes('@@'));
+});
+test('Diff can match inserted lines', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, '+This line was added');
+	assert.ok(matches.length > 0);
+	const match = matches.find(m => m.type === 'insert');
+	assert.ok(match);
+	assert.equal(match.value, '+This line was added');
+});
+test('Diff can match removed lines', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, '-This line was removed');
+	assert.ok(matches.length > 0);
+	const match = matches.find(m => m.type === 'remove');
+	assert.ok(match);
+	assert.equal(match.value, '-This line was removed');
+});
+test('Diff does not match +++ as insert', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, '+++ b/file.txt');
+	const insert = matches.find(m => m.type === 'insert');
+	assert.ok(!insert, 'Should not match +++ as insert');
+	const add = matches.find(m => m.type === 'add');
+	assert.ok(add, 'Should match +++ as add');
+});
+test('Diff does not match --- as remove', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, '--- a/file.txt');
+	const remove = matches.find(m => m.type === 'remove');
+	assert.ok(!remove, 'Should not match --- as remove');
+	const del = matches.find(m => m.type === 'del');
+	assert.ok(del, 'Should match --- as del');
+});
+test('Diff can process complete diff to HTML', async () => {
+	const language = await syntax.getResource('diff');
+	const diff = `--- a/test.js
++++ b/test.js
+@@ -1,3 +1,4 @@
+ function hello() {
+-  console.log("old");
++  console.log("new");
++  return true;
+ }`;
+	const html = await language.process(syntax, diff);
+	assert.ok(html instanceof HTMLElement);
+	const text = html.textContent;
+	assert.ok(text.includes('hello'));
+	assert.ok(text.includes('old'));
+	assert.ok(text.includes('new'));
+});
+test('Diff highlights file headers correctly', async () => {
+	const language = await syntax.getResource('diff');
+	const diff = `--- a/README.md
++++ b/README.md`;
+	const html = await language.process(syntax, diff);
+	const htmlStr = html.innerHTML;
+	assert.ok(htmlStr.includes('del'));
+	assert.ok(htmlStr.includes('add'));
+	assert.ok(htmlStr.includes('README.md'));
+});
+test('Diff highlights multiple chunks', async () => {
+	const language = await syntax.getResource('diff');
+	const diff = `@@ -1,2 +1,2 @@
+-old line 1
++new line 1
+@@ -10,2 +10,3 @@
+ context
++added line`;
+	const html = await language.process(syntax, diff);
+	const htmlStr = html.innerHTML;
+	assert.ok(htmlStr.includes('offset'));
+	assert.ok(htmlStr.includes('remove'));
+	assert.ok(htmlStr.includes('insert'));
+});
+test('Diff can build a syntax tree', async () => {
+	const language = await syntax.getResource('diff');
+	const diff = `--- a/file.txt
++++ b/file.txt
+@@ -1 +1 @@
+-old
++new`;
+	const tree = await language.buildTree(syntax, diff, 0);
+	assert.ok(tree);
+	assert.ok(tree.children.length > 0);
+});
+test('Diff handles empty lines correctly', async () => {
+	const language = await syntax.getResource('diff');
+	const diff = ` unchanged line
++added line
+ another unchanged`;
+	const html = await language.process(syntax, diff);
+	const text = html.textContent;
+	assert.ok(text.includes('unchanged'));
+	assert.ok(text.includes('added'));
+});
+test('Diff handles context lines (no prefix)', async () => {
+	const language = await syntax.getResource('diff');
+	const matches = await language.getMatches(syntax, ' context line');
+	// Context lines (starting with space) should not have special highlighting
+	const specialMatches = matches.filter(m =>
+		['insert', 'remove', 'add', 'del', 'offset'].includes(m.type)
+	);
+	assert.equal(specialMatches.length, 0);
+});
+test('Diff processes realistic git diff', async () => {
+	const language = await syntax.getResource('diff');
+	const diff = `diff --git a/src/main.js b/src/main.js
+index 1234567..abcdefg 100644
+--- a/src/main.js
++++ b/src/main.js
+@@ -15,6 +15,7 @@ function initialize() {
+   config.load();
+   database.connect();
++  logger.init();
+   server.start();
+ }`;
+	const html = await language.process(syntax, diff);
+	assert.ok(html instanceof HTMLElement);
+	const htmlStr = html.innerHTML;
+	assert.ok(htmlStr.includes('main.js'));
+	assert.ok(htmlStr.includes('initialize'));
+});