+83 -14

src/client/ui/TreeView.tsx

··· 448 ([k]) => !["key", "ref", "__self", "__source"].includes(k), 449 ); 450 0 0 0 451 if ( 452 children === undefined || 453 children === null || 454 (Array.isArray(children) && children.length === 0) 455 ) { 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 456 return ( 457 <> 458 <span className={tagClass}>&lt;{tagName}</span> ··· 464 </> 465 )} 466 {propEntries.map(([k, v]) => ( 467 - <JSXProp key={k} name={k} value={v} indent={indent + 1} ancestors={ancestors} /> 0 0 0 468 ))} 469 <span className={tagClass}> /&gt;</span> 470 </> ··· 472 } 473 474 const hasComplexChildren = typeof children !== "string" && typeof children !== "number"; 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 475 return ( 476 <> 477 <span className={tagClass}>&lt;{tagName}</span> ··· 483 </> 484 )} 485 {propEntries.map(([k, v]) => ( 486 - <JSXProp key={k} name={k} value={v} indent={indent + 1} ancestors={ancestors} /> 0 0 0 487 ))} 488 <span className={tagClass}>&gt;</span> 489 {hasComplexChildren ? ( ··· 513 if (typeof value === "string") { 514 return ( 515 <> 516 - {" "} 517 <span className="TreeView-propName">{name}</span>= 518 <span className="TreeView-string">"{escapeHtml(value)}"</span> 519 </> 520 ); 521 } 522 if (isReactElement(value)) { 523 - const pad = " ".repeat(indent); 524 - const closePad = " ".repeat(indent - 1); 525 return ( 526 <> 527 - {" "} 528 <span className="TreeView-propName">{name}</span>={"{"} 529 {"\n"} 530 - {pad} 531 - <JSXValue value={value} indent={indent} ancestors={ancestors} /> 532 {"\n"} 533 {closePad} 534 {"}"} ··· 536 ); 537 } 538 if (Array.isArray(value) && value.some((v) => isReactElement(v))) { 539 - const pad = " ".repeat(indent); 540 - const closePad = " ".repeat(indent - 1); 541 return ( 542 <> 543 - {" "} 544 <span className="TreeView-propName">{name}</span>={"{["} 545 {"\n"} 546 {value.map((v, i) => ( 547 <React.Fragment key={i}> 548 - {pad} 549 - <JSXValue value={v} indent={indent} ancestors={ancestors} /> 550 {i < value.length - 1 ? "," : ""} 551 {"\n"} 552 </React.Fragment> ··· 558 } 559 return ( 560 <> 561 - {" "} 562 <span className="TreeView-propName">{name}</span>={"{"} 563 <JSXValue value={value} indent={indent} ancestors={ancestors} /> 564 {"}"}

··· 448 ([k]) => !["key", "ref", "__self", "__source"].includes(k), 449 ); 450 451 + const totalProps = propEntries.length + (key != null ? 1 : 0); 452 + const multiline = totalProps >= 2; 453 + 454 if ( 455 children === undefined || 456 children === null || 457 (Array.isArray(children) && children.length === 0) 458 ) { 459 + if (multiline) { 460 + return ( 461 + <> 462 + <span className={tagClass}>&lt;{tagName}</span> 463 + {key != null && ( 464 + <> 465 + {"\n"} 466 + {padInner} 467 + <span className="TreeView-propName">key</span>= 468 + <span className="TreeView-string">"{key}"</span> 469 + </> 470 + )} 471 + {propEntries.map(([k, v]) => ( 472 + <React.Fragment key={k}> 473 + {"\n"} 474 + {padInner} 475 + <JSXProp name={k} value={v} indent={indent + 1} ancestors={ancestors} /> 476 + </React.Fragment> 477 + ))} 478 + {"\n"} 479 + {pad} 480 + <span className={tagClass}>/&gt;</span> 481 + </> 482 + ); 483 + } 484 return ( 485 <> 486 <span className={tagClass}>&lt;{tagName}</span> ··· 492 </> 493 )} 494 {propEntries.map(([k, v]) => ( 495 + <React.Fragment key={k}> 496 + {" "} 497 + <JSXProp name={k} value={v} indent={indent} ancestors={ancestors} /> 498 + </React.Fragment> 499 ))} 500 <span className={tagClass}> /&gt;</span> 501 </> ··· 503 } 504 505 const hasComplexChildren = typeof children !== "string" && typeof children !== "number"; 506 + 507 + if (multiline) { 508 + return ( 509 + <> 510 + <span className={tagClass}>&lt;{tagName}</span> 511 + {key != null && ( 512 + <> 513 + {"\n"} 514 + {padInner} 515 + <span className="TreeView-propName">key</span>= 516 + <span className="TreeView-string">"{key}"</span> 517 + </> 518 + )} 519 + {propEntries.map(([k, v]) => ( 520 + <React.Fragment key={k}> 521 + {"\n"} 522 + {padInner} 523 + <JSXProp name={k} value={v} indent={indent + 1} ancestors={ancestors} /> 524 + </React.Fragment> 525 + ))} 526 + {"\n"} 527 + {pad} 528 + <span className={tagClass}>&gt;</span> 529 + {hasComplexChildren ? ( 530 + <> 531 + {"\n"} 532 + {padInner} 533 + <JSXChildren value={children} indent={indent + 1} ancestors={ancestors} /> 534 + {"\n"} 535 + {pad} 536 + </> 537 + ) : ( 538 + <JSXChildren value={children} indent={indent + 1} ancestors={ancestors} /> 539 + )} 540 + <span className={tagClass}>&lt;/{tagName}&gt;</span> 541 + </> 542 + ); 543 + } 544 + 545 return ( 546 <> 547 <span className={tagClass}>&lt;{tagName}</span> ··· 553 </> 554 )} 555 {propEntries.map(([k, v]) => ( 556 + <React.Fragment key={k}> 557 + {" "} 558 + <JSXProp name={k} value={v} indent={indent} ancestors={ancestors} /> 559 + </React.Fragment> 560 ))} 561 <span className={tagClass}>&gt;</span> 562 {hasComplexChildren ? ( ··· 586 if (typeof value === "string") { 587 return ( 588 <> 0 589 <span className="TreeView-propName">{name}</span>= 590 <span className="TreeView-string">"{escapeHtml(value)}"</span> 591 </> 592 ); 593 } 594 if (isReactElement(value)) { 595 + const innerPad = " ".repeat(indent + 1); 596 + const closePad = " ".repeat(indent); 597 return ( 598 <> 0 599 <span className="TreeView-propName">{name}</span>={"{"} 600 {"\n"} 601 + {innerPad} 602 + <JSXValue value={value} indent={indent + 1} ancestors={ancestors} /> 603 {"\n"} 604 {closePad} 605 {"}"} ··· 607 ); 608 } 609 if (Array.isArray(value) && value.some((v) => isReactElement(v))) { 610 + const itemPad = " ".repeat(indent + 1); 611 + const closePad = " ".repeat(indent); 612 return ( 613 <> 0 614 <span className="TreeView-propName">{name}</span>={"{["} 615 {"\n"} 616 {value.map((v, i) => ( 617 <React.Fragment key={i}> 618 + {itemPad} 619 + <JSXValue value={v} indent={indent + 1} ancestors={ancestors} /> 620 {i < value.length - 1 ? "," : ""} 621 {"\n"} 622 </React.Fragment> ··· 628 } 629 return ( 630 <> 0 631 <span className="TreeView-propName">{name}</span>={"{"} 632 <JSXValue value={value} indent={indent} ancestors={ancestors} /> 633 {"}"}

+8 -2

tests/clientref.spec.ts

··· 34 "<div> 35 <h1>Client Reference</h1> 36 <div style={{ display: "flex", gap: 12 }}> 37 - <ThemedBox theme={{ background: "#1a1a1a", color: "#fff" }} label="Dark" /> 38 - <ThemedBox theme={{ background: "#f5f5f5", color: "#000" }} label="Light" /> 0 0 0 0 0 0 39 </div> 40 </div>" 41 `);

··· 34 "<div> 35 <h1>Client Reference</h1> 36 <div style={{ display: "flex", gap: 12 }}> 37 + <ThemedBox 38 + theme={{ background: "#1a1a1a", color: "#fff" }} 39 + label="Dark" 40 + /> 41 + <ThemedBox 42 + theme={{ background: "#f5f5f5", color: "#000" }} 43 + label="Light" 44 + /> 45 </div> 46 </div>" 47 `);

+10 -10

tests/errors.spec.ts

··· 29 <h1>Error Handling</h1> 30 <ErrorBoundary fallback={ 31 <div style={{ 32 - padding: 16, 33 - background: "#fee", 34 - borderRadius: 8, 35 - color: "#c00" 36 - }}> 37 <strong>Failed to load user</strong> 38 <p style={{ margin: "4px 0 0" }}>Please try again later.</p> 39 </div> ··· 58 <h1>Error Handling</h1> 59 <ErrorBoundary fallback={ 60 <div style={{ 61 - padding: 16, 62 - background: "#fee", 63 - borderRadius: 8, 64 - color: "#c00" 65 - }}> 66 <strong>Failed to load user</strong> 67 <p style={{ margin: "4px 0 0" }}>Please try again later.</p> 68 </div>

··· 29 <h1>Error Handling</h1> 30 <ErrorBoundary fallback={ 31 <div style={{ 32 + padding: 16, 33 + background: "#fee", 34 + borderRadius: 8, 35 + color: "#c00" 36 + }}> 37 <strong>Failed to load user</strong> 38 <p style={{ margin: "4px 0 0" }}>Please try again later.</p> 39 </div> ··· 58 <h1>Error Handling</h1> 59 <ErrorBoundary fallback={ 60 <div style={{ 61 + padding: 16, 62 + background: "#fee", 63 + borderRadius: 8, 64 + color: "#c00" 65 + }}> 66 <strong>Failed to load user</strong> 67 <p style={{ margin: "4px 0 0" }}>Please try again later.</p> 68 </div>

+168 -168

tests/kitchensink.spec.ts

··· 52 <p>Loading...</p> 53 }> 54 <DataDisplay data={{ 55 - primitives: { 56 - null: null, 57 - true: true, 58 - false: false, 59 - int: 42, 60 - float: 3.14159, 61 - string: "hello world", 62 - empty: "", 63 - dollar: "$special", 64 - unicode: "Hello 世界 🌍" 65 - }, 66 - special: { 67 - negZero: -0, 68 - inf: Infinity, 69 - negInf: -Infinity, 70 - nan: NaN 71 - }, 72 - types: { 73 - date: Date(2024-01-15T12:00:00.000Z), 74 - bigint: 12345678901234567890n, 75 - symbol: Symbol(mySymbol) 76 - }, 77 - binary: { 78 - uint8: Uint8Array(5) [1, 2, 3, 4, 5], 79 - int32: Int32Array(3) [-1, 0, 2147483647], 80 - float64: Float64Array(2) [3.14159, 2.71828] 81 - }, 82 - collections: { 83 - map: Map(2) { 84 - "a" => 1, 85 - "b" => { nested: true } 86 - }, 87 - set: Set(3) { 88 - 1, 89 - 2, 90 - "three" 91 - }, 92 - formData: FormData { 93 - key: "value" 94 - }, 95 - blob: Blob(5 bytes, "text/plain") 96 - }, 97 - arrays: { 98 - simple: [1, 2, 3], 99 - sparse: [ 100 - 1, 101 - empty, 102 - empty, 103 - 4 104 - ], 105 - nested: [[1], [2, [3]]] 106 - }, 107 - objects: { 108 - simple: { a: 1 }, 109 - nested: { 110 - x: { 111 - y: { z: "deep" } 112 - } 113 - } 114 - }, 115 - elements: { 116 - div: <div className="test">Hello</div>, 117 - fragment: [ 118 - <span>a</span>, 119 - <span>b</span> 120 - ], 121 - suspense: <Suspense fallback="..."> 122 - <p>content</p> 123 - </Suspense> 124 }, 125 - promises: { 126 - resolved: "immediate", 127 - delayed: Pending 0 128 }, 129 - iterators: { 130 - sync: Iterator {} 131 }, 132 - refs: { 133 - dup: { 134 - a: { id: 1 }, 135 - b: { id: 1 } 136 - }, 137 - cyclic: { 138 - name: "cyclic", 139 - self: [Circular] 0 0 0 0 0 0 0 0 0 140 } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 141 }, 142 - action: [Function: serverAction] 143 - }} /> 0 0 0 0 0 144 </Suspense> 145 </div>" 146 `); ··· 158 <p>Loading...</p> 159 }> 160 <DataDisplay data={{ 161 - primitives: { 162 - null: null, 163 - true: true, 164 - false: false, 165 - int: 42, 166 - float: 3.14159, 167 - string: "hello world", 168 - empty: "", 169 - dollar: "$special", 170 - unicode: "Hello 世界 🌍" 171 - }, 172 - special: { 173 - negZero: -0, 174 - inf: Infinity, 175 - negInf: -Infinity, 176 - nan: NaN 177 - }, 178 - types: { 179 - date: Date(2024-01-15T12:00:00.000Z), 180 - bigint: 12345678901234567890n, 181 - symbol: Symbol(mySymbol) 182 - }, 183 - binary: { 184 - uint8: Uint8Array(5) [1, 2, 3, 4, 5], 185 - int32: Int32Array(3) [-1, 0, 2147483647], 186 - float64: Float64Array(2) [3.14159, 2.71828] 187 - }, 188 - collections: { 189 - map: Map(2) { 190 - "a" => 1, 191 - "b" => { nested: true } 192 - }, 193 - set: Set(3) { 194 - 1, 195 - 2, 196 - "three" 197 - }, 198 - formData: FormData { 199 - key: "value" 200 - }, 201 - blob: Blob(5 bytes, "text/plain") 202 - }, 203 - arrays: { 204 - simple: [1, 2, 3], 205 - sparse: [ 206 - 1, 207 - empty, 208 - empty, 209 - 4 210 - ], 211 - nested: [[1], [2, [3]]] 212 - }, 213 - objects: { 214 - simple: { a: 1 }, 215 - nested: { 216 - x: { 217 - y: { z: "deep" } 218 - } 219 - } 220 - }, 221 - elements: { 222 - div: <div className="test">Hello</div>, 223 - fragment: [ 224 - <span>a</span>, 225 - <span>b</span> 226 - ], 227 - suspense: <Suspense fallback="..."> 228 - <p>content</p> 229 - </Suspense> 230 }, 231 - promises: { 232 - resolved: "immediate", 233 - delayed: "delayed" 0 234 }, 235 - iterators: { 236 - sync: Iterator {} 237 }, 238 - refs: { 239 - dup: { 240 - a: { id: 1 }, 241 - b: { id: 1 } 242 - }, 243 - cyclic: { 244 - name: "cyclic", 245 - self: [Circular] 0 0 0 0 0 0 0 0 0 246 } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 247 }, 248 - action: [Function: serverAction] 249 - }} /> 0 0 0 0 0 250 </Suspense> 251 </div>" 252 `);

··· 52 <p>Loading...</p> 53 }> 54 <DataDisplay data={{ 55 + primitives: { 56 + null: null, 57 + true: true, 58 + false: false, 59 + int: 42, 60 + float: 3.14159, 61 + string: "hello world", 62 + empty: "", 63 + dollar: "$special", 64 + unicode: "Hello 世界 🌍" 65 + }, 66 + special: { 67 + negZero: -0, 68 + inf: Infinity, 69 + negInf: -Infinity, 70 + nan: NaN 71 + }, 72 + types: { 73 + date: Date(2024-01-15T12:00:00.000Z), 74 + bigint: 12345678901234567890n, 75 + symbol: Symbol(mySymbol) 76 + }, 77 + binary: { 78 + uint8: Uint8Array(5) [1, 2, 3, 4, 5], 79 + int32: Int32Array(3) [-1, 0, 2147483647], 80 + float64: Float64Array(2) [3.14159, 2.71828] 81 + }, 82 + collections: { 83 + map: Map(2) { 84 + "a" => 1, 85 + "b" => { nested: true } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 86 }, 87 + set: Set(3) { 88 + 1, 89 + 2, 90 + "three" 91 }, 92 + formData: FormData { 93 + key: "value" 94 }, 95 + blob: Blob(5 bytes, "text/plain") 96 + }, 97 + arrays: { 98 + simple: [1, 2, 3], 99 + sparse: [ 100 + 1, 101 + empty, 102 + empty, 103 + 4 104 + ], 105 + nested: [[1], [2, [3]]] 106 + }, 107 + objects: { 108 + simple: { a: 1 }, 109 + nested: { 110 + x: { 111 + y: { z: "deep" } 112 } 113 + } 114 + }, 115 + elements: { 116 + div: <div className="test">Hello</div>, 117 + fragment: [ 118 + <span>a</span>, 119 + <span>b</span> 120 + ], 121 + suspense: <Suspense fallback="..."> 122 + <p>content</p> 123 + </Suspense> 124 + }, 125 + promises: { 126 + resolved: "immediate", 127 + delayed: Pending 128 + }, 129 + iterators: { 130 + sync: Iterator {} 131 + }, 132 + refs: { 133 + dup: { 134 + a: { id: 1 }, 135 + b: { id: 1 } 136 }, 137 + cyclic: { 138 + name: "cyclic", 139 + self: [Circular] 140 + } 141 + }, 142 + action: [Function: serverAction] 143 + }} /> 144 </Suspense> 145 </div>" 146 `); ··· 158 <p>Loading...</p> 159 }> 160 <DataDisplay data={{ 161 + primitives: { 162 + null: null, 163 + true: true, 164 + false: false, 165 + int: 42, 166 + float: 3.14159, 167 + string: "hello world", 168 + empty: "", 169 + dollar: "$special", 170 + unicode: "Hello 世界 🌍" 171 + }, 172 + special: { 173 + negZero: -0, 174 + inf: Infinity, 175 + negInf: -Infinity, 176 + nan: NaN 177 + }, 178 + types: { 179 + date: Date(2024-01-15T12:00:00.000Z), 180 + bigint: 12345678901234567890n, 181 + symbol: Symbol(mySymbol) 182 + }, 183 + binary: { 184 + uint8: Uint8Array(5) [1, 2, 3, 4, 5], 185 + int32: Int32Array(3) [-1, 0, 2147483647], 186 + float64: Float64Array(2) [3.14159, 2.71828] 187 + }, 188 + collections: { 189 + map: Map(2) { 190 + "a" => 1, 191 + "b" => { nested: true } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 192 }, 193 + set: Set(3) { 194 + 1, 195 + 2, 196 + "three" 197 }, 198 + formData: FormData { 199 + key: "value" 200 }, 201 + blob: Blob(5 bytes, "text/plain") 202 + }, 203 + arrays: { 204 + simple: [1, 2, 3], 205 + sparse: [ 206 + 1, 207 + empty, 208 + empty, 209 + 4 210 + ], 211 + nested: [[1], [2, [3]]] 212 + }, 213 + objects: { 214 + simple: { a: 1 }, 215 + nested: { 216 + x: { 217 + y: { z: "deep" } 218 } 219 + } 220 + }, 221 + elements: { 222 + div: <div className="test">Hello</div>, 223 + fragment: [ 224 + <span>a</span>, 225 + <span>b</span> 226 + ], 227 + suspense: <Suspense fallback="..."> 228 + <p>content</p> 229 + </Suspense> 230 + }, 231 + promises: { 232 + resolved: "immediate", 233 + delayed: "delayed" 234 + }, 235 + iterators: { 236 + sync: Iterator {} 237 + }, 238 + refs: { 239 + dup: { 240 + a: { id: 1 }, 241 + b: { id: 1 } 242 }, 243 + cyclic: { 244 + name: "cyclic", 245 + self: [Circular] 246 + } 247 + }, 248 + action: [Function: serverAction] 249 + }} /> 250 </Suspense> 251 </div>" 252 `);

+70 -48

tests/pagination.spec.ts

··· 49 <Suspense fallback={ 50 <p style={{ color: "#888" }}>Loading recipes...</p> 51 }> 52 - <Paginator initialItems={[ 53 - <div key="1" style={{ 54 - padding: 12, 55 - marginBottom: 8, 56 - background: "#f5f5f5", 57 - borderRadius: 6 58 - }}> 59 - <strong>Pasta Carbonara</strong> 60 - <p style={{ 0 0 0 0 61 margin: "4px 0 0", 62 color: "#666", 63 fontSize: 13 64 }}> 65 - 25 min · Medium 66 - </p> 67 - </div>, 68 - <div key="2" style={{ 69 - padding: 12, 70 - marginBottom: 8, 71 - background: "#f5f5f5", 72 - borderRadius: 6 73 - }}> 74 - <strong>Grilled Cheese</strong> 75 - <p style={{ 0 0 0 76 margin: "4px 0 0", 77 color: "#666", 78 fontSize: 13 79 }}> 80 - 10 min · Easy 81 - </p> 82 - </div> 83 - ]} initialCursor={2} loadMoreAction={[Function: loadMore]} /> 0 0 0 84 </Suspense> 85 </div>" 86 `); ··· 120 expect(await h.stepAll()).toMatchInlineSnapshot(` 121 "{ 122 newItems: [ 123 - <div key="3" style={{ 0 0 124 padding: 12, 125 marginBottom: 8, 126 background: "#f5f5f5", 127 borderRadius: 6 128 - }}> 0 129 <strong>Chicken Stir Fry</strong> 130 <p style={{ 131 - margin: "4px 0 0", 132 - color: "#666", 133 - fontSize: 13 134 - }}> 135 20 min · Easy 136 </p> 137 </div>, 138 - <div key="4" style={{ 0 0 139 padding: 12, 140 marginBottom: 8, 141 background: "#f5f5f5", 142 borderRadius: 6 143 - }}> 0 144 <strong>Beef Tacos</strong> 145 <p style={{ 146 - margin: "4px 0 0", 147 - color: "#666", 148 - fontSize: 13 149 - }}> 150 30 min · Medium 151 </p> 152 </div> ··· 207 expect(await h.stepAll()).toMatchInlineSnapshot(` 208 "{ 209 newItems: [ 210 - <div key="5" style={{ 0 0 211 padding: 12, 212 marginBottom: 8, 213 background: "#f5f5f5", 214 borderRadius: 6 215 - }}> 0 216 <strong>Caesar Salad</strong> 217 <p style={{ 218 - margin: "4px 0 0", 219 - color: "#666", 220 - fontSize: 13 221 - }}> 222 15 min · Easy 223 </p> 224 </div>, 225 - <div key="6" style={{ 0 0 226 padding: 12, 227 marginBottom: 8, 228 background: "#f5f5f5", 229 borderRadius: 6 230 - }}> 0 231 <strong>Mushroom Risotto</strong> 232 <p style={{ 233 - margin: "4px 0 0", 234 - color: "#666", 235 - fontSize: 13 236 - }}> 237 45 min · Hard 238 </p> 239 </div>

··· 49 <Suspense fallback={ 50 <p style={{ color: "#888" }}>Loading recipes...</p> 51 }> 52 + <Paginator 53 + initialItems={[ 54 + <div 55 + key="1" 56 + style={{ 57 + padding: 12, 58 + marginBottom: 8, 59 + background: "#f5f5f5", 60 + borderRadius: 6 61 + }} 62 + > 63 + <strong>Pasta Carbonara</strong> 64 + <p style={{ 65 margin: "4px 0 0", 66 color: "#666", 67 fontSize: 13 68 }}> 69 + 25 min · Medium 70 + </p> 71 + </div>, 72 + <div 73 + key="2" 74 + style={{ 75 + padding: 12, 76 + marginBottom: 8, 77 + background: "#f5f5f5", 78 + borderRadius: 6 79 + }} 80 + > 81 + <strong>Grilled Cheese</strong> 82 + <p style={{ 83 margin: "4px 0 0", 84 color: "#666", 85 fontSize: 13 86 }}> 87 + 10 min · Easy 88 + </p> 89 + </div> 90 + ]} 91 + initialCursor={2} 92 + loadMoreAction={[Function: loadMore]} 93 + /> 94 </Suspense> 95 </div>" 96 `); ··· 130 expect(await h.stepAll()).toMatchInlineSnapshot(` 131 "{ 132 newItems: [ 133 + <div 134 + key="3" 135 + style={{ 136 padding: 12, 137 marginBottom: 8, 138 background: "#f5f5f5", 139 borderRadius: 6 140 + }} 141 + > 142 <strong>Chicken Stir Fry</strong> 143 <p style={{ 144 + margin: "4px 0 0", 145 + color: "#666", 146 + fontSize: 13 147 + }}> 148 20 min · Easy 149 </p> 150 </div>, 151 + <div 152 + key="4" 153 + style={{ 154 padding: 12, 155 marginBottom: 8, 156 background: "#f5f5f5", 157 borderRadius: 6 158 + }} 159 + > 160 <strong>Beef Tacos</strong> 161 <p style={{ 162 + margin: "4px 0 0", 163 + color: "#666", 164 + fontSize: 13 165 + }}> 166 30 min · Medium 167 </p> 168 </div> ··· 223 expect(await h.stepAll()).toMatchInlineSnapshot(` 224 "{ 225 newItems: [ 226 + <div 227 + key="5" 228 + style={{ 229 padding: 12, 230 marginBottom: 8, 231 background: "#f5f5f5", 232 borderRadius: 6 233 + }} 234 + > 235 <strong>Caesar Salad</strong> 236 <p style={{ 237 + margin: "4px 0 0", 238 + color: "#666", 239 + fontSize: 13 240 + }}> 241 15 min · Easy 242 </p> 243 </div>, 244 + <div 245 + key="6" 246 + style={{ 247 padding: 12, 248 marginBottom: 8, 249 background: "#f5f5f5", 250 borderRadius: 6 251 + }} 252 + > 253 <strong>Mushroom Risotto</strong> 254 <p style={{ 255 + margin: "4px 0 0", 256 + color: "#666", 257 + fontSize: 13 258 + }}> 259 45 min · Hard 260 </p> 261 </div>

+4 -1

tests/refresh.spec.ts

··· 31 <Suspense fallback={ 32 <p>Loading...</p> 33 }> 34 - <Router initial={Pending} refreshAction={[Function: renderPage]} /> 0 0 0 35 </Suspense> 36 </div>" 37 `);

··· 31 <Suspense fallback={ 32 <p>Loading...</p> 33 }> 34 + <Router 35 + initial={Pending} 36 + refreshAction={[Function: renderPage]} 37 + /> 38 </Suspense> 39 </div>" 40 `);