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

@sketchmine/code-analyzer

v3.0.0

Published

Pulls out the information from a source code and provides an abstract representation in JSON format about the code.

Downloads

16

Readme

Github banner for sketchmine

@sketchmine/code-analyzer

Note: This is a Dynatrace internal tool that may not fit your needs.

The code-analyzer works like a compiler, analyzing the provided source code of the Angular Component Libraries and generating an abstract syntax tree (AST) from the Angular components. The output of the meta information is provided in JSON format and contains all information about all the components in the library and their variants.

This solution is currently tailored for the Dynatrace Angular Component Libraries. Feel free to commit a pull request with your solution for your company.

Dependency graph

Dependency graph of the sketchmine code-analyzer

Development

First, you need the Angular Component Libraries source code. You can easily run a sh ./src/code-analyzer/prepare.sh script, which takes care of this for you.

Afterward, run the rollup build in one window: npm run build:dev this will start rollup in watch mode with cokidar to compile the .ts files on the file in the specified dist folder (specified in ./config/build.js). The compiled output can easily be started with node dist/code-analyzer. The possible command line arguments for the application are written as default values in the ./src/code-analyzer/config.json. The commandline arguments overwrite the defaults from the JSON.

Command line arguments

-h, --help              | display help
-c, --config            | path to the configuration file
--rootDir               | root dir of the angular components library
--library               | path to lib folder where the components are located from root
--inFile                | index.ts file as entry point for the lib
--outFile               | the file that holds the meta-information – as .json

Prerequisites

  • npm, node
  • Where do I get these tools?
  • Are there specific versions required?

Annotations for the code

It's possible to add JSDoc annotations that are specific for the generation of the meta information abstraction of the library in case some properties are filled with values or classes that can be ignored for design unrelated stuff.

// TODO: add optional selector to click and hoverable, to specify a trigger for clicking!

| Annotation | Explanation | | --- | --- | | @internal | Marks property, class, ..., as internal and will be ignored. The same like private class members. | | @design-unrelated | Marks property, class, ..., as unrelated for the design system and will be ignored by the parser. | | @design-hoverable | the component is hoverable | | @design-clickable | the component is clickable | | @design-prop-value "UNIQQUE_ID_FOR_ELEMENT" | bind a custom value to a property. can be even a complex object or a number, string, etc.. see Regex | | @design-param-value propToBeBinded {obj: "asdf"} | bind a custom value to a specific param. can be even a complex object or a number, string, etc.. see Regex | | @no-design-combinations | Does not combine all the properties together and did not generate all possible combinations. | | @design-action-timeout | Uses a delay for drawing, if an action should be performed like an animation.|

How to install

Just run npm i in the root.

How to develop

For debbugging, you can specify specific debug spaces with DEBUG=${space1},${space2},${space3}... node code-analyzer or just set DEBUG to true.

Available debug spaces for granular logging:

  • annotations

How to run tests

There are ts-lint and compiler rules. Just run npm run lint.

For tests, the Jest framework was selected. Just run npm run test

Deployment

URLs

Architecture

This code-analyzer is part of the .sketch generation ecosystem.