@jesscss/core 2.0.0-alpha.5 → 2.0.0-alpha.6

package/src/tree/__tests__/selector-complex.test.ts

@@ -0,0 +1,120 @@
+import { any, expr, sel, compound, el, co, pseudo, sellist } from '../index.js';
+import { Context } from '../../context.js';
+
+let context: Context;
+
+describe('Complex selector', () => {
+  beforeEach(() => {
+    context = new Context();
+  });
+
+  describe('keys', () => {
+    test('simple complex', async () => {
+      let sel1 = sel([
+        compound([
+          el('.one'),
+          el('.two')
+        ]),
+        co('>'),
+        el('.three')
+      ]);
+      await sel1.eval(context);
+      expect(sel1.keySet.equals(context.selectorBits.getBitset(['.one', '.two', '>', '.three']))).toBe(true);
+      expect(sel1.visibleKeySet.equals(context.selectorBits.getBitset(['.one', '.two', '>', '.three']))).toBe(true);
+    });
+    test('nested complex (w/ relative :is)', async () => {
+      let sel2 = sel([
+        compound([
+          pseudo({ name: ':is', arg: el('a') }),
+          el('#id'),
+          pseudo({ name: ':is', arg: sel([co('>'), compound([el('.two'), el('.one')])]) as any }) as any
+        ])
+      ]);
+      await sel2.eval(context);
+      expect(sel2.keySet.equals(context.selectorBits.getBitset(['a', '#id', '>', '.two', '.one']))).toBe(true);
+      expect(sel2.visibleKeySet.equals(context.selectorBits.getBitset(['a', '#id', '>', '.two', '.one']))).toBe(true);
+    });
+    test('nested complex (w/o relative :is)', async () => {
+      let sel2 = sel([
+        compound([
+          pseudo({ name: ':is', arg: el('a') }),
+          el('#id'),
+          pseudo({ name: ':is', arg: sel([compound([el('.two'), el('.one')])]) as any }) as any
+        ])
+      ]);
+      await sel2.eval(context);
+      expect(sel2.keySet.equals(context.selectorBits.getBitset(['a', '#id', '.two', '.one']))).toBe(true);
+      expect(sel2.visibleKeySet.equals(context.selectorBits.getBitset(['a', '#id', '.two', '.one']))).toBe(true);
+    });
+    test(':is w/ selector list', async () => {
+      let sel2 = sel([
+        compound([
+          pseudo({ name: ':is', arg: sellist([el('a'), el('b')]) }),
+          el('#id'),
+          pseudo({ name: ':is', arg: sel([compound([el('.two'), el('.one')])]) as any }) as any
+        ])
+      ]);
+      await sel2.eval(context);
+      expect(sel2.keySet.equals(context.selectorBits.getBitset(['a', 'b', '#id', '.two', '.one']))).toBe(true);
+      expect(sel2.visibleKeySet.equals(context.selectorBits.getBitset(['a', 'b', '#id', '.two', '.one']))).toBe(true);
+    });
+
+    test(':is w/ complex selector list', async () => {
+      let sel2 = sel([
+        compound([
+          pseudo({
+            name: ':is',
+            arg: sellist([
+              sel([el('a'), co('>'), el('b')]),
+              sel([el('c'), co('>'), el('d')])
+            ])
+          }),
+          el('#id'),
+          pseudo({ name: ':is', arg: sel([compound([el('.two'), el('.one')])]) as any }) as any
+        ])
+      ]);
+      await sel2.eval(context);
+      expect(sel2.keySet.equals(context.selectorBits.getBitset(['a', 'b', 'c', 'd', '#id', '>', '.two', '.one']))).toBe(true);
+      expect(sel2.visibleKeySet.equals(context.selectorBits.getBitset(['a', 'b', 'c', 'd', '#id', '>', '.two', '.one']))).toBe(true);
+    });
+  });
+
+  describe('evaluation', () => {
+    it('preserves complex selector serialization while evaluating nested selector children', async () => {
+      const node = sel([
+        pseudo({
+          name: ':not',
+          arg: expr(any('blue'))
+        }),
+        co('>'),
+        el('.target')
+      ]);
+
+      const evald = await node.eval(context);
+
+      expect(evald.toTrimmedString({ context })).toBe(':not(blue) > .target');
+    });
+
+    it('does not re-parent the canonical child when a complex selector collapses to one child with patching', async () => {
+      const child = el('.target');
+      const node = sel([child]);
+
+      expect(child.parent).toBe(node);
+
+      const evald = await node.eval(context);
+
+      expect(evald).not.toBe(child);
+      expect(evald.toTrimmedString({ context })).toBe('.target');
+      expect(child.parent).toBe(node);
+    });
+
+    it('does not materialize a non-array value back onto the node when valueOf is called', () => {
+      const node = sel([el('.one')]) as any;
+      node.value = el('.solo');
+
+      expect(node.valueOf()).toBe('.solo');
+      expect(Array.isArray(node.value)).toBe(false);
+      expect(node.value.valueOf()).toBe('.solo');
+    });
+  });
+});

package/src/tree/__tests__/selector-compound.test.ts

@@ -0,0 +1,74 @@
+import { any, compound, el, expr, pseudo } from '../index.js';
+import { Context } from '../../context.js';
+
+let context: Context;
+
+/**
+ * @todo - add tests for list bubbling
+ */
+describe('Compound Selector', () => {
+  beforeEach(() => {
+    context = new Context();
+  });
+
+  describe('equality', () => {
+    test('same value', () => {
+      let sel1 = (compound([
+        el('a'),
+        el('#id'),
+        el('.class')
+      ]) as any).valueOf();
+      let sel2 = (compound([
+        el('a'),
+        el('#id'),
+        el('.class')
+      ]) as any).valueOf();
+      expect(sel1).toEqual(sel2);
+    });
+  });
+
+  describe('keys', () => {
+    test('simple compound', async () => {
+      let sel1 = compound([
+        el('a'),
+        el('#id'),
+        el('.class')
+      ]);
+      await sel1.eval(context);
+      expect(sel1.keySet.equals(context.selectorBits.getBitset(['a', '#id', '.class']))).toBe(true);
+      expect(sel1.visibleKeySet.equals(context.selectorBits.getBitset(['a', '#id', '.class']))).toBe(true);
+    });
+
+    test('nested compound', async () => {
+      /** :is(a)#id:is(.one.two) */
+      const sel1 = pseudo({ name: ':is', arg: el('a') });
+      let sel2 = compound([
+        sel1,
+        el('#id'),
+        pseudo({ name: ':is', arg: compound([el('.two'), el('.one')]) })
+      ]);
+
+      await sel2.eval(context);
+      expect(sel1.keySet.equals(context.selectorBits.getBitset(['a']))).toBe(true);
+      expect(sel1.visibleKeySet.equals(context.selectorBits.getBitset(['a']))).toBe(true);
+      expect(sel2.keySet.equals(context.selectorBits.getBitset(['a', '#id', '.two', '.one']))).toBe(true);
+      expect(sel2.visibleKeySet.equals(context.selectorBits.getBitset(['a', '#id', '.two', '.one']))).toBe(true);
+    });
+  });
+
+  describe('evaluation', () => {
+    it('preserves compound serialization while evaluating nested selector children', async () => {
+      const node = compound([
+        el('button'),
+        pseudo({
+          name: ':not',
+          arg: expr(any('blue'))
+        })
+      ]);
+
+      const evald = await node.eval(context);
+
+      expect(evald.toTrimmedString({ context })).toBe('button:not(blue)');
+    });
+  });
+});

package/src/tree/__tests__/selector-interpolated.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+import { any, expr, interpolated, interpolatedSelector } from '../index.js';
+import { Context } from '../../context.js';
+import { addEdge, getEdge } from '../util/cursor.js';
+import type { RenderKey } from '../node.js';
+
+describe('InterpolatedSelector', () => {
+  it('serializes the wrapped interpolated selector', () => {
+    const node = interpolatedSelector(interpolated({
+      source: '.%%',
+      replacements: [any('button')]
+    }));
+
+    expect(node.toTrimmedString()).toBe('.button');
+  });
+
+  it('evaluates the wrapped interpolated selector to a selector node', async () => {
+    const ctx = new Context();
+    const node = interpolatedSelector(interpolated({
+      source: '.%%',
+      replacements: [expr(any('button'))]
+    }));
+
+    const evald = await node.eval(ctx);
+
+    expect(evald.toTrimmedString()).toBe('.button');
+  });
+
+  it('keeps canonical child access direct while a render key selects an alternate child', () => {
+    const canonical = interpolated({
+      source: '.%%',
+      replacements: [any('button')]
+    });
+    const alternate = interpolated({
+      source: '.%%',
+      replacements: [any('link')]
+    });
+    const node = interpolatedSelector(canonical);
+    const key = Symbol('selector-interpolated') as RenderKey;
+    const cursor = { node, renderKey: key };
+
+    expect(node.value).toBe(canonical);
+    expect(getEdge(cursor, 'value')?.node).toBe(canonical);
+
+    addEdge(node, 'value', key, alternate);
+
+    expect(node.value).toBe(canonical);
+    expect(getEdge(cursor, 'value')?.node).toBe(alternate);
+  });
+});

package/src/tree/__tests__/selector-list.test.ts

@@ -0,0 +1,59 @@
+import { sel, sellist, el, co, pseudo } from '../index.js';
+import { Context } from '../../context.js';
+
+/**
+ * @todo - add tests for list bubbling
+ */
+describe('Selector list', () => {
+  const context = new Context();
+
+  describe('equality', () => {
+    /** @todo - add test for non-equality */
+    test('basic list equality', () => {
+      /** a b, a c */
+      let sel1 = sellist([
+        sel([
+          el('a'),
+          co(' '),
+          el('b')
+        ]),
+        sel([
+          el('a'),
+          co(' '),
+          el('c')
+        ])
+      ]);
+
+      let sel2 = sellist([
+        sel([
+          el('a'),
+          co(' '),
+          el('c')
+        ]),
+        sel([
+          el('a'),
+          co(' '),
+          el('b')
+        ])
+      ]);
+
+      expect((sel1 as any).compare(sel2)).toBe(0);
+      expect((sel2 as any).compare(sel1)).toBe(0);
+    });
+  });
+
+  describe('evaluation', () => {
+    test('flattens top-level :is() items during eval', async () => {
+      const node = sellist([
+        pseudo({
+          name: ':is',
+          arg: sellist([el('.a'), el('.b')])
+        })
+      ]);
+
+      const evald = await node.eval(context);
+
+      expect(evald.toTrimmedString()).toBe('.a,\n.b');
+    });
+  });
+});

package/src/tree/__tests__/selector-pseudo.test.ts

@@ -0,0 +1,23 @@
+import { any, expr, pseudo } from '../index.js';
+import { Context } from '../../context.js';
+
+let context: Context;
+
+describe('PseudoSelector', () => {
+  beforeEach(() => {
+    context = new Context();
+  });
+
+  describe('evaluation', () => {
+    it('evaluates the pseudo argument before serialization', async () => {
+      const node = pseudo({
+        name: ':not',
+        arg: expr(any('blue'))
+      });
+
+      const evald = await node.eval(context);
+
+      expect(evald.toTrimmedString({ context })).toBe(':not(blue)');
+    });
+  });
+});

package/src/tree/__tests__/selector.test.ts

@@ -0,0 +1,182 @@
+// import { Selector } from '../selector-sequence'
+import { sel, el, co, pseudo, attr, any, quoted, sellist, compound } from '../index.js';
+import { isNode } from '../util/is-node.js';
+// import type { Class } from 'type-fest'
+// import type { Node } from '../node.js'
+
+/** @todo - move to https://github.com/SamVerschueren/tsd */
+// test('Test types', () => {
+//   expectTypeOf(Selector).toMatchTypeOf<Class<Node>>()
+// })
+
+describe('Selector', () => {
+  describe('serialization', () => {
+    it('should serialize to a selector', () => {
+      let rule = sel([
+        el('.foo'),
+        co('>'),
+        el('#bar')
+      ]);
+      expect(`${rule}`).toBe('.foo > #bar');
+      rule = sel([
+        el('.foo'),
+        el('#bar')
+      ]);
+      expect(`${rule}`).toBe('.foo#bar');
+      rule = sel([
+        el('.foo'),
+        co(' '),
+        el('#bar')
+      ]);
+      expect(`${rule}`).toBe('.foo #bar');
+    });
+  });
+
+  describe('equality', () => {
+    test('normalized attribute selectors should be equal', () => {
+      const attr1 = attr({
+        name: 'foo',
+        op: '=',
+        value: any('bar')
+      });
+      const attr2 = attr({
+        name: 'foo',
+        op: '=',
+        value: quoted(any('bar'))
+      });
+      expect(attr1.compare(attr2)).toBe(0);
+    });
+
+    test('equivalent node strings should be equal', () => {
+      const attr1 = attr({
+        name: 'foo',
+        op: '=',
+        value: any('bar')
+      });
+      const attr2 = any('[foo="bar"]');
+      expect(attr1.compare(attr2)).toBe(0);
+    });
+
+    test('sequences should be equal', () => {
+      const sel1 = sel([
+        el('.foo'),
+        co('>'),
+        el('#bar')
+      ]);
+      let co2 = co('>');
+      co2.pre = 1;
+      co2.post = 1;
+      const sel2 = sel([
+        el('.foo'),
+        co2,
+        el('#bar')
+      ]);
+      expect(sel1.compare(sel2 as any)).toBe(0);
+    });
+
+    test('inverted selector sequences are equal', () => {
+      const sel1 = compound([
+        el('.foo'),
+        el('#bar')
+      ]);
+      const sel2 = compound([
+        el('#bar'),
+        el('.foo')
+      ]);
+      expect((sel1 as any).compare(sel2)).toBe(0);
+    });
+
+    test('out of order lists are equal', () => {
+      const list1 = sellist([
+        el('.foo'),
+        el('#bar')
+      ]);
+
+      const list2 = sellist([
+        el('#bar'),
+        el('.foo')
+      ]);
+
+      expect((list1 as any).compare(list2)).toBe(0);
+    });
+
+    test(':is() should match w/o :is()', () => {
+      // .foo {}
+      // :is(.foo) {}
+      const sel1 = el('.foo');
+      const sel2 = pseudo({
+        name: ':is',
+        arg: el('.foo')
+      });
+      expect(sel1.compare(sel2)).toBe(0);
+    });
+
+    test(':is() should match w/o :is()', () => {
+      // .foo, .bar {}
+      const sel1 = sellist([el('.foo'), el('.bar')]);
+      // :is(.foo, .bar) {}
+      const sel2 = pseudo({
+        name: ':is',
+        arg: sellist([el('.foo'), el('.bar')])
+      });
+      // :is(.foo), .bar {}
+      const sel3 = sellist([
+        pseudo({
+          name: ':is',
+          arg: el('.foo')
+        }),
+        el('.bar')
+      ]);
+
+      // .foo, .bar {}
+      // :is(.foo, .bar) {}
+      // match .foo w/ .foo
+      // .bar {}
+      // :is(.bar) {}
+      // match .bar w/ .bar
+      // {}
+      // :is() {} is reduced to {}
+      // matches are exhausted, so the selectors are equal
+      expect((sel1 as any).compare(sel2)).toBe(0);
+      expect((sel1 as any).compare(sel3)).toBe(0);
+      expect(sel2.compare(sel3)).toBe(0);
+    });
+
+    test(':is() should match w/o :is()', () => {
+      // a b, a c {}
+      const sel1 = sellist([
+        sel([el('a'), co(' '), el('b')]),
+        sel([el('a'), co(' '), el('c')])
+      ]);
+      // a :is(b, c) {}
+      const sel2 = sel([
+        el('a'),
+        co(' '),
+        pseudo({
+          name: ':is',
+          arg: sellist([el('b'), el('c')])
+        })
+      ]);
+
+      /**
+       * Given:
+       * A. a b, a c {}
+       * B. a :is(b, c) {}
+       *
+       * Test for exhaustiveness of combinations. i.e.
+       *   1. First, we test if element 'a' from A is within B. If not, exit.
+       *      (During eval, should we build a map of all simple selectors?)
+       *   2. We collect all complex selectors from each selector list,
+       *      including within :is() (but not :where(), which is matched on its own)
+       *      Note, we don't want to create a new list of cloned selectors,
+       *      but instead a "linked list" (or tuple?) of all complex selector combinations.
+       *   3. Starting with A, test each complex selector (linked list) against each
+       *      complex selector (linked list) in B. If a match is found, remove it from
+       *      the list of linked lists.
+       *   4. If all linked lists are exhausted, the selectors are equal.
+       */
+
+      expect((sel1 as any).compare(sel2)).toBe(0);
+    });
+  });
+});