feat(examples): complete preact examples to align with other frameworks #9693
cursor[bot]quality.yml
on: pull_request
Unit Tests
54s
ESLint
52s
TypeScript
2m 20s
Check for various issues
40s
Matrix: End-to-end Tests
Annotations
9 errors and 11 notices
|
ESLint
Process completed with exit code 1.
|
|
End-to-end Tests (5)
Process completed with exit code 1.
|
|
e2e/examples-smoke.e2e.ts:5:7 › /date-picker/inline loads without runtime errors:
e2e/examples-smoke.e2e.ts#L17
2) e2e/examples-smoke.e2e.ts:5:7 › /date-picker/inline loads without runtime errors ──────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<Container fn={function fn}>
<PagesDevOverlayBridge>
<PagesDevOverlayErrorBoundary>
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
<div className="page">
<Head>
<aside>
<Page>
<main className="date-picker">
<div>
<p>
+ Visible range: June 2026
- Visible range: June 2026 - June 2026
...
...
...
expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 33
- Array []
+ Array [
+ "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+ - A server/client branch `if (typeof window !== 'undefined')`.
+ - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+ - Date formatting in a user's locale which doesn't match the server.
+ - External changing data without sending a snapshot of it along with the HTML.
+ - Invalid HTML tag nesting.
+
+ It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+ https://react.dev/link/hydration-mismatch
+
+ ...
+ <Container fn={function fn}>
+ <PagesDevOverlayBridge>
+ <PagesDevOverlayErrorBoundary>
+ <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+ <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+ <div className=\"page\">
+ <Head>
+ <aside>
+ <Page>
+ <main className=\"date-picker\">
+ <div>
+ <p>
+ + Visible range: June 2026
+ - Visible range: June 2026 - June 2026
+ ...
+ ...
+ ...
+ ",
+ ]
15 | await page.waitForLoadState("networkidle")
16 |
> 17 | expect(errors, errors.join("\n")).toEqual([])
| ^
18 | })
19 | }
20 |
at /home/runner/work/zag/zag/e2e/examples-smoke.e2e.ts:17:39
|
|
e2e/examples-smoke.e2e.ts:5:7 › /date-picker/inline loads without runtime errors:
e2e/examples-smoke.e2e.ts#L17
2) e2e/examples-smoke.e2e.ts:5:7 › /date-picker/inline loads without runtime errors ──────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<Container fn={function fn}>
<PagesDevOverlayBridge>
<PagesDevOverlayErrorBoundary>
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
<div className="page">
<Head>
<aside>
<Page>
<main className="date-picker">
<div>
<p>
+ Visible range: June 2026
- Visible range: June 2026 - June 2026
...
...
...
expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 33
- Array []
+ Array [
+ "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+ - A server/client branch `if (typeof window !== 'undefined')`.
+ - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+ - Date formatting in a user's locale which doesn't match the server.
+ - External changing data without sending a snapshot of it along with the HTML.
+ - Invalid HTML tag nesting.
+
+ It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+ https://react.dev/link/hydration-mismatch
+
+ ...
+ <Container fn={function fn}>
+ <PagesDevOverlayBridge>
+ <PagesDevOverlayErrorBoundary>
+ <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+ <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+ <div className=\"page\">
+ <Head>
+ <aside>
+ <Page>
+ <main className=\"date-picker\">
+ <div>
+ <p>
+ + Visible range: June 2026
+ - Visible range: June 2026 - June 2026
+ ...
+ ...
+ ...
+ ",
+ ]
15 | await page.waitForLoadState("networkidle")
16 |
> 17 | expect(errors, errors.join("\n")).toEqual([])
| ^
18 | })
19 | }
20 |
at /home/runner/work/zag/zag/e2e/examples-smoke.e2e.ts:17:39
|
|
e2e/examples-smoke.e2e.ts:5:7 › /date-picker/multi loads without runtime errors:
e2e/examples-smoke.e2e.ts#L17
1) e2e/examples-smoke.e2e.ts:5:7 › /date-picker/multi loads without runtime errors ───────────────
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<Container fn={function fn}>
<PagesDevOverlayBridge>
<PagesDevOverlayErrorBoundary>
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
<div className="page">
<Head>
<aside>
<Page>
<main className="date-picker">
<div>
<p>
+ Visible range: June 2026
- Visible range: June 2026 - June 2026
...
...
...
expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 33
- Array []
+ Array [
+ "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+ - A server/client branch `if (typeof window !== 'undefined')`.
+ - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+ - Date formatting in a user's locale which doesn't match the server.
+ - External changing data without sending a snapshot of it along with the HTML.
+ - Invalid HTML tag nesting.
+
+ It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+ https://react.dev/link/hydration-mismatch
+
+ ...
+ <Container fn={function fn}>
+ <PagesDevOverlayBridge>
+ <PagesDevOverlayErrorBoundary>
+ <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+ <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+ <div className=\"page\">
+ <Head>
+ <aside>
+ <Page>
+ <main className=\"date-picker\">
+ <div>
+ <p>
+ + Visible range: June 2026
+ - Visible range: June 2026 - June 2026
+ ...
+ ...
+ ...
+ ",
+ ]
15 | await page.waitForLoadState("networkidle")
16 |
> 17 | expect(errors, errors.join("\n")).toEqual([])
| ^
18 | })
19 | }
20 |
at /home/runner/work/zag/zag/e2e/examples-smoke.e2e.ts:17:39
|
|
e2e/examples-smoke.e2e.ts:5:7 › /date-picker/multi loads without runtime errors:
e2e/examples-smoke.e2e.ts#L17
1) e2e/examples-smoke.e2e.ts:5:7 › /date-picker/multi loads without runtime errors ───────────────
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<Container fn={function fn}>
<PagesDevOverlayBridge>
<PagesDevOverlayErrorBoundary>
<PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
<App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
<div className="page">
<Head>
<aside>
<Page>
<main className="date-picker">
<div>
<p>
+ Visible range: June 2026
- Visible range: June 2026 - June 2026
...
...
...
expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 33
- Array []
+ Array [
+ "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+ - A server/client branch `if (typeof window !== 'undefined')`.
+ - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+ - Date formatting in a user's locale which doesn't match the server.
+ - External changing data without sending a snapshot of it along with the HTML.
+ - Invalid HTML tag nesting.
+
+ It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+ https://react.dev/link/hydration-mismatch
+
+ ...
+ <Container fn={function fn}>
+ <PagesDevOverlayBridge>
+ <PagesDevOverlayErrorBoundary>
+ <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
+ <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
+ <div className=\"page\">
+ <Head>
+ <aside>
+ <Page>
+ <main className=\"date-picker\">
+ <div>
+ <p>
+ + Visible range: June 2026
+ - Visible range: June 2026 - June 2026
+ ...
+ ...
+ ...
+ ",
+ ]
15 | await page.waitForLoadState("networkidle")
16 |
> 17 | expect(errors, errors.join("\n")).toEqual([])
| ^
18 | })
19 | }
20 |
at /home/runner/work/zag/zag/e2e/examples-smoke.e2e.ts:17:39
|
|
End-to-end Tests (9)
Canceling since a higher priority waiting request for Quality-refs/pull/3175/merge exists
|
|
End-to-end Tests (9)
The operation was canceled.
|
|
Quality
Canceling since a higher priority waiting request for Quality-refs/pull/3175/merge exists
|
|
🎭 Playwright Run Summary
4 skipped
56 passed (1.3m)
|
|
🎭 Playwright Run Summary
44 passed (1.2m)
|
|
🎭 Playwright Run Summary
1 skipped
69 passed (1.4m)
|
|
🎭 Playwright Run Summary
1 skipped
86 passed (1.6m)
|
|
🎭 Playwright Run Summary
85 passed (1.8m)
|
|
🎭 Playwright Run Summary
2 skipped
98 passed (2.0m)
|
|
🎭 Playwright Run Summary
1 skipped
75 passed (2.2m)
|
|
🎭 Playwright Run Summary
2 flaky
e2e/date-input.e2e.ts:542:7 › date-input [single] › [placeholderValue] ArrowDown after clearing a previously typed day starts from placeholder day
e2e/date-input.e2e.ts:1038:7 › date-input [min/max] › [min/max] typing a full date within range sets the value correctly
92 passed (2.2m)
|
|
🎭 Playwright Run Summary
1 skipped
99 passed (2.9m)
|
|
🎭 Playwright Run Summary
2 failed
e2e/examples-smoke.e2e.ts:5:7 › /date-picker/multi loads without runtime errors ────────────────
e2e/examples-smoke.e2e.ts:5:7 › /date-picker/inline loads without runtime errors ───────────────
213 passed (5.8m)
|
|
🎭 Playwright Run Summary
2 skipped
83 passed (1.7m)
|