npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@anupamtest/routes-menu

v1.0.11

Published

It will generate the menu on the fly and can also save it into a `.json` file from which it can be loaded there on.

Downloads

2

Readme

📚 Build Menu from the folder based routing system in SvelteKit, NextJs, etc.

It will generate the menu on the fly and can also save it into a .json file from which it can be loaded there on.

When starting building a new app and also later on it gives alot of ease to just get the menu on UI as soon as we add folders for the routes.

Many options are there to control the behavior of the Menu Generation and using it there after.

Pre-built Svelte components are also there ready to use in the view page files to render it. Working on to create NextJs components for it.

There will be separate packages for the components to reduce the package dependencies on this package.

@TODO: Post an Image sample of a generated menu.

@TODO: Put TOC here...

🟣 Installation

npm i @anupamtest/routes-menu

In SvelteKit

📒 Usage

By default SvelteKit routing files analogy is used.

Inside +layout.server.ts first do the imports.

import { getMenu, type TMenuOptions } from '@anupamtest/routes-menu';

Simplest Example, No configuration, works for SvelteKit.

export const load = (async () => {
    return {
        menu: getMenu()
    };
})

📒 Customized or Advanced Usage

although there's nothing critical in it ;)

⚙️ Using Menu Options

For other frameworks Set the routes folder path pattern to identify which folder to include in the Menu.

In the below example the routes path routesPath: 'src/routes/**/+page.svelte' will include all those folders which contains the view page +page.svelte in the Menu, which is the default analogy used in SvelteKit.

// In SvelteKit
export const load = (async () => {
    const menuOptions: TMenuOptions = {
        routesPath: 'src/routes/**/+page.svelte'
    }

    return {
        menu: getMenu(menuOptions)
    };
})

For NextJs framework we can set this path as below, depending upon the routing system we are using:

routesPath: 'src/pages/**/page.tsx'

OR

routesPath: 'app/**/page.tsx'

// In NextJs
const menuOptions: TMenuOptions = {
    routesPath: 'app/**/page.tsx',
    outputPath: 'app/',
    outputFilename: 'menu.json'
}
const menu = getMenu(menuOptions)

const LayoutComponent = () => (
    // return/store the menu data or render it here in some menu component...
    <Menu menu={menu} />
)

⚙️ More Menu Options

Excluding Certain Routes

We definitely don't want to show certain folders from the routes in the Menu viz. auth, admin etc. depending upon our app.

You can very well exclude those via Menu Options.

    const menuOptions: TMenuOptions = {
        exclude: ['auth', 'admin/auth']
    }

🟡 All the parameterized routes are excluded by default.

🔵 Will write some more examples for how we can use it...


⚙️ Below is the list of all the Menu Options

You can work very well with their combinations.

Putting this just for now...
Later will create a proper table to explain it and show more examples for its use cases in combination to each other, just like i used it.

export type TMenuOptions = {

    /**
     * The routes directory path pattern to match the directories to show in the menu.
     * All parameterized directories are ignored. viz. /[userId]/
     * 
     * @default  'src/routes/*\/**\/+page.svelte'
     * 
     * @see https://www.npmjs.com/package/fast-glob for source path pattern
    */
    routesPath?: string,

    /**
     * Whether to save the menu to a file from which it can be loaded further without generating it.
     * When TRUE will save the menu every time it's generated from the routes directory filesystem.
     * 
     * @default True
     */
    saveToFile?: boolean,

    /**
     * Whether to load the menu from the saved menu file.
     * Should keep this TRUE once the desired menu is generated and saved to a file.
     * 
     * When FALSE will keep on generating the menu from the routes directory filesystem.
     * 
     * @default true
     */
    loadFromFile?: boolean,

    /**
     * The output path where to save the menu file.
     * @RODO: Remove this and simply use `outputFilename`. `outputPath` hasn't used for any other purpose.
     * @default 'src/lib/'
     */
    outputPath?: string,

    /**
     * The output menu file name. 
     * @default 'menu.json'
     */
    outputFilename?: string,


    /**
     * Backup the existing menu file before saving the new one, inside the set 'outputPath' directory.
     * 
     * @default false
     */
    backupExisting?: boolean,

    /**
     * May not need this! User ccan do this via css at their end
     */
    // childMenuState?: 'open' | 'closed',

    /**
     * Show empty route directories also in the menu 
     * which do not have the index view file, viz. +page.svelte | page.tsx file.
     * 
     * @default false
     */
    showEmptyRoutes?: boolean,

    /**
     * The routes directories to exclude from the menu.
     * @example 
     *  These auth routes will not be shown in the menu.
     *      exclude: ['auth', 'admin/auth'] 
     */
    exclude?: string[],

    /**
     * Menu Ordering, not yet implemented
     * @TODO: Implement ordering...
     */
    order?: unknown
}

📰 Generated Menu Sample

[
    {
        "name": "admin",
        "label": "Admin",
        "icon": "",
        "url": "/admin",
        "children": [
            {
                "name": "schemas",
                "label": "Schemas",
                "icon": "",
                "url": "/admin/schemas",
                "children": [
                    {
                        "name": "editor",
                        "label": "Editor",
                        "icon": "",
                        "url": "/admin/schemas/editor"
                    }
                ]
            },
            {
                "name": "templates",
                "label": "Templates",
                "icon": "",
                "url": "/admin/templates",
                "children": [
                    {
                        "name": "editor",
                        "label": "Editor",
                        "icon": "",
                        "url": "/admin/templates/editor"
                    }
                ]
            }
        ]
    },
    {
        "name": "projects",
        "label": "Projects",
        "icon": "",
        "url": "/projects",
        "children": [
            {
                "name": "docs",
                "label": "Docs",
                "icon": "",
                "url": "/projects/docs"
            },
            {
                "name": "logs",
                "label": "Logs",
                "icon": "",
                "url": "/projects/logs"
            },
            {
                "name": "templates",
                "label": "Templates",
                "icon": "",
                "url": "/projects/templates"
            }
        ]
    },
    {
        "name": "templates",
        "label": "Templates",
        "icon": "",
        "url": "/templates"
    }
]