From 231eee3e1093c454c73a91ac4b2f9c30aa6024fd Mon Sep 17 00:00:00 2001 From: Robert Perce Date: Wed, 8 Apr 2026 09:27:14 -0500 Subject: [PATCH] refactor: cloak elements that need alpine loaded --- e2e/pages/contact.spec.ts | 9 +++++---- e2e/pages/util.ts | 6 ++---- src/web/auth.rs | 4 ++-- src/web/contact/mod.rs | 9 ++++----- src/web/home.rs | 2 +- src/web/mod.rs | 1 - static/index.css | 2 ++ 7 files changed, 16 insertions(+), 17 deletions(-) diff --git a/e2e/pages/contact.spec.ts b/e2e/pages/contact.spec.ts index 3d2e4c9..ba32a1b 100644 --- a/e2e/pages/contact.spec.ts +++ b/e2e/pages/contact.spec.ts @@ -4,7 +4,6 @@ import { login, verifyCreateUser, todate } from './util'; test.beforeEach(async ({ page }) => { await login(page); await verifyCreateUser(page, { names: ['Test Testerson'] }); - await expect(page.locator('#alpine-loaded')).not.toHaveAttribute('x-cloak'); }); test('manual-freshen date is editable', async ({ page }) => { @@ -19,19 +18,21 @@ test('last-contact date on display resolves journal mentions and manual-freshen' const entryBox = page.getByPlaceholder(/new entry/i); await entryDate.fill("2025-05-05"); await entryBox.fill("[[Test Testerson]]"); + + let load = page.waitForResponse('/journal_entry'); await page.getByRole('button', { name: /add entry/i }).click(); + await load; + await page.reload(); await expect(page.locator('#fields')).toContainText("freshened2025-05-05"); }); test.skip("groups wrap nicely", async ({ page }) => { await page.getByRole('link', { name: /edit/i }).click(); - await expect(page.locator('#alpine-loaded')).not.toHaveAttribute('x-cloak'); const groupBox = page.getByPlaceholder(/group name/i); await groupBox.fill('this is a long group name'); await page.getByRole('button', { name: /save/i }).click(); - await expect(page.locator('#alpine-loaded')).not.toHaveAttribute('x-cloak'); // TODO: this drives to the right location but i can't figure out how to assert // that the text is all on one line. Manual inspection looks good at time of writing. @@ -39,7 +40,6 @@ test.skip("groups wrap nicely", async ({ page }) => { test('allow marking as inactive', async ({ page }) => { await page.getByRole('link', { name: /edit/i }).click(); - await expect(page.locator('#alpine-loaded')).not.toHaveAttribute('x-cloak'); await page.getByLabel('status').selectOption('Inactive'); await page.getByRole('button', { name: /save/i }).click(); @@ -55,6 +55,7 @@ test('allow exempting from stale', async ({ page }) => { await page.getByLabel('status').selectOption('Cannot go stale'); await page.getByRole('button', { name: /save/i }).click(); + await page.waitForURL(/contact\/\d+$/); await page.goto('/'); await expect(page.locator('#freshness')).not.toContainText('Test Testersonnever'); }); diff --git a/e2e/pages/util.ts b/e2e/pages/util.ts index cdad8b6..46a3692 100644 --- a/e2e/pages/util.ts +++ b/e2e/pages/util.ts @@ -16,9 +16,7 @@ type UserFields = { }; export const verifyCreateUser = async (page: Page, fields: UserFields) => { await page.getByRole('button', { name: /add contact/i }).click(); - await page.waitForResponse('/contact/new'); - - await expect(page.locator('#alpine-loaded')).not.toHaveAttribute('x-cloak'); + await page.waitForURL(/contact\/\d+\/edit$/); const { names, ...simple } = fields; for (const name of (names ?? [])) { @@ -31,6 +29,6 @@ export const verifyCreateUser = async (page: Page, fields: UserFields) => { } await page.getByRole('button', { name: /save/i }).click(); - await page.waitForResponse(/\/contact\/\d+/); + await page.waitForURL(/contact\/\d+$/); }; diff --git a/src/web/auth.rs b/src/web/auth.rs index 79eb733..0ce501d 100644 --- a/src/web/auth.rs +++ b/src/web/auth.rs @@ -98,9 +98,9 @@ mod get { h1 { "Mascarpone" } form hx-post=(post_url) hx-target-error="#error" x-data="{ user: '', pass: '' }" { label for="username" { "Username" } - input name="username" #username autofocus x-model="user"; + input name="username" #username autofocus x-model="user" x-cloak; label for="password" { "Password" } - input name="password" #password type="password" x-model="pass"; + input name="password" #password type="password" x-model="pass" x-cloak; input type="submit" value="login" x-bind:disabled="!(user.length && pass.length)"; #error {} diff --git a/src/web/contact/mod.rs b/src/web/contact/mod.rs index 6b90020..d9a291a 100644 --- a/src/web/contact/mod.rs +++ b/src/web/contact/mod.rs @@ -64,14 +64,13 @@ mod get { fn scroll_to(id: DbId) -> String { format!( "\ - const top = document\ + const top=document\ .getElementById('nav-link-{}')\ ?.getBoundingClientRect()\ ?.top;\ - console.log({{ top }});\ - top && document\ + top&&document\ .getElementById('contacts-sidebar')\ - .scrollTo({{top: top+window.innerHeight/2,left:0,behavior:'instant'}});", + .scrollTo({{top:top+window.innerHeight/2,left:0,behavior:'instant'}});", id ) } @@ -264,7 +263,7 @@ mod get { div #error; } - #fields x-data=(json!({ "status": contact.status() })) x-init=(scroll_to(contact_id)) { + #fields x-data=(json!({ "status": contact.status() })) x-init=(scroll_to(contact_id)) x-cloak { label { @if contact.names.len() > 1 { "names" } @else { "name" }} div #names x-data=(format!("{{ names: {:?}, new_name: '' }}", &contact.names)) { template x-for="(name, idx) in names" { diff --git a/src/web/home.rs b/src/web/home.rs index 49fbb4a..d396d79 100644 --- a/src/web/home.rs +++ b/src/web/home.rs @@ -129,7 +129,7 @@ pub async fn journal_section( are now, or leave everything blank to default to 'today'. Entries will be added to the top of the list regardless of date; refresh the page to re-sort." } - form hx-post="/journal_entry" hx-target="next .entries" hx-target-error="#journal-error" hx-swap="afterbegin" hx-on::after-request="if(event.detail.successful) this.reset()" { + form hx-post="/journal_entry" hx-target="next .entries" hx-target-error="#journal-error" hx-swap="afterbegin" hx-on::after-request="if(event.detail.successful) this.reset()" x-cloak { input name="date" placeholder=(Zoned::now().date().to_string()); textarea name="value" placeholder="New entry..." autofocus {} input type="submit" value="Add Entry"; diff --git a/src/web/mod.rs b/src/web/mod.rs index 0cf96dc..a622bb0 100644 --- a/src/web/mod.rs +++ b/src/web/mod.rs @@ -151,7 +151,6 @@ impl Layout { (content) } } - template #alpine-loaded x-cloak {} } } } diff --git a/static/index.css b/static/index.css index 5889146..e2941b3 100644 --- a/static/index.css +++ b/static/index.css @@ -106,3 +106,5 @@ a, a:visited { color: var(--link-color); text-decoration: underline dotted; } + +[x-cloak] { display: none !important; }