Parker Codes
Parker Codes
PostsComments
SSolidJS
Created by Parker Codes on 5/7/2024 in #support
Get array of matched nested routes
Another friend, Fabien (can't find him with @) had a great proposed solution: The latest version of solid-router includes a new hook useCurrentMatches(), so this is only available as of last week! Great timing for me and my team. 😄 https://github.com/solidjs/solid-router?tab=readme-ov-file#usecurrentmatches Then for route metadata we can add an extra info to each route. Here's an example new hook he wrote based on this: 
export function useBreadcrumbs() {
    const matches = useCurrentMatches();

    return matches
        .map(i => {
            if (i.route?.info?.breadcrumb) {
                return { title: i.route.info.breadcrumb as string, path: i.path };
            } else {
                return null;
            }
        })
        .filter(i => i !== null);
}
export function useBreadcrumbs() {
    const matches = useCurrentMatches();

    return matches
        .map(i => {
            if (i.route?.info?.breadcrumb) {
                return { title: i.route.info.breadcrumb as string, path: i.path };
            } else {
                return null;
            }
        })
        .filter(i => i !== null);
}
8 replies
SSolidJS
Created by Parker Codes on 5/7/2024 in #support
Get array of matched nested routes
Pinging some friends 🙂 @Atila @Alex Lohr
8 replies
SSolidJS
Created by Parker Codes on 5/7/2024 in #support
Get array of matched nested routes
The best way I can think of doing this in userland is to traverse the tree and somehow check if each depth matches. I can't use useMatch() because it's a one-time check and not a signal subscription. I'd want to reutilize the same matching mechanism as the router to avoid discrepancy.
8 replies
SSolidJS
Created by Parker Codes on 2/26/2024 in #support
Scope styles to a page
Hey, I like this! My use case is too narrow to pull in an extra dependency, but I'll keep this in mind for the future. Feels a lot more expressive, like Svelte and Vue style blocks.
8 replies
SSolidJS
Created by Parker Codes on 2/26/2024 in #support
Scope styles to a page
This works easily enough! A little hacky for now until a better structure is in place. 
onMount(() => {
  document.documentElement.classList.remove("x-layout");
});
onCleanup(() => {
  document.documentElement.classList.add("x-layout");
});
onMount(() => {
  document.documentElement.classList.remove("x-layout");
});
onCleanup(() => {
  document.documentElement.classList.add("x-layout");
});
8 replies
SSolidJS
Created by Parker Codes on 2/26/2024 in #support
Scope styles to a page
I may just have to use JS to set these styles in the page lifetime functions.
8 replies