rename: client -> frontend
This commit is contained in:
syuilo
parent
db6fff6f26
commit
9384f5399d
592 changed files with 111 additions and 111 deletions
275
packages/frontend/src/nirax.ts
Normal file
275
packages/frontend/src/nirax.ts
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
// NIRAX --- A lightweight router
|
||||
|
||||
import { EventEmitter } from 'eventemitter3';
|
||||
import { Ref, Component, ref, shallowRef, ShallowRef } from 'vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { safeURIDecode } from '@/scripts/safe-uri-decode';
|
||||
|
||||
type RouteDef = {
|
||||
path: string;
|
||||
component: Component;
|
||||
query?: Record<string, string>;
|
||||
loginRequired?: boolean;
|
||||
name?: string;
|
||||
hash?: string;
|
||||
globalCacheKey?: string;
|
||||
children?: RouteDef[];
|
||||
};
|
||||
|
||||
type ParsedPath = (string | {
|
||||
name: string;
|
||||
startsWith?: string;
|
||||
wildcard?: boolean;
|
||||
optional?: boolean;
|
||||
})[];
|
||||
|
||||
export type Resolved = { route: RouteDef; props: Map<string, string>; child?: Resolved; };
|
||||
|
||||
function parsePath(path: string): ParsedPath {
|
||||
const res = [] as ParsedPath;
|
||||
|
||||
path = path.substring(1);
|
||||
|
||||
for (const part of path.split('/')) {
|
||||
if (part.includes(':')) {
|
||||
const prefix = part.substring(0, part.indexOf(':'));
|
||||
const placeholder = part.substring(part.indexOf(':') + 1);
|
||||
const wildcard = placeholder.includes('(*)');
|
||||
const optional = placeholder.endsWith('?');
|
||||
res.push({
|
||||
name: placeholder.replace('(*)', '').replace('?', ''),
|
||||
startsWith: prefix !== '' ? prefix : undefined,
|
||||
wildcard,
|
||||
optional,
|
||||
});
|
||||
} else if (part.length !== 0) {
|
||||
res.push(part);
|
||||
}
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
export class Router extends EventEmitter<{
|
||||
change: (ctx: {
|
||||
beforePath: string;
|
||||
path: string;
|
||||
resolved: Resolved;
|
||||
key: string;
|
||||
}) => void;
|
||||
replace: (ctx: {
|
||||
path: string;
|
||||
key: string;
|
||||
}) => void;
|
||||
push: (ctx: {
|
||||
beforePath: string;
|
||||
path: string;
|
||||
route: RouteDef | null;
|
||||
props: Map<string, string> | null;
|
||||
key: string;
|
||||
}) => void;
|
||||
same: () => void;
|
||||
}> {
|
||||
private routes: RouteDef[];
|
||||
public current: Resolved;
|
||||
public currentRef: ShallowRef<Resolved> = shallowRef();
|
||||
public currentRoute: ShallowRef<RouteDef> = shallowRef();
|
||||
private currentPath: string;
|
||||
private currentKey = Date.now().toString();
|
||||
|
||||
public navHook: ((path: string, flag?: any) => boolean) | null = null;
|
||||
|
||||
constructor(routes: Router['routes'], currentPath: Router['currentPath']) {
|
||||
super();
|
||||
|
||||
this.routes = routes;
|
||||
this.currentPath = currentPath;
|
||||
this.navigate(currentPath, null, false);
|
||||
}
|
||||
|
||||
public resolve(path: string): Resolved | null {
|
||||
let queryString: string | null = null;
|
||||
let hash: string | null = null;
|
||||
if (path[0] === '/') path = path.substring(1);
|
||||
if (path.includes('#')) {
|
||||
hash = path.substring(path.indexOf('#') + 1);
|
||||
path = path.substring(0, path.indexOf('#'));
|
||||
}
|
||||
if (path.includes('?')) {
|
||||
queryString = path.substring(path.indexOf('?') + 1);
|
||||
path = path.substring(0, path.indexOf('?'));
|
||||
}
|
||||
|
||||
if (_DEV_) console.log('Routing: ', path, queryString);
|
||||
|
||||
function check(routes: RouteDef[], _parts: string[]): Resolved | null {
|
||||
forEachRouteLoop:
|
||||
for (const route of routes) {
|
||||
let parts = [..._parts];
|
||||
const props = new Map<string, string>();
|
||||
|
||||
pathMatchLoop:
|
||||
for (const p of parsePath(route.path)) {
|
||||
if (typeof p === 'string') {
|
||||
if (p === parts[0]) {
|
||||
parts.shift();
|
||||
} else {
|
||||
continue forEachRouteLoop;
|
||||
}
|
||||
} else {
|
||||
if (parts[0] == null && !p.optional) {
|
||||
continue forEachRouteLoop;
|
||||
}
|
||||
if (p.wildcard) {
|
||||
if (parts.length !== 0) {
|
||||
props.set(p.name, safeURIDecode(parts.join('/')));
|
||||
parts = [];
|
||||
}
|
||||
break pathMatchLoop;
|
||||
} else {
|
||||
if (p.startsWith) {
|
||||
if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
|
||||
|
||||
props.set(p.name, safeURIDecode(parts[0].substring(p.startsWith.length)));
|
||||
parts.shift();
|
||||
} else {
|
||||
if (parts[0]) {
|
||||
props.set(p.name, safeURIDecode(parts[0]));
|
||||
}
|
||||
parts.shift();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (parts.length === 0) {
|
||||
if (route.children) {
|
||||
const child = check(route.children, []);
|
||||
if (child) {
|
||||
return {
|
||||
route,
|
||||
props,
|
||||
child,
|
||||
};
|
||||
} else {
|
||||
continue forEachRouteLoop;
|
||||
}
|
||||
}
|
||||
|
||||
if (route.hash != null && hash != null) {
|
||||
props.set(route.hash, safeURIDecode(hash));
|
||||
}
|
||||
|
||||
if (route.query != null && queryString != null) {
|
||||
const queryObject = [...new URLSearchParams(queryString).entries()]
|
||||
.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {});
|
||||
|
||||
for (const q in route.query) {
|
||||
const as = route.query[q];
|
||||
if (queryObject[q]) {
|
||||
props.set(as, safeURIDecode(queryObject[q]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
route,
|
||||
props,
|
||||
};
|
||||
} else {
|
||||
if (route.children) {
|
||||
const child = check(route.children, parts);
|
||||
if (child) {
|
||||
return {
|
||||
route,
|
||||
props,
|
||||
child,
|
||||
};
|
||||
} else {
|
||||
continue forEachRouteLoop;
|
||||
}
|
||||
} else {
|
||||
continue forEachRouteLoop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const _parts = path.split('/').filter(part => part.length !== 0);
|
||||
|
||||
return check(this.routes, _parts);
|
||||
}
|
||||
|
||||
private navigate(path: string, key: string | null | undefined, emitChange = true) {
|
||||
const beforePath = this.currentPath;
|
||||
this.currentPath = path;
|
||||
|
||||
const res = this.resolve(this.currentPath);
|
||||
|
||||
if (res == null) {
|
||||
throw new Error('no route found for: ' + path);
|
||||
}
|
||||
|
||||
if (res.route.loginRequired) {
|
||||
pleaseLogin('/');
|
||||
}
|
||||
|
||||
const isSamePath = beforePath === path;
|
||||
if (isSamePath && key == null) key = this.currentKey;
|
||||
this.current = res;
|
||||
this.currentRef.value = res;
|
||||
this.currentRoute.value = res.route;
|
||||
this.currentKey = res.route.globalCacheKey ?? key ?? path;
|
||||
|
||||
if (emitChange) {
|
||||
this.emit('change', {
|
||||
beforePath,
|
||||
path,
|
||||
resolved: res,
|
||||
key: this.currentKey,
|
||||
});
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
public getCurrentPath() {
|
||||
return this.currentPath;
|
||||
}
|
||||
|
||||
public getCurrentKey() {
|
||||
return this.currentKey;
|
||||
}
|
||||
|
||||
public push(path: string, flag?: any) {
|
||||
const beforePath = this.currentPath;
|
||||
if (path === beforePath) {
|
||||
this.emit('same');
|
||||
return;
|
||||
}
|
||||
if (this.navHook) {
|
||||
const cancel = this.navHook(path, flag);
|
||||
if (cancel) return;
|
||||
}
|
||||
const res = this.navigate(path, null);
|
||||
this.emit('push', {
|
||||
beforePath,
|
||||
path,
|
||||
route: res.route,
|
||||
props: res.props,
|
||||
key: this.currentKey,
|
||||
});
|
||||
}
|
||||
|
||||
public replace(path: string, key?: string | null, emitEvent = true) {
|
||||
this.navigate(path, key);
|
||||
if (emitEvent) {
|
||||
this.emit('replace', {
|
||||
path,
|
||||
key: this.currentKey,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue