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

readem

v0.2.15

Published

Read the !@#$%^& docs!

Downloads

17

Readme

read'em

Read the !@#$%^& docs!

Use readem to generate and serve documentation for source files that use JSDoc-style comments.

This is a WIP. For now, see the jsdoc-to-docsify example's README. Docsify rendering is coming next, along with support for more tags.

Features:

  • Scan for and retrieve data from all JSDoc comments of all files in a given folder (and subfolders) using the FolderScanner class. This gives you a JS object with all the information from every tag. This does not do anything more than that.

    The JSDoc syntax is loose. All JSDoc tags follow the format @thetag {type} name - and a description where all fields are optional. The object literal returned for each tag is simple, something like the following (TODO expand once we use readem to generate readem's docs):

    // Map of file to array of comments (in order they are found in their file)
    return {
    	// A file mapped to its comments.
    	'./path/to/source/file.js': [
    		// Each comment is a map of tag names to tag content
    		{
    			thetag: {type: 'type', name: 'name', description: 'and a description'},
    			othertag: {type: 'SomeType', name: 'something', description: 'and a another description'},
    		},
    		// And here's the tag content of another comment in the same file.
    		{
    			anothertag: {type: 'SomeType', name: 'another', description: 'and a another description'},
    		},
    	],
    	// Another file and its comments' tag data. Note the .cpp extension. FolderScanner looks for comments (/** */), regardless of source format.
    	'./path/to/another/file.cpp': [
    		{
    			onemoretag: {type: 'SomeType', name: 'onemore', description: 'and yet another description'},
    		},
    	],
    }
  • The CommentAnalyzer class takes things one step further: it builds on top of FolderScanner to analyze all the extracted JSDoc tags and does things like create JS objects representing information for classes (including their properties and methods) and functions (including their parameters and return types). TODO: This should probably be renamed to ProgrammingCommentAnalyzer (because we could, for example, make an analyzer that analyzes JSDoc comments from CSS files). It returns an object similar to the following (TODO make docs and ensure this is accurate):

    return {
    	// The path of the folder that CommentAnalyzer was told to scan.
    	sourceFolder: './path/to/folder/',
    
    	// Class info is gathered from JSDoc comments with the `@class` tag, and
    	// all the comments with `@property` or `@method` tags found between a
    	// respective `@class` comment and the next `@class` comment or file
    	// ending.
    	classes: {
    		// `@class` comments and supporting comments.
    		SomeClass: {
    			name: 'SomeClass',
    			file: './path/to/SomeClass.php',
    			description: 'The description of the class',
    			abstract: boolean, // With the `@abstract` tag.
    			extends: [
    				// This is an array of the class names that the given class extends
    				// (from multiple `@extends` tags naming the classes that are
    				// extended). This is useful for documenting not just single
    				// inheritance, but also multiple inheritance (f.e. this could be
    				// done with "class-factory mixins" in JavaScript/TypeScript, but
    				// instead of describing the mixin functions). By knowing the name,
    				// information for the base class can be grabbed from the root
    				// `classes` map.
    				'OneClass',
    				'AnotherClass',
    				// ...
    			],
    			properties: {
    				// `@property` comments
    				someProp: {
    					name: 'someProp',
    					description: 'The description of the property',
    					access: 'protected', // `@public` (default), `@protected`, or `@private` tags
    					type: 'SomeType',
    				},
    				// more properties...
    			},
    			methods: {
    				// `@method` comments
    				someMethod: {
    					name: 'someMethod',
    					description: 'The description of the method',
    					access: 'public',
    					params: {
    						// `@param` tags
    						parameterName: {
    							name: 'parameterName',
    							type: 'SomeType',
    							description: "The parameter's description.",
    						},
    						// more parameters...
    					},
    					returns: 'SomeReturnType', // `@return` or `@returns` tag
    				},
    				// more methods...
    			},
    		},
    		// more classes.
    	},
    	// This contains info for any comment with an `@function` tag that also contains @param or @return or @returns JSDoc tags.
    	functions: {
    		// `@function` comments
    		someFunction: {
    			name: 'someFunction',
    			file: './path/to/someFunction.ts',
    			description: 'The description of the method',
    			params: {
    				// `@param` tags
    				parameterName: {
    					name: 'parameterName',
    					type: 'SomeType',
    					description: "The parameter's description.",
    				},
    				// more parameters...
    			},
    			returns: 'SomeReturnType', // `@return` or `@returns` tag
    		},
    		// more functions...
    	},
    }

    TODO: Allow grouping by type, or grouping by file.

    TODO The analysis is fairly simple for now, and convers the most basic features of classes and functions: only classes and functions are analyzed, and basically what you see above is all the information that is returned. We could add support for class concepts like @packageprotected, @final, @friendof, etc, things like @deprecated for both classes and functions, or new top-level things like @typedef for defining non-runtime types.

    Please open a request if you have any ideas or needs!

  • The MarkdownRenderer class goes even one step further, but this class is the most incomplete class at the moment. Given what CommentAnalyzer spits out, MarkdownRenderer will output markdown files (based on data from the analyzed classes and functions) to a destination folder, matching the same folder structure as with the input source folder, but inside the destination folder. If a class extends another class, MarkdownRenderer will create a link to the other class's file, making it navigable.

    TODO: Also include functions, like with build-docs.js in the jsdoc-to-docsify example.