css-chain-test

import { CssChain as $, ApiChain } from 'css-chain-test'; // === CssChain: DOM Manipulation === // Create some dummy HTML for demonstration document.body.innerHTML = ` <div id="app"> <button class="my-button" title="Click me">Button 1</button> <button class="my-button" title="Don't click me">Button 2</button> <a href="#" class="my-link">Link 1</a> <input type="text" class="my-input" value="Initial Value"> <div class="container"> <span class="nested-span">Nested Span</span> </div> </div> `; // Select all buttons and add a click listener, then remove their title $('button.my-button') .on('click', (event) => { const target = event.target as HTMLElement; console.log(`Button clicked: ${target.textContent} (title was: ${target.title})`); target.style.backgroundColor = 'lightblue'; }) .attr('data-clicked', 'true') // Set a data attribute .removeAttribute('title'); // Remove the title attribute after setup // Select an input and set its value, then retrieve it const inputField = $('input.my-input'); inputField.value = 'New Value Set By CssChain'; // Set property for all selected inputs console.log(`Input value (from first element): ${inputField.value}`); // Get property from first element // Chain multiple event listeners for a link $('a.my-link') .on('mouseover', (ev) => (ev.target as HTMLElement).classList.add('hovered')) .on('mouseleave', (ev) => (ev.target as HTMLElement).classList.remove('hovered')) .text('Hover and click this link!'); // Query for children within a selected container $('div#app') .$('.nested-span') // Alias for querySelectorAll .text('Updated Nested Span Text') .css('color', 'green'); // === ApiChain: Object Manipulation === const data = [ { id: 1, name: 'Alice', active: true }, { id: 2, name: 'Bob', active: false }, { id: 3, name: 'Charlie', active: true } ]; const chainedData = ApiChain(data); // Set a property on all objects chainedData.active = false; console.log('All data objects made inactive:', chainedData.map(d => d.active)); // Get a property from the first object const firstId = chainedData.id; console.log('ID of the first object:', firstId); // You can still use array methods const activeUsers = chainedData.filter(user => user.active); // Will be empty now console.log('Active users after setting all to false:', activeUsers); // Let's create a new chain and modify it const moreData = ApiChain([ { category: 'A', value: 10 }, { category: 'B', value: 20 }, { category: 'A', value: 15 } ]); const sumValues = moreData.reduce((sum, item) => sum + item.value, 0); console.log('Sum of values in moreData:', sumValues); // Filter and then set a property moreData.filter(item => item.category === 'A').status = 'processed'; console.log('More data after processing category A:', moreData);