50 lines
1.7 KiB
Markdown
50 lines
1.7 KiB
Markdown
# 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)](https://apps.gnome.org/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.
|
|
|
|
## Hero Animation won't work (after hot reload)
|
|
|
|
That's a known issue. Hot reload won't refresh the module sets the hero cache. Refresh the whole page and it should work.
|
|
|
|
## 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:
|
|
|
|
```ts
|
|
export function updateAcctInf(idx: number) {
|
|
const o = $accounts.get();
|
|
// ...
|
|
o[idx].inf = inf;
|
|
$accounts.set(o);
|
|
}
|
|
```
|
|
|
|
Instead, set a new object:
|
|
|
|
```ts
|
|
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".
|