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

folder-mapper-ts

v1.0.3

Published

Super light-weight tool to generate a JS/TS object representation of a folder, its sub-folders and files in them. Using this tool you can fully leverage your IDEs hinting and make sure you aren't trying to use asset files that aren't in your codebase.

Downloads

2

Readme

Folder Mapper

Super light-weight tool to generate a JS/TS object representation of a folder, its sub-folders and files in them. Using this tool you can fully leverage your IDEs hinting and make sure you aren't trying to use asset files that aren't in your codebase.

Example usage

I highly recommend having a look at the examples repository

Installation:

yarn add folder-mapper-ts

To generate the map:

import { exportFolderMap } from "folder-mapper-ts";

await exportFolderMap({
  path: "/absolute/path/to/the/folder/you/want/to/map",
  outputPath: "/absolute/path/to/the/file/where/you/want/the/map.ts",
});

And then when you want to use the generated paths:

import { MAP } from "./path/to/map";

// Render the image
<Image src={MAP.assets.image_1} />;

// Or

// Read the file contents for further processing etc..
const contents = fs.readFileSync(MAP.assets.image_1);

If you now delete the file image_1.png from your assets folder and re-generate the map your IDE will tell you that you are trying to use a not-existing field of the MAP object, tsc will refuse to compile the project etc... this will prevent you from shipping the now broken code to production.

More configuration options can be found in the examples repo and by looking at the FolderMapperConfig type (this is the type of the config object passed to the exportFolderMap function).

Relative file paths

If you want the file paths in the generated map to be relative to some particular folder you will have to pass the filePathsRelativeTo option in the config like so:

import { exportFolderMap } from "folder-mapper-ts";

await exportFolderMap({
  path: "/absolute/path/to/the/folder/you/want/to/map",
  outputPath: "/absolute/path/to/the/file/where/you/want/the/map.ts",
  filePathsRelativeTo: "/absolute/path/to/which/file/paths/will/be/relative",
});

If you don't pass this option it will default to process.cwd() which is the path from which the the script is launched (not the path where the script is stored).

I recommend looking at the examples repo if you are facing issues.