decue 1.0.1 → 1.1.0

package/test/placeholders.test.js

@@ -0,0 +1,396 @@
+import { expect } from '@esm-bundle/chai';
+import { createTemplate, createElement, getContentRoot } from './test-helpers.js';
+
+// Unique counter for element names
+let elementCounter = 0;
+function uniqueName(prefix) {
+    return `${prefix}-${++elementCounter}`;
+}
+
+// Clean up after each test
+afterEach(() => {
+    // Remove all test templates and elements
+    document.querySelectorAll('template[decue]').forEach(el => el.remove());
+    document.querySelectorAll('[data-test-element]').forEach(el => el.remove());
+});
+
+describe('placeholders', () => {
+
+  // Execute each test for all three custom element variants:
+  // 1. No shadow DOM
+  // 2. Shadow DOM open
+  // 3. Shadow DOM closed
+  ['none', 'open', 'closed'].forEach(shadow => {
+    describe("shadowmode: " + shadow, function() {
+        it('element with no attributes leaves placeholders unchanged', function () {
+            const name = uniqueName('test-placeholder-unchanged');
+            createTemplate(name, '<div data-value="{myattr}">Text with {myattr}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // For closed shadow, verify element exists and is connected
+            expect(el).to.exist;
+            expect(el.isConnected).to.be.true;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('div');
+                expect(div).to.exist;
+                // Placeholder should remain unchanged when attribute is not set
+                expect(div.getAttribute('data-value')).to.equal('{myattr}');
+                expect(div.textContent).to.equal('Text with {myattr}');
+            } else {
+                // For closed shadow, verify the element responds to the attribute
+                // by checking that the attribute is in observedAttributes
+                const elementClass = customElements.get(name);
+                expect(elementClass.observedAttributes).to.include('myattr');
+            }
+        });
+
+        it('attribute placeholder is replaced when attribute is provided', function () {
+            const name = uniqueName('test-attribute-placeholder-replaced');
+            createTemplate(name, '<div data-value="{myattr}">Text with {myattr}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                myattr: 'Hello World',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Test that attribute changes trigger events for closed shadow too
+            let attributeChanged = false;
+            if (shadow === 'closed') {
+                el.addEventListener('attributechange', () => {
+                    attributeChanged = true;
+                });
+            }
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('div');
+                expect(div).to.exist;
+                // Placeholder should be replaced with attribute value
+                expect(div.getAttribute('data-value')).to.equal('Hello World');
+                expect(div.textContent).to.equal('Text with Hello World');
+            } else {
+                // For closed shadow, test that the element responds to attribute changes
+                el.setAttribute('myattr', 'Updated Value');
+                expect(attributeChanged).to.be.true;
+                expect(el.getAttribute('myattr')).to.equal('Updated Value');
+            }
+        });
+
+        it('text content placeholder is replaced', function () {
+            const name = uniqueName('test-text-placeholder');
+            createTemplate(name, '<div class="content">Hello {name}!</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                name: 'World',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                // Placeholder in text content should be replaced
+                expect(div.textContent).to.equal('Hello World!');
+            } else {
+                // For closed shadow, verify element exists and is connected
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('multiple placeholders are all replaced', function () {
+            const name = uniqueName('test-multiple-placeholders');
+            createTemplate(name, '<div data-greeting="{greeting}" data-name="{name}">{greeting} {name}!</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                greeting: 'Hello',
+                name: 'World',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('div');
+                expect(div).to.exist;
+                expect(div.getAttribute('data-greeting')).to.equal('Hello');
+                expect(div.getAttribute('data-name')).to.equal('World');
+                expect(div.textContent).to.equal('Hello World!');
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('placeholders update when attributes change', function () {
+            const name = uniqueName('test-placeholder-update');
+            createTemplate(name, '<div class="message">Message: {greeting}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            // Create element
+            const el = createElement(name, { 
+                'data-test-element': '',
+                greeting: 'Hello',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.message');
+                expect(div).to.exist;
+                // Initial placeholder should be replaced
+                expect(div.textContent).to.equal('Message: Hello');
+                
+                // Update attribute
+                el.setAttribute('greeting', 'Hi there');
+                
+                // Text content should update synchronously
+                expect(div.textContent).to.equal('Message: Hi there');
+                
+                // Update again
+                el.setAttribute('greeting', 'Goodbye');
+                expect(div.textContent).to.equal('Message: Goodbye');
+            } else {
+                // For closed shadow, verify element exists and responds to attribute changes
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+                
+                // Test that attribute changes trigger events
+                let attributeChanged = false;
+                el.addEventListener('attributechange', () => {
+                    attributeChanged = true;
+                });
+                
+                el.setAttribute('greeting', 'Updated');
+                expect(attributeChanged).to.be.true;
+            }
+        });
+
+        it('attribute placeholders update when attributes change', function () {
+            const name = uniqueName('test-attribute-placeholder-update');
+            createTemplate(name, '<div class="content" data-value="{myattr}">Value: {myattr}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                myattr: 'initial',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.getAttribute('data-value')).to.equal('initial');
+                expect(div.textContent).to.equal('Value: initial');
+                
+                // Update attribute
+                el.setAttribute('myattr', 'updated');
+                expect(div.getAttribute('data-value')).to.equal('updated');
+                expect(div.textContent).to.equal('Value: updated');
+                
+                // Update again
+                el.setAttribute('myattr', 'final');
+                expect(div.getAttribute('data-value')).to.equal('final');
+                expect(div.textContent).to.equal('Value: final');
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('placeholder with property access on attribute value', function () {
+            const name = uniqueName('test-property-access');
+            createTemplate(name, '<div class="content">Length: {text.length}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'hello',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.textContent).to.equal('Length: 5');
+                
+                // Update attribute
+                el.setAttribute('text', 'longer text');
+                expect(div.textContent).to.equal('Length: 11');
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('placeholder with method call on attribute value', function () {
+            const name = uniqueName('test-method-call');
+            createTemplate(name, '<div class="content">Upper: {text.toUpperCase}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'hello world',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.textContent).to.equal('Upper: HELLO WORLD');
+                
+                // Update attribute
+                el.setAttribute('text', 'goodbye');
+                expect(div.textContent).to.equal('Upper: GOODBYE');
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('placeholder with chained methods', function () {
+            const name = uniqueName('test-chained-methods');
+            createTemplate(name, '<div class="content">{text.trim.toUpperCase}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: '  hello  ',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.textContent).to.equal('HELLO');
+                
+                // Update attribute
+                el.setAttribute('text', '  world  ');
+                expect(div.textContent).to.equal('WORLD');
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('placeholder with element property reference', function () {
+            const name = uniqueName('test-element-property');
+            createTemplate(name, '<div class="content">Tag: {.tagName}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.textContent).to.equal(`Tag: ${name.toUpperCase()}`);
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('placeholder mixing registered function with method', function () {
+            const name = uniqueName('test-mixed-func-method');
+            
+            // Register a function
+            decue.registeredFunctions['addPrefix'] = function(value) {
+                return 'PREFIX_' + value;
+            };
+            
+            createTemplate(name, '<div class="content">{text|addPrefix.toUpperCase}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'test',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.textContent).to.equal('PREFIX_TEST');
+                
+                // Update attribute
+                el.setAttribute('text', 'data');
+                expect(div.textContent).to.equal('PREFIX_DATA');
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+            
+            // Cleanup
+            delete decue.registeredFunctions['addPrefix'];
+        });
+
+        it('placeholder with complex pipe chain', function () {
+            const name = uniqueName('test-complex-chain');
+            
+            // Register multiple functions
+            decue.registeredFunctions['wrap'] = function(value) {
+                return `[${value}]`;
+            };
+            
+            decue.registeredFunctions['double'] = function(value) {
+                return value + value;
+            };
+            
+            createTemplate(name, '<div class="content">{text.trim|wrap|double.toUpperCase}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: '  abc  ',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                // "  abc  " -> trim -> "abc" -> wrap -> "[abc]" -> double -> "[abc][abc]" -> toUpperCase -> "[ABC][ABC]"
+                expect(div.textContent).to.equal('[ABC][ABC]');
+            } else {
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+            
+            // Cleanup
+            delete decue.registeredFunctions['wrap'];
+            delete decue.registeredFunctions['double'];
+        });
+      });
+    });
+});

package/test/predefined.test.js

@@ -0,0 +1,131 @@
+import { expect } from '@esm-bundle/chai';
+import { createTemplate, createElement, getContentRoot } from './test-helpers.js';
+
+// Unique counter for element names
+let elementCounter = 0;
+function uniqueName(prefix) {
+    return `${prefix}-${++elementCounter}`;
+}
+
+// Clean up after each test
+afterEach(() => {
+    // Remove all test templates and elements
+    document.querySelectorAll('template[decue]').forEach(el => el.remove());
+    document.querySelectorAll('[data-test-element]').forEach(el => el.remove());
+});
+
+describe('predefined', () => {
+
+  // Execute each test for all three custom element variants:
+  // 1. No shadow DOM
+  // 2. Shadow DOM open
+  // 3. Shadow DOM closed
+  ['none', 'open', 'closed'].forEach(shadow => {
+    describe("shadowmode: " + shadow, function() {
+        it('predefined elements work', function () {
+            const name = uniqueName('test-predefined');
+            
+            // Define element first (before template exists)
+            decue.defineElement(false, name, null, false, []);
+            
+            // Verify the custom element is defined
+            expect(customElements.get(name)).to.exist;
+            
+            // The element class should be registered
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.be.a('function');
+            expect(elementClass.observedAttributes).to.be.an('array');
+        });
+
+        it('observed attributes can be declared on the script element', function () {
+            const name = uniqueName('test-predefined-observed');
+            
+            // Define element with explicit observed attributes
+            decue.defineElement(false, name, null, false, ['greeting', 'name']);
+            
+            // Verify the custom element is defined with correct observedAttributes
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.exist;
+            expect(elementClass.observedAttributes).to.include('greeting');
+            expect(elementClass.observedAttributes).to.include('name');
+            
+            // Verify the attributes are in the array
+            expect(elementClass.observedAttributes.length).to.be.at.least(2);
+        });
+
+        it('attributes get observed (with MutationObserver) even if not declared on the script element', function (done) {
+            const name = uniqueName('test-predefined-mutation');
+            
+            // Define element WITHOUT declaring observed attributes initially
+            decue.defineElement(false, name, null, false, []);
+            
+            // Verify the element is defined
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.exist;
+            
+            // observedAttributes should be an empty array initially since no template has been processed
+            // and no attributes were explicitly declared
+            expect(elementClass.observedAttributes).to.be.an('array');
+            expect(elementClass.observedAttributes.length).to.equal(0);
+            
+            // Create template with placeholder BEFORE creating the element
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.innerHTML = '<div class="content">Message: {message}</div><slot></slot>';
+            document.body.insertBefore(template, document.body.firstChild);
+            
+            // Create element instance with attribute
+            const el = createElement(name, { 
+                'data-test-element': '',
+                message: 'Initial',
+                ...(shadow !== 'none' ? { shadow } : {})
+            }, '<span>some content</span>');
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.textContent).to.equal('Message: Initial');
+                
+                // Update attribute - should be observed via MutationObserver
+                // since 'message' was not in observedAttributes
+                el.setAttribute('message', 'Updated');
+                
+                // Wait for MutationObserver to trigger update
+                setTimeout(() => {
+                    expect(div.textContent).to.equal('Message: Updated');
+                    
+                    // Update again to verify it continues working
+                    el.setAttribute('message', 'Final');
+                    
+                    setTimeout(() => {
+                        expect(div.textContent).to.equal('Message: Final');
+                        
+                        template.remove();
+                        done();
+                    }, 50);
+                }, 500);
+            } else {
+                // For closed shadow, verify element exists and responds to changes
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+                
+                // Test that attribute changes trigger events
+                let attributeChangeCount = 0;
+                el.addEventListener('attributechange', () => {
+                    attributeChangeCount++;
+                });
+                
+                el.setAttribute('message', 'Updated');
+                
+                setTimeout(() => {
+                    expect(attributeChangeCount).to.be.at.least(1);
+                    
+                    template.remove();
+                    done();
+                }, 50);
+              }
+        });
+      });
+    });
+});