# native-spa-route
[](https://www.webcomponents.org/element/owner/native-spa-route)
provide SPA route's experience with native web component
[Online Demo](https://native-spa-route.vercel.app/)
## Installation
`pnpm install native-spa-route`
## Usage
the fully example are ready in the index.html.
here are just some brief descriptions.
### 1. Init module
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);
}
```
### 2. use Route
```html
```
If this module could write content as child, like ` content here `
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
```
Those `a` tags only show while `/^\/lazy/.test(location.pathname) === true`.
## Lazy support
> see the demo to get detail
```html
```
## Custom Render
> 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=""`**
## Content Style CSS
use `` to inject css into Shadow DOM content.
use by `css-url=""`
support multi css `css-url="['url1', 'url2']"`
```html
```
## Disable Shadow DOM wrapper
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
```
## Disable render cache
cache is enabled by default.
use `drop` attribute to disable this.
```html
```
## Redirect
```typescript
import { redirect } from 'native-spa-route';
// ...
redirect('/', '/other/path');
// ...
```
## Online Demo
)
## next step plan
1. [x] ~~implament `` component~~ implament redirect api
2. [x] regexp based dynamic route
3. [ ] support scoped route to avoid global history api change.
```html
link to other route
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b feature/my-new-feature`
3. Commit your changes: `git commit -am 'feat: Add some feature'`
4. Push to the branch: `git push origin feature/my-new-feature`
5. Submit a pull request :D
## License
MIT License