Skip to content

Some improvements and thoughts #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Some improvements and thoughts #325

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 96 additions & 53 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
let destroyed = false;
let genericHooks: RouteHooks;

const isPushStateAvailable = pushStateAvailable();
const isWindowAvailable = windowAvailable();
const isPushStateAvailable: () => boolean = pushStateAvailable;
const isWindowAvailable: () => boolean = windowAvailable;

if (!appRoute) {
console.warn(
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
hooks?: RouteHooks
) {
if (typeof path === "object" && !(path instanceof RegExp)) {
Object.keys(path).forEach((p) => {
Object.keys(path).forEach((p: string) => {
if (typeof path[p] === "function") {
this.on(p, path[p]);
} else {
Expand All @@ -109,7 +109,7 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
} else if (typeof path === "function") {
hooks = handler as RouteHooks;
handler = path as Handler;
path = root;
path = 'root';
}
routes.push(
createRoute(path as string | RegExp, handler, [genericHooks, hooks])
Expand All @@ -128,26 +128,51 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
const context: QContext = {
instance: self,
to,
/**
* TODO?: currentLocation: options?.currentLocation ?? '',
* TODO?: currentParams: options?.currentParams ?? {},
* TODO?: currentQuery: options?.currentQuery ?? {},
*/
currentLocationPath: to,
navigateOptions: {},
resolveOptions: { ...DEFAULT_RESOLVE_OPTIONS, ...options },
};
Q(
[
setLocationPath,
matchPathToRegisteredRoutes,
setLocationPath,
matchPathToRegisteredRoutes,
Q.if(
({ matches }: QContext) => matches && matches.length > 0,
processMatches,
({ matches }: QContext) => matches && matches.length > 0,
processMatches,
notFoundLifeCycle
),
],
context,
waitingList
),
],
{ context, done: waitingList }
);

/**
* const middlewareChain: QMiddleware<QContext>[] = [
* setLocation,
* Q.parallel([
* matchPathToRegisteredRoutes,
* Q.if(
* ({ matches }: QContext) => matches && matches.length > 0,
* processMatches,
* notFoundLifeCycle
* )
* ]),
* ];
*
* if (options?.queryParamsMode === 'strict') {
* middlewareChain.push(Q.sync(queryParamsStrictMode));
* }
*
* Q(middlewareChain, context, waitingList);
*/

return context.matches ? context.matches : false;
}
/** function navigate(to: string, navigateOptions?: NavigateOptions = {}): void { */
function navigate(to: string, navigateOptions?: NavigateOptions): void {
// console.log("-- navigate --> " + to, self.__dirty);
if (self.__dirty) {
Expand All @@ -167,22 +192,18 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
: DEFAULT_RESOLVE_OPTIONS,
currentLocationPath: _checkForAHash(to),
};
Q(
[
checkForDeprecationMethods,
checkForForceOp,
matchPathToRegisteredRoutes,
Q.if(
({ matches }: QContext) => matches && matches.length > 0,
processMatches,
notFoundLifeCycle
),
updateBrowserURL,
waitingList,
],
context,
waitingList
);
Q(
[
setLocationPath,
matchPathToRegisteredRoutes,
Q.if(
({ matches }: QContext) => matches && matches.length > 0,
processMatches,
notFoundLifeCycle
),
],
{ context, done: waitingList }
);
}
function navigateByName(
name: string,
Expand All @@ -197,9 +218,13 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
return false;
}
function off(what: string | RegExp | Function) {
this.routes = routes = routes.filter((r) => {
this.routes = routes = routes.filter((r) => { // r: router
if (isString(what)) {
return clean(r.path as string) !== clean(what as string);
/**
* else if (isRegExp(what)) {
* return !what.test(r.path as string);
*/
} else if (isFunction(what)) {
return what !== r.handler;
}
Expand All @@ -218,9 +243,9 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
}
}
function destroy() {
this.routes = routes = [];
[this.routes, routes] = [[], this.routes];
if (isPushStateAvailable) {
window.removeEventListener("popstate", this.__popstateListener);
window.removeEventListener("popstate", this.__popstateListener) : null;
}
this.destroyed = destroyed = true;
}
Expand All @@ -233,16 +258,18 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
);
return this;
}

/** isExternalLink = external(link) */

function updatePageLinks() {
if (!isWindowAvailable) return;
findLinks().forEach((link) => {
if (
"false" === link.getAttribute("data-navigo") ||
"_blank" === link.getAttribute("target")
) {
if (link.hasListenerAttached) {
link.removeEventListener("click", link.navigoHandler);
}
links.forEach((link) => {
let isNavigoEnabled = link.getAttribute("data-navigo") !== "false";
let isTargetBlank = link.getAttribute("target") === "_blank";
if (!isNavigoEnabled || isTargetBlank) {
if (link.hasListenerAttached) {
link.removeEventListener("click", link.navigoHandler);
}
return;
}
if (!link.hasListenerAttached) {
Expand Down Expand Up @@ -281,15 +308,27 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
return self;
}
function findLinks() {
if (isWindowAvailable) {
return [].slice.call(
document.querySelectorAll(
DEFAULT_RESOLVE_OPTIONS.linksSelector || DEFAULT_LINK_SELECTOR
)
);
}
return [];
const linksSelector = DEFAULT_RESOLVE_OPTIONS.linksSelector || DEFAULT_LINK_SELECTOR;
const links = document.querySelectorAll(linksSelector);
if (isWindowAvailable) {
return [].slice.call(links);
}
return [];
}

/**
* TODO?: Do add them here too?
* if (isWindowAvailable) {
* return links.filter(link => {
* const dataNavigo = link.getAttribute("data-navigo");
* const target = link.getAttribute("target");
* return dataNavigo !== "false" && target !== "_blank";
* });
* }
* return [];
* }
*/

function link(path: string) {
return `/${root}/${clean(path)}`;
}
Expand All @@ -310,8 +349,12 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
if (route) {
result = route.path as string;
if (data) {
/** for (const [key, value] of Object.entries(data)) { */
for (let key in data) {
result = result.replace(":" + key, data[key]);
/**
* result = result.replace(`:${key}`, value);
*/
result = result.replace(`:${key}`, data[key]);
}
}
result = !result.match(/^\//) ? `/${result}` : result;
Expand All @@ -321,7 +364,7 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
}
return result;
}
function getLinkPath(link) {
function getLinkPath(link: HTMLAnchorElement): string | null {
return link.getAttribute("href");
}
function pathToMatchObject(path: string): Match {
Expand Down Expand Up @@ -352,7 +395,7 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
resolveOptions: DEFAULT_RESOLVE_OPTIONS,
};
matchPathToRegisteredRoutes(context, () => {});
return context.matches ? context.matches : false;
return context.matches ?? false;
}
function directMatchWithLocation(
path: string | RegExp,
Expand Down Expand Up @@ -383,7 +426,7 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
handler: () => {},
hooks: {},
});
return match ? match : false;
return match ?? false;
}
function addHook(
type: string,
Expand All @@ -396,15 +439,15 @@ export default function Navigo(appRoute?: string, options?: RouterOptions) {
if (route) {
if (!route.hooks[type]) route.hooks[type] = [];
route.hooks[type].push(func);
return () => {
return (): void => {
(route as Route).hooks[type] = (route as Route).hooks[type].filter(
(f) => f !== func
);
};
} else {
console.warn(`Route doesn't exists: ${route}`);
}
return () => {};
return (): void => {};
}
function getRoute(nameOrHandler: string | Function): Route | undefined {
if (typeof nameOrHandler === "string") {
Expand Down