tutu/docs/devnotes.md

Dev Notes

This file documents some advices working on the app.

Debugging for iOS

You can debug on the Safari on iOS only if you have mac (and run macOS). The certain workarounds don't work well. Here are some tips:

• GNOME Web (epiphany) uses webkit2gtk, the same engine from Safari. Most of bugs can be reproduced on it.
• For visual bugs: on you iDevice, redirect the localhost.direct to your dev computer. Now you have the hot reload on you iDevice.
  • You can use network debugging apps like "Shadowrocket" to do such thing.

The components don't react to the change as I setting the store, until the page reloaded

The WritableAtom<unknwon>.set might do an equals check. You must set a different object to ensure the atom sending a notify.

The code below may not notify the change:

export function updateAcctInf(idx: number) {
  const o = $accounts.get();
  // ...
  o[idx].inf = inf;
  $accounts.set(o);
}

Instead, set a new object:

export function updateAcctInf(idx: number) {
  const o = $accounts.get();
  // ...
  o[idx] = Object.assign({}, o[idx], { inf });
  $accounts.set(Array.from(o));
}

Ja, the code is weird, but that's the best we know. Anyway, you need new object on the path of your changed value.

transition: *-block or *-inline does not work on WebKit

Idk why, but transition on logical directions may not work on WebKit - sometimes they work.

Use physical directions to avoid trouble, like "margin-top, margin-bottom".

Safe area insets

For isolating control of the UI effect, we already setup css variables --safe-area-inset-*. In components, you should use the variables unless you have reasons to use env().

Using --safe-area-inset-*, you can control the global value in settings (under dev mode).