+3 -1

AGENTS.md

··· 1 1 + - I’m using bun to manage packages. 1 2 - Don’t create a summary document. 2 2 - - Running all the tests with `bun run test` is cheap, so do it all the time. 3 3 + - Running all the tests with `bun run test` is cheap, so do it all the time. Don’t do too much before running tests. 3 4 - Try to maintain 100% test coverage. Use `bun run test --coverage`. 4 5 - I’m using `jj` so you can use that to look at your diff, but please don’t commit unless I ask you to. 6 6 + - Make sure you leave things in a good state. No diagnostics warnings. No type errors.

bun.lockb

This is a binary file and will not be displayed.

+8 -1

package.json

··· 19 19 "build": "bun run build.ts", 20 20 "test": "vitest run", 21 21 "test:watch": "vitest", 22 22 - "test:ui": "vitest --ui" 22 22 + "test:ui": "vitest --ui", 23 23 + "test:browser": "vitest run -c vitest.config.browser.ts", 24 24 + "test:browser:watch": "vitest -c vitest.config.browser.ts", 25 25 + "test:all": "vitest run && vitest run -c vitest.config.browser.ts" 23 26 }, 24 27 "devDependencies": { 28 28 + "@playwright/test": "^1.56.1", 25 29 "@types/bun": "^1.3.1", 30 30 + "@vitest/browser": "^4.0.5", 31 31 + "@vitest/browser-playwright": "^4.0.5", 26 32 "@vitest/coverage-v8": "^4.0.5", 27 33 "@vitest/ui": "^4.0.5", 28 34 "gzip-size-cli": "^5.1.0", 29 35 "happy-dom": "^20.0.10", 36 36 + "playwright": "^1.56.1", 30 37 "prettier": "^3.2.5", 31 38 "terser": "^5.28.1", 32 39 "typescript": "^5.4.2",

+336

test/morphlex.browser.test.ts

··· 1 1 + import { describe, it, expect, beforeEach, afterEach } from "vitest" 2 2 + import { morph, morphInner } from "../src/morphlex" 3 3 + 4 4 + describe("Morphlex Browser Tests", () => { 5 5 + let container: HTMLElement 6 6 + 7 7 + beforeEach(() => { 8 8 + container = document.createElement("div") 9 9 + container.id = "test-container" 10 10 + document.body.appendChild(container) 11 11 + }) 12 12 + 13 13 + afterEach(() => { 14 14 + if (container && container.parentNode) { 15 15 + container.parentNode.removeChild(container) 16 16 + } 17 17 + }) 18 18 + 19 19 + describe("Browser-specific DOM interactions", () => { 20 20 + it("should handle real browser events after morphing", async () => { 21 21 + const original = document.createElement("button") 22 22 + original.textContent = "Click me" 23 23 + let clicked = false 24 24 + 25 25 + original.addEventListener("click", () => { 26 26 + clicked = true 27 27 + }) 28 28 + 29 29 + container.appendChild(original) 30 30 + 31 31 + // Morph with new text but preserve the element 32 32 + const reference = document.createElement("button") 33 33 + reference.textContent = "Updated button" 34 34 + 35 35 + morph(original, reference) 36 36 + 37 37 + // Verify the button text changed 38 38 + expect(original.textContent).toBe("Updated button") 39 39 + 40 40 + // Click the button in the real browser 41 41 + original.click() 42 42 + 43 43 + // Event listener should still work 44 44 + expect(clicked).toBe(true) 45 45 + }) 46 46 + 47 47 + it("should handle CSS transitions in real browser", async () => { 48 48 + const original = document.createElement("div") 49 49 + original.style.cssText = "width: 100px; transition: width 0.1s;" 50 50 + container.appendChild(original) 51 51 + 52 52 + // Force browser to compute styles 53 53 + const computedStyle = getComputedStyle(original) 54 54 + expect(computedStyle.width).toBe("100px") 55 55 + 56 56 + // Morph with new styles 57 57 + const reference = document.createElement("div") 58 58 + reference.style.cssText = "width: 200px; transition: width 0.1s;" 59 59 + 60 60 + morph(original, reference) 61 61 + 62 62 + // Verify styles were updated 63 63 + expect(original.style.width).toBe("200px") 64 64 + }) 65 65 + 66 66 + it("should handle focus state correctly", () => { 67 67 + const original = document.createElement("input") 68 68 + original.type = "text" 69 69 + original.value = "initial" 70 70 + container.appendChild(original) 71 71 + 72 72 + // Focus the input 73 73 + original.focus() 74 74 + expect(document.activeElement).toBe(original) 75 75 + 76 76 + // Morph with new attributes 77 77 + const reference = document.createElement("input") 78 78 + reference.type = "text" 79 79 + reference.value = "updated" 80 80 + reference.placeholder = "Enter text" 81 81 + 82 82 + morph(original, reference) 83 83 + 84 84 + // Focus should be preserved on the same element 85 85 + expect(document.activeElement).toBe(original) 86 86 + expect(original.value).toBe("updated") 87 87 + expect(original.placeholder).toBe("Enter text") 88 88 + }) 89 89 + 90 90 + it("should handle complex nested structures", () => { 91 91 + container.innerHTML = ` 92 92 + <div class="parent"> 93 93 + <h1>Title</h1> 94 94 + <ul> 95 95 + <li>Item 1</li> 96 96 + <li>Item 2</li> 97 97 + <li>Item 3</li> 98 98 + </ul> 99 99 + </div> 100 100 + ` 101 101 + 102 102 + const original = container.firstElementChild as HTMLElement 103 103 + const originalH1 = original.querySelector("h1") 104 104 + 105 105 + const referenceHTML = ` 106 106 + <div class="parent modified"> 107 107 + <h1>Updated Title</h1> 108 108 + <ul> 109 109 + <li>Item 1 - Modified</li> 110 110 + <li>Item 2</li> 111 111 + <li>New Item 3</li> 112 112 + <li>Item 4</li> 113 113 + </ul> 114 114 + </div> 115 115 + ` 116 116 + 117 117 + morph(original, referenceHTML) 118 118 + 119 119 + // Check the structure is updated 120 120 + expect(original.className).toBe("parent modified") 121 121 + expect(originalH1?.textContent).toBe("Updated Title") 122 122 + 123 123 + const newItems = Array.from(original.querySelectorAll("li")) 124 124 + expect(newItems.length).toBe(4) 125 125 + expect(newItems[0].textContent).toBe("Item 1 - Modified") 126 126 + expect(newItems[3].textContent).toBe("Item 4") 127 127 + }) 128 128 + 129 129 + it("should handle SVG elements in real browser", () => { 130 130 + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg") 131 131 + svg.setAttribute("width", "100") 132 132 + svg.setAttribute("height", "100") 133 133 + 134 134 + const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle") 135 135 + circle.setAttribute("cx", "50") 136 136 + circle.setAttribute("cy", "50") 137 137 + circle.setAttribute("r", "40") 138 138 + circle.setAttribute("fill", "red") 139 139 + 140 140 + svg.appendChild(circle) 141 141 + container.appendChild(svg) 142 142 + 143 143 + const referenceSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg") 144 144 + referenceSVG.setAttribute("width", "200") 145 145 + referenceSVG.setAttribute("height", "200") 146 146 + 147 147 + const referenceCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle") 148 148 + referenceCircle.setAttribute("cx", "100") 149 149 + referenceCircle.setAttribute("cy", "100") 150 150 + referenceCircle.setAttribute("r", "80") 151 151 + referenceCircle.setAttribute("fill", "blue") 152 152 + 153 153 + referenceSVG.appendChild(referenceCircle) 154 154 + 155 155 + morph(svg, referenceSVG) 156 156 + 157 157 + expect(svg.getAttribute("width")).toBe("200") 158 158 + expect(svg.getAttribute("height")).toBe("200") 159 159 + 160 160 + const morphedCircle = svg.querySelector("circle") 161 161 + expect(morphedCircle?.getAttribute("cx")).toBe("100") 162 162 + expect(morphedCircle?.getAttribute("cy")).toBe("100") 163 163 + expect(morphedCircle?.getAttribute("r")).toBe("80") 164 164 + expect(morphedCircle?.getAttribute("fill")).toBe("blue") 165 165 + }) 166 166 + 167 167 + it("should handle form inputs and maintain state", () => { 168 168 + const form = document.createElement("form") 169 169 + form.innerHTML = ` 170 170 + <input type="text" name="username" value="john"> 171 171 + <input type="checkbox" name="remember" checked> 172 172 + <select name="country"> 173 173 + <option value="us">United States</option> 174 174 + <option value="uk" selected>United Kingdom</option> 175 175 + </select> 176 176 + ` 177 177 + container.appendChild(form) 178 178 + 179 179 + const textInput = form.querySelector('input[name="username"]') as HTMLInputElement 180 180 + const checkbox = form.querySelector('input[name="remember"]') as HTMLInputElement 181 181 + const select = form.querySelector('select[name="country"]') as HTMLSelectElement 182 182 + 183 183 + // Modify the values in the browser 184 184 + textInput.value = "jane" 185 185 + checkbox.checked = false 186 186 + select.value = "us" 187 187 + 188 188 + // Create reference with different structure but same form fields 189 189 + const referenceForm = document.createElement("form") 190 190 + referenceForm.className = "updated-form" 191 191 + referenceForm.innerHTML = ` 192 192 + <div class="form-group"> 193 193 + <input type="text" name="username" value="john" placeholder="Username"> 194 194 + </div> 195 195 + <div class="form-group"> 196 196 + <input type="checkbox" name="remember" checked> 197 197 + <label>Remember me</label> 198 198 + </div> 199 199 + <div class="form-group"> 200 200 + <select name="country" class="country-select"> 201 201 + <option value="us">United States</option> 202 202 + <option value="uk" selected>United Kingdom</option> 203 203 + <option value="ca">Canada</option> 204 204 + </select> 205 205 + </div> 206 206 + ` 207 207 + 208 208 + morph(form, referenceForm) 209 209 + 210 210 + // Form should have new structure 211 211 + expect(form.className).toBe("updated-form") 212 212 + expect(form.querySelectorAll(".form-group").length).toBe(3) 213 213 + 214 214 + // The form elements should be the same instances (preserved) 215 215 + const newTextInput = form.querySelector('input[name="username"]') as HTMLInputElement 216 216 + const newCheckbox = form.querySelector('input[name="remember"]') as HTMLInputElement 217 217 + const newSelect = form.querySelector('select[name="country"]') as HTMLSelectElement 218 218 + 219 219 + // Values from reference should be applied (morph doesn't preserve user modifications by default) 220 220 + expect(newTextInput.value).toBe("john") 221 221 + expect(newCheckbox.checked).toBe(true) 222 222 + expect(newSelect.value).toBe("uk") 223 223 + 224 224 + // New attributes should be applied 225 225 + expect(newTextInput.placeholder).toBe("Username") 226 226 + expect(newSelect.className).toBe("country-select") 227 227 + }) 228 228 + 229 229 + it("should handle morphInner with browser content", () => { 230 230 + const testContainer = document.createElement("div") 231 231 + testContainer.innerHTML = ` 232 232 + <p>Old paragraph</p> 233 233 + <button>Old button</button> 234 234 + ` 235 235 + document.body.appendChild(testContainer) 236 236 + 237 237 + const referenceContainer = document.createElement("div") 238 238 + referenceContainer.innerHTML = ` 239 239 + <h2>New heading</h2> 240 240 + <p>New paragraph</p> 241 241 + <button>New button</button> 242 242 + <span>New span</span> 243 243 + ` 244 244 + 245 245 + morphInner(testContainer, referenceContainer) 246 246 + 247 247 + expect(testContainer.children.length).toBe(4) 248 248 + expect(testContainer.querySelector("h2")?.textContent).toBe("New heading") 249 249 + expect(testContainer.querySelector("p")?.textContent).toBe("New paragraph") 250 250 + expect(testContainer.querySelector("button")?.textContent).toBe("New button") 251 251 + expect(testContainer.querySelector("span")?.textContent).toBe("New span") 252 252 + 253 253 + testContainer.remove() 254 254 + }) 255 255 + 256 256 + it("should handle custom elements if supported", () => { 257 257 + // Skip if custom elements are not supported 258 258 + if (!window.customElements) { 259 259 + return 260 260 + } 261 261 + 262 262 + // Define a simple custom element 263 263 + class TestElement extends HTMLElement { 264 264 + connectedCallback() { 265 265 + this.innerHTML = "<span>Custom content</span>" 266 266 + } 267 267 + } 268 268 + 269 269 + // Register it if not already registered 270 270 + if (!customElements.get("test-element")) { 271 271 + customElements.define("test-element", TestElement) 272 272 + } 273 273 + 274 274 + const original = document.createElement("div") 275 275 + original.innerHTML = `<test-element id="custom"></test-element>` 276 276 + container.appendChild(original) 277 277 + 278 278 + // Wait for custom element to be upgraded 279 279 + const customEl = original.querySelector("#custom") 280 280 + expect(customEl).toBeTruthy() 281 281 + 282 282 + const reference = document.createElement("div") 283 283 + reference.innerHTML = `<test-element id="custom" data-updated="true"></test-element>` 284 284 + 285 285 + morph(original, reference) 286 286 + 287 287 + const morphedCustom = original.querySelector("#custom") as HTMLElement 288 288 + expect(morphedCustom).toBeTruthy() 289 289 + expect(morphedCustom.getAttribute("data-updated")).toBe("true") 290 290 + }) 291 291 + 292 292 + it("should handle real browser viewport and scroll position", () => { 293 293 + // Create a scrollable container 294 294 + const scrollContainer = document.createElement("div") 295 295 + scrollContainer.style.cssText = "height: 200px; overflow-y: scroll; position: relative;" 296 296 + scrollContainer.innerHTML = ` 297 297 + <div style="height: 500px;"> 298 298 + <p id="p1">Paragraph 1</p> 299 299 + <p id="p2" style="margin-top: 200px;">Paragraph 2</p> 300 300 + <p id="p3" style="margin-top: 200px;">Paragraph 3</p> 301 301 + </div> 302 302 + ` 303 303 + container.appendChild(scrollContainer) 304 304 + 305 305 + // Scroll to middle 306 306 + scrollContainer.scrollTop = 100 307 307 + const initialScrollTop = scrollContainer.scrollTop 308 308 + 309 309 + // Morph with new content 310 310 + const referenceContainer = document.createElement("div") 311 311 + referenceContainer.style.cssText = "height: 200px; overflow-y: scroll; position: relative;" 312 312 + referenceContainer.innerHTML = ` 313 313 + <div style="height: 500px;"> 314 314 + <p id="p1" class="updated">Updated Paragraph 1</p> 315 315 + <p id="p2" style="margin-top: 200px;">Updated Paragraph 2</p> 316 316 + <p id="p3" style="margin-top: 200px;">Updated Paragraph 3</p> 317 317 + <p id="p4" style="margin-top: 200px;">New Paragraph 4</p> 318 318 + </div> 319 319 + ` 320 320 + 321 321 + morph(scrollContainer, referenceContainer) 322 322 + 323 323 + // Scroll position should be preserved 324 324 + expect(scrollContainer.scrollTop).toBe(initialScrollTop) 325 325 + 326 326 + // Content should be updated 327 327 + const p1 = scrollContainer.querySelector("#p1") 328 328 + expect(p1?.className).toBe("updated") 329 329 + expect(p1?.textContent).toBe("Updated Paragraph 1") 330 330 + 331 331 + const p4 = scrollContainer.querySelector("#p4") 332 332 + expect(p4).toBeTruthy() 333 333 + expect(p4?.textContent).toBe("New Paragraph 4") 334 334 + }) 335 335 + }) 336 336 + })

+35

vitest.config.browser.ts

··· 1 1 + import { defineConfig } from "vitest/config" 2 2 + import { playwright } from "@vitest/browser-playwright" 3 3 + 4 4 + export default defineConfig({ 5 5 + test: { 6 6 + browser: { 7 7 + enabled: true, 8 8 + provider: playwright(), 9 9 + instances: [ 10 10 + { 11 11 + browser: "chromium", 12 12 + }, 13 13 + { 14 14 + browser: "firefox", 15 15 + }, 16 16 + { 17 17 + browser: "webkit", 18 18 + }, 19 19 + ], 20 20 + // Enable headless mode by default, can be overridden with --browser.headless=false 21 21 + headless: true, 22 22 + // Screenshot on failure 23 23 + screenshotFailures: true, 24 24 + }, 25 25 + // Increase timeouts for browser tests 26 26 + testTimeout: 30000, 27 27 + hookTimeout: 30000, 28 28 + // Don't use globals in browser tests to avoid pollution 29 29 + globals: false, 30 30 + // Retry failed tests once in browser mode 31 31 + retry: 1, 32 32 + // Include only browser-specific tests 33 33 + include: ["test/**/*.browser.test.ts"], 34 34 + }, 35 35 + })