provide SPA route's experience with native web component
npm install native-spa-route
provide SPA route's experience with native web component
pnpm install native-spa-route
the fully example are ready in the index.html.
here are just some brief descriptions.
run this in the top of your application
``typescript`
import { preload } from 'native-spa-route';
preload();
At current time (2022/6/6-17:04), this preload only supportted fully history API hook and fully a tag hook,
This means that there is a high possibility of conflict with the routing scheme of some existing libraries.
in this version, the hook of history api implament by add function to origin history's prototype.
`typescript`
export function hook_history_change(
cb?: (...)
) {
const prototype = Reflect.getPrototypeOf(history) as History;
const originPushState = prototype.pushState;
History.prototype.pushState = function pushState(...) {...};
// ... other function
}
to direct use hook functions or write your own hook is toally supported.
EVEN! You can use the history:replaceState event and history:pushState event to use this module in any enviroment
`typescript`
function hook_route_change(callback: (e: HistoryChangeEvent) => void) {
window.addEventListener('history:pushState', callback as EventListener);
window.addEventListener('history:replaceState', callback as EventListener);
window.addEventListener('history:back', callback as EventListener);
window.addEventListener('history:forward', callback as EventListener);
window.addEventListener('history:go', callback as EventListener);
window.addEventListener('popstate', callback as EventListener, false);
}
`html`
exact
element="exact /root path route here"
>
If this module could write content as child, like
Of course it works. But you need to do extra work to make them perform better.
Becouse the Broswer will take unregisted component as HTMLUnknowElement, the content of them will visibale.
So you need to hidden them by css:
`css`
native-route {
display: none;
}
native-route:defined {
display: block;
}
> The visibility property on my pc(MacBook Pro 12.3.1 M1) causes height changes, components to flicker.
example code:
`html`
render shoelace Button after module ready, disable cache to
get clear effect
Those a tags only show while /^\/lazy/.test(location.pathname) === true.
> see the demo to get detail
`html`
url="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.74/dist/components/button/button.js"
element='
lazy
>
url="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.74/dist/components/button/button.js"
element='
render-after-ready
lazy
>
> see the demo to get detail
this could be use to render react/vue/other render lib content.
`html`
this function require the JS source export an render function, the name can custom by custom-render="
use to inject css into Shadow DOM content.
use by css-url="
support multi css css-url="['url1', 'url2']"
`html`
the Shadow DOM wrapper is default provide by lit.
In some cases, it may cause strange problems, such as Antd's pop-up window mounting problem.
use disable-shadow could disable it. But! it may cause more content leak.
example:
`html`
cache is enabled by default.
use drop attribute to disable this.
`html`
drop
// ...
>
`typescript`
import { redirect } from 'native-spa-route';
// ...
redirect('/', '/other/path');
// ...
1. [x] ~~implament component~~ implament redirect api
2. [x] regexp based dynamic route
3. [ ] support scoped route to avoid global history api change.
`html`
1. Fork it!
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes:
4. Push to the branch:
5. Submit a pull request :D
MIT License