VanCone Features #185
Replies: 2 comments 2 replies
-
Hey @yahia-berashish - glad you like it! TypeScript - I'm definitely interested in adding support for this. Of your feature requests this is the one I'm most interested in, I have other projects taking up bandwidth if you're interested in helping this would be a good one! It would be nice to get it done now before adding more features. For Component routing, are you talking about something like this? It seems like this would also go with the slot/outlet feature for sub-routes. I hadn't initially thought about either of these two ideas but I'm kind of intrigued now. I'm gonna sleep on it and see if anything comes to me. Seems like it could be possible to come up with a lightweight API that could handle this. If you have any ideas on what an API would look like feel free to put out some ideas! |
Beta Was this translation helpful? Give feedback.
-
I just pushed an update yesterday that adds another property to the route definition: {
path: "/user/:userId",
backend: "/secure/user/:userId", // new property
name: "user",
title: "VanJS Example | User",
callable: async () => import('./app/pages/user')
} A potential route API could look something like this: router(
route("user", "/user/:userId", userPage, {title: "VanJS Example | User", back: "/secure/user/:userId"}),
route("item", "/items/:itemID", itemPage, {title: "VanJS Example | Item"}),
route("home", "/", homePage, {title: "VanJS Example"}),
route("notFound", ".*", homePage, {title: "VanJS Example | Not Found"})
)
For nested child routes you could have something like this: router(
route("user", "/user/:userId", userPage, {title: "VanJS Example | User", back: "/secure/user/:userId"},
route("user-inbox", "/inbox", userInbox),
route("user-feed", "/feed", userFeed),
route("user-gallery", "/gallery", userGallery)
),
route("item", "/items/:itemID", itemPage, {title: "VanJS Example | Item"}),
route("home", "/", homePage, {title: "VanJS Example"}),
route("notFound", ".*", homePage, {title: "VanJS Example | Not Found"})
) If you look in the spa.js file in the const userPage = (params, query, context, outlet) => {
/* our parent component, a search page may have passed in preloaded information via navLink, if not, we'll fetch it */
const userInfo = (context) ? context : fetchUserInfo(params.id)
return div(
p("Hi I am: " + userInfo.name),
p("some query string data: " + query.data),
outlet()
);
} I like the idea of generating routes this way but there are a couple other change I want to make to the repository before adding in this because those changes could affect this API. However if you're motivated to work on it I would happily accept a pull request! It's probably easiest to state without doing the nested routes and then build up from there. Thanks! |
Beta Was this translation helpful? Give feedback.
-
Hello again.
Very happy to finally see a full SPA implementation @b-rad-c
But I have some questions, mainly if VanCone supports the following features, and if not, how can they be implemented:
I would be happy to help with anything 👋🏼
Beta Was this translation helpful? Give feedback.
All reactions