vaderjs 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vscode/settings.json +3 -1
- package/images/router.png +0 -0
- package/images/state.png +0 -0
- package/index.js +12 -0
- package/jsconfig.json +8 -12
- package/logo.png +0 -0
- package/package.json +8 -4
- package/readme.md +144 -113
- package/vader.js +532 -431
- package/vaderRouter.js +62 -88
package/vaderRouter.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
// @ts-ignore
|
|
1
2
|
window.$URL_PARAMS = {};
|
|
3
|
+
// @ts-ignore
|
|
2
4
|
window.$URL_QUERY = {};
|
|
3
5
|
|
|
4
6
|
/**
|
|
@@ -93,23 +95,21 @@ class VaderRouter {
|
|
|
93
95
|
this.customerror = true;
|
|
94
96
|
}
|
|
95
97
|
handleRoute(method) {
|
|
96
|
-
if (this.hooked) {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
this.hooked = true;
|
|
100
98
|
let route = window.location.hash.substring(1);
|
|
101
|
-
|
|
99
|
+
// @ts-ignore
|
|
102
100
|
window.$CURRENT_URL = route;
|
|
103
101
|
|
|
104
102
|
// remove query params from route
|
|
105
103
|
if (route.includes("?")) {
|
|
106
104
|
route = route.split("?")[0];
|
|
107
105
|
}
|
|
106
|
+
route = route.split("/")[0] + "/" + route.split("/")[1];
|
|
108
107
|
if (this.routes[route]) {
|
|
109
|
-
console.log("route", route);
|
|
110
108
|
this.storedroutes.push(route);
|
|
111
109
|
const req = {
|
|
112
|
-
|
|
110
|
+
// @ts-ignore
|
|
111
|
+
params: $URL_PARAMS ? $URL_PARAMS : {},
|
|
112
|
+
// @ts-ignore
|
|
113
113
|
query: $URL_QUERY ? $URL_QUERY : {},
|
|
114
114
|
url: route,
|
|
115
115
|
method: method ? method : "GET",
|
|
@@ -124,8 +124,6 @@ class VaderRouter {
|
|
|
124
124
|
};
|
|
125
125
|
if (typeof this.routes[route] === "function") {
|
|
126
126
|
this.routes[route](req, res);
|
|
127
|
-
} else {
|
|
128
|
-
console.error("Error: Route is not a function");
|
|
129
127
|
}
|
|
130
128
|
} else {
|
|
131
129
|
if (this.customerror) {
|
|
@@ -134,12 +132,6 @@ class VaderRouter {
|
|
|
134
132
|
} else {
|
|
135
133
|
console.error("404: Route not found");
|
|
136
134
|
}
|
|
137
|
-
|
|
138
|
-
// if route has no content to send return 500
|
|
139
|
-
if (this.routes[route] === undefined || this.hooked === false) {
|
|
140
|
-
this.handleError("500", route);
|
|
141
|
-
console.error("500: Route has no content");
|
|
142
|
-
}
|
|
143
135
|
}
|
|
144
136
|
}
|
|
145
137
|
/**
|
|
@@ -160,9 +152,9 @@ class VaderRouter {
|
|
|
160
152
|
}
|
|
161
153
|
/**
|
|
162
154
|
* @alias get
|
|
163
|
-
* @param {
|
|
164
|
-
* @param {
|
|
165
|
-
* @returns {
|
|
155
|
+
* @param {String} path
|
|
156
|
+
* @param {Function} callback
|
|
157
|
+
* @returns {boolean}
|
|
166
158
|
* @memberof VaderRouter
|
|
167
159
|
* @description Allows you to perform actions when path matches the current Route on visit.
|
|
168
160
|
*/
|
|
@@ -201,18 +193,6 @@ class VaderRouter {
|
|
|
201
193
|
path.includes(":") &&
|
|
202
194
|
window.location.hash.substring(1).split("?")[1]
|
|
203
195
|
) {
|
|
204
|
-
if (debug.enabled) {
|
|
205
|
-
debug.log(
|
|
206
|
-
[
|
|
207
|
-
`
|
|
208
|
-
Cannot use query params with path params ${path} ${
|
|
209
|
-
window.location.hash.substring(1).split("?")[1]
|
|
210
|
-
}`,
|
|
211
|
-
],
|
|
212
|
-
"assert"
|
|
213
|
-
);
|
|
214
|
-
}
|
|
215
|
-
|
|
216
196
|
return false;
|
|
217
197
|
}
|
|
218
198
|
const query = {};
|
|
@@ -238,9 +218,11 @@ class VaderRouter {
|
|
|
238
218
|
url: window.location.hash.substring(1),
|
|
239
219
|
method: "GET",
|
|
240
220
|
};
|
|
241
|
-
|
|
221
|
+
// @ts-ignore
|
|
242
222
|
window.$URL_PARAMS = params;
|
|
223
|
+
// @ts-ignore
|
|
243
224
|
window.$URL_QUERY = query;
|
|
225
|
+
// @ts-ignore
|
|
244
226
|
window.$CURRENT_URL = window.location.hash.substring(1);
|
|
245
227
|
/**
|
|
246
228
|
* @alias render
|
|
@@ -260,7 +242,7 @@ class VaderRouter {
|
|
|
260
242
|
};
|
|
261
243
|
|
|
262
244
|
callback(req, res);
|
|
263
|
-
|
|
245
|
+
// @ts-ignore
|
|
264
246
|
return true;
|
|
265
247
|
}
|
|
266
248
|
|
|
@@ -275,67 +257,38 @@ class VaderRouter {
|
|
|
275
257
|
}
|
|
276
258
|
/**
|
|
277
259
|
* @alias use
|
|
278
|
-
* @param {
|
|
260
|
+
* @param {String} pattern
|
|
261
|
+
* @param {Function} callback
|
|
279
262
|
* @returns {void}
|
|
280
263
|
* @memberof VaderRouter
|
|
281
264
|
* @description Allows you to set routes to be used throughout your spa.
|
|
282
265
|
*/
|
|
283
|
-
use(
|
|
284
|
-
const
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
if (part.startsWith(":")) {
|
|
290
|
-
paramNames.push(part.substring(1));
|
|
291
|
-
return "([^/]+)";
|
|
292
|
-
}
|
|
293
|
-
if (part.startsWith("*")) {
|
|
294
|
-
paramNames.push(part.substring(1));
|
|
295
|
-
return "(.*)";
|
|
296
|
-
}
|
|
297
|
-
if (part.startsWith("?")) {
|
|
298
|
-
queryNames.push(part.substring(1));
|
|
299
|
-
return "([^/]+)";
|
|
300
|
-
}
|
|
301
|
-
return part;
|
|
302
|
-
})
|
|
303
|
-
.join("/");
|
|
304
|
-
const regex = new RegExp("^" + parsedPath + "(\\?(.*))?$");
|
|
266
|
+
use(pattern, callback = null) {
|
|
267
|
+
const regexPattern = pattern
|
|
268
|
+
.replace(/:[^/]+/g, "([^/]+)") // Replace :param with a capturing group
|
|
269
|
+
.replace(/\//g, "\\/"); // Escape forward slashes
|
|
270
|
+
|
|
271
|
+
const regex = new RegExp("^" + regexPattern + "(\\?(.*))?$");
|
|
305
272
|
let params = {};
|
|
306
273
|
let query = {};
|
|
307
|
-
path = parsedPath;
|
|
308
274
|
|
|
309
|
-
//
|
|
310
|
-
|
|
275
|
+
// Get params
|
|
276
|
+
const match = window.location.hash.substring(1).match(regex);
|
|
277
|
+
|
|
278
|
+
if (match) {
|
|
311
279
|
this.storedroutes.push(window.location.hash.substring(1));
|
|
312
|
-
const matches =
|
|
313
|
-
params = {};
|
|
280
|
+
const matches = match.slice(1); // Extract matched groups
|
|
314
281
|
|
|
282
|
+
// Extract named params from the pattern
|
|
283
|
+
const paramNames = pattern.match(/:[^/]+/g) || [];
|
|
315
284
|
for (let i = 0; i < paramNames.length; i++) {
|
|
316
|
-
|
|
285
|
+
const paramName = paramNames[i].substring(1); // Remove the leading ":"
|
|
286
|
+
params[paramName] = matches[i];
|
|
317
287
|
}
|
|
318
|
-
if (
|
|
319
|
-
path.includes(":") &&
|
|
320
|
-
window.location.hash.substring(1).split("?")[1]
|
|
321
|
-
) {
|
|
322
|
-
if (debug.enabled) {
|
|
323
|
-
debug.log(
|
|
324
|
-
[
|
|
325
|
-
`
|
|
326
|
-
Cannot use query params with path params ${path} ${
|
|
327
|
-
window.location.hash.substring(1).split("?")[1]
|
|
328
|
-
}`,
|
|
329
|
-
],
|
|
330
|
-
"assert"
|
|
331
|
-
);
|
|
332
|
-
}
|
|
333
288
|
|
|
334
|
-
return false;
|
|
335
|
-
}
|
|
336
289
|
query = {};
|
|
337
290
|
|
|
338
|
-
const queryString =
|
|
291
|
+
const queryString = matches[paramNames.length]; // The last match is the query string
|
|
339
292
|
if (queryString) {
|
|
340
293
|
const queryParts = queryString.split("&");
|
|
341
294
|
for (let i = 0; i < queryParts.length; i++) {
|
|
@@ -344,13 +297,16 @@ class VaderRouter {
|
|
|
344
297
|
}
|
|
345
298
|
}
|
|
346
299
|
}
|
|
300
|
+
// @ts-ignore
|
|
347
301
|
window.$URL_PARAMS = params;
|
|
302
|
+
// @ts-ignore
|
|
348
303
|
window.$URL_QUERY = query;
|
|
304
|
+
|
|
349
305
|
if (callback) {
|
|
350
|
-
this.routes[
|
|
306
|
+
this.routes[pattern] = callback;
|
|
351
307
|
} else {
|
|
352
|
-
this.
|
|
353
|
-
|
|
308
|
+
this.routes[pattern] = true;
|
|
309
|
+
this.storedroutes.push(window.location.hash.substring(1));
|
|
354
310
|
}
|
|
355
311
|
}
|
|
356
312
|
|
|
@@ -358,6 +314,7 @@ class VaderRouter {
|
|
|
358
314
|
// await dom to be done make sure no new elements are added
|
|
359
315
|
if (
|
|
360
316
|
document.readyState === "complete" ||
|
|
317
|
+
// @ts-ignore
|
|
361
318
|
document.readyState === "loaded" ||
|
|
362
319
|
document.readyState === "interactive"
|
|
363
320
|
) {
|
|
@@ -367,8 +324,8 @@ class VaderRouter {
|
|
|
367
324
|
|
|
368
325
|
/**
|
|
369
326
|
* @alias on
|
|
370
|
-
* @param {
|
|
371
|
-
* @param {
|
|
327
|
+
* @param {String} path
|
|
328
|
+
* @param {Function} callback
|
|
372
329
|
* @returns {void}
|
|
373
330
|
* @memberof VaderRouter
|
|
374
331
|
* @description Allows you to perform actions when the currentRoute changes.
|
|
@@ -409,12 +366,15 @@ class VaderRouter {
|
|
|
409
366
|
basePath = hash[0];
|
|
410
367
|
}
|
|
411
368
|
const route = basePath;
|
|
412
|
-
|
|
369
|
+
this.currentUrl = route;
|
|
370
|
+
// @ts-ignore
|
|
413
371
|
window.$CURRENT_URL = route;
|
|
372
|
+
// @ts-ignore
|
|
414
373
|
window.$URL_PARAMS = {};
|
|
415
374
|
if (
|
|
416
375
|
window.location.hash.substring(1).match(regex) &&
|
|
417
|
-
|
|
376
|
+
// @ts-ignore
|
|
377
|
+
this.routes[window.$CURRENT_URL]
|
|
418
378
|
) {
|
|
419
379
|
this.storedroutes.push(window.location.hash.substring(1));
|
|
420
380
|
const matches = window.location.hash.substring(1).match(regex);
|
|
@@ -454,13 +414,23 @@ class VaderRouter {
|
|
|
454
414
|
return: function (data) {
|
|
455
415
|
this.hooked = false;
|
|
456
416
|
},
|
|
417
|
+
/**
|
|
418
|
+
* @alias send
|
|
419
|
+
* @param {String} selector
|
|
420
|
+
* @param {String} data
|
|
421
|
+
* @returns {void}
|
|
422
|
+
* @memberof VaderRouter
|
|
423
|
+
* @description Allows you to perform actions when the currentRoute changes.
|
|
424
|
+
* @example
|
|
425
|
+
* res.send('#root', '<h1>Hello World</h1>');
|
|
426
|
+
* */
|
|
457
427
|
send: function (selector, data) {
|
|
458
428
|
document.querySelector(selector).innerHTML = data;
|
|
459
429
|
},
|
|
460
430
|
/**
|
|
461
431
|
* @alias render
|
|
462
|
-
* @param {
|
|
463
|
-
* @param {
|
|
432
|
+
* @param {String} selector
|
|
433
|
+
* @param {String} data
|
|
464
434
|
* @returns {void}
|
|
465
435
|
* @memberof VaderRouter
|
|
466
436
|
* @description Allows you to perform actions when the currentRoute changes.
|
|
@@ -469,7 +439,9 @@ class VaderRouter {
|
|
|
469
439
|
document.querySelector(selector).innerHTML = data;
|
|
470
440
|
},
|
|
471
441
|
};
|
|
442
|
+
// @ts-ignore
|
|
472
443
|
window.$URL_QUERY = query;
|
|
444
|
+
// @ts-ignore
|
|
473
445
|
window.$URL_PARAMS = params;
|
|
474
446
|
|
|
475
447
|
/**
|
|
@@ -481,6 +453,8 @@ class VaderRouter {
|
|
|
481
453
|
* @description Allows you to perform actions when the currentRoute changes.
|
|
482
454
|
*/
|
|
483
455
|
callback(req, res);
|
|
456
|
+
} else {
|
|
457
|
+
console.log("no route");
|
|
484
458
|
}
|
|
485
459
|
});
|
|
486
460
|
}
|