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

modulism

v1.0.16

Published

CLI for keeping track of how modules depend on each other in your project. **Allows you to see where the module is being used and what other modules it imports by one command.**.

Downloads

4

Readme

Modulism

CLI for keeping track of how modules depend on each other in your project. Allows you to see where the module is being used and what other modules it imports by one command..

npm version

Example

DOCUMENTATION

Design goals

  • Simplify working with modular architecture in frontend apps.
  • Put information about how modules depend on each other into one place.
  • Make easier to detect unnecessary dependencies.

How it works

It simply reads all files in your working directory and parse all of their imports. After that, it determines which file belongs to which module (You mark a module by putting .modulism file in it's root directory). And then, you can see all the information by running modulism log command in your console.

- config.modulism.json file example

{
  "workDir": "src",
  "extensions": "ts, js",
  "modules": {
    "one": {
      "imports": [ "two" ],
      "exports": []
    },
    "two": {
      "imports": [],
      "exports": [ "one" ]
    }
  }
}

- project file system example

- project
    - src
        - one
            index.js
            one.modulism (module description or just an empty file)
        - two
            index.js
            two.modulism (module description or just an empty file)
    config.modulism.json
    package.json

Installation

npm i -g modulism // For local development
npm i modulism // For production pre build check 
// package.json
...
scripts": {
    "test:modulism": "modulism check"
},
...

Getting started

  1. All modulism cli commands must be fired from the root directory of your project.
  2. All modules names must not contain any symbols except: latin characters, numbers, "_", "-". They also must not contain word "modulism".
  3. All modules groups names must not contain any symbols except: latin characters, numbers, "_", "-". They also must not contain words "modulism" and "common".

Supported file's list to parse imports from:

  • js
  • jsx
  • ts
  • tsx
  • mjs
  • vue
  • less
  • css

1. Creating config file

To create your modulism config file run modulism init.

Set workDir property to your project working directory. Example: "workDir": "src"

Set extensions property to file extensions that your project uses. ( Currently only available extensions are ts, js, less and css ) Example: "extensions": "ts, js, less"

[Optional] Set paths property to import path vatiables you use in your project. Example: In your project - import utils from '@common/utils' @common/ is actually commonMod dir in your project's root directory. Your modulism paths property:

...
"paths": {
    "@common": "commonMod/"
},
...

2. Create modules

Module is a folder with isolated code in it. Add a <moduleName>.modulism file in root directory of your module. It could be empty or has module's description in it.

You can also split your modules by groups so the result data would be more informative for you. You can do it in two ways.

  1. Determine group directory. To determine group directory just add .<groupName>.modulism file in your group directory.
  2. Determine group file. To determine group file add *modulism-group <groupName> line in comments of your file.

Example module:

moduleEvents
    - constants
        ...
        .constants.modulism
    - logic
        ...
        .logic.modulism
    index.js
    moduleEvents.modulism

3. Generate modules dependencies config

Run modulism sync. It will update your config file with all data it got from parsing your project.

4. Log results

To check the information about your project's modules run modulism log in terminal. It will return all modules with their dependencies. If you want to check specific modules just write them like this modulism log <module1> <module2>....

Example log result of a module:

Example

- Blue dots are groups which are being imported to module.
- Purple dots are groups which module is exporting.