Anchor tag respects modifiers

[stereosteve]

Taken from next.js:
https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx#L89

Also hijacks the hello-world-src-dir example for testing navigation behavior. This example demonstrates bugs #230 (and maybe also #217) if you:

• Click About Blank to open in new tab
• Switch to new tab and hover over Back home
• index.css stylesheet gets loaded and page appearance changes.

Anyway it would be nice to have an example either in this repo or separate repo that exercises all the navigation + data loading features for testing purposes.

[stereosteve]

I now see that the jsx compiler does ignore links with target="_blank"... so only the modifier keys need to be considered.

Anchor tag emits fetch-page-module event to tell router to preload page assets... but the styles get applied immediately.

applyCSS tries to do some book keeping to add + remove the correct styles, but reloading page or target="_blank" breaks the tracking.

Not sure how to fix yet... but that's what I found so far.

[ije]

@stereosteve nice try! yes the page prefetch will be emitted when mouse over the Anchor component. in your example, i saw the about.css changed the body bg color, and the prefetch will apply this css immediately, it is a right behavior. better import the global styles in the app.tsx instead of pages/*.tsx.

[ije]

can you please move the example to a new folder as examples/anchor-taget?

[stereosteve]

Ah okay... was confused about intended behavior of CSS loading.
But I learned about <style>{ }</style> component which is much better, so don't have to use css files at all.

Created new examples/anchor-links directory to demonstrate basic navigation features. Switching between Query 0 and Query 1 demonstrates bug #262

[ije]

@stereosteve great! thanks

[ije]

you can you css files fine, or inline-style, or style-components(ssr not support yet), or tailwindcss, or other