search

DrSensor / nusa

incremental runtime that bring both simplicity and power into webdev (buildless, cross-language, data-driven)
MIT License
4 stars 0 forks source link

`<quick-link>` navigate a page without refresh #12

Open DrSensor opened 2 years ago

DrSensor commented 2 years ago

Inspired from flamethrower but rather than intercepting the default click event handler in HTMLAnchorElement (<a>), you must be explicit which link that cause SPA navigation.

<a-page href="about.html">About</a-page>
<!-- or -->
<a href="about.html" is="a-page">About</a>

No <render-scope> is necessary

Note Using attribute is="a-page" is recommended than using custom tag <a-page> because it provide fallback when the script not yet executed

<script src="wiles/a-page.js" async></script>
...very short content
<a href="about.html" is="a-page">About</a>
<!-- 👆 will load as normal anchor link then upgrade into <a-page> when a-page.js is ready -->
DrSensor commented 1 year ago

Apparently rather than patching \<head> and replacing \<body>, I just need to add is="{tag}-scope" attribute on each tag then swap all childNodes with the next page. This mean slot attribute/element can be used to prevent script being executed as well as an identifier for styling specific elements that are came from custom page transition. That styling can be done via ::slotted() selector.

DrSensor commented 1 year ago

Surprise...! Safari/WebKit didn't support is= attribute 🥲 Maybe I should use .firstChildElement as fallback

<quick-link><a href="next.html">next</a></quick-link>

which transform into

<quick-link href=next.html>next</quick-link>

before applying the main logic

💡 Tip: just move Attr and Text node from .firstChildElememt into parent/host

Edit

Finally found a better name 😅 I'm thinking for <quick-link> to:

  1. support multiple <a href="">
  2. make it dynamic which return instance of HTMLAnchorElement if it has href="", else just return HTMLElement
DrSensor commented 1 year ago

others yet same:

DrSensor commented 1 year ago

No need to keep and track the scroll position since it can be solved by re-structuring the page to utilize #29