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

@netlify/framework-info

v9.8.11

Published

Framework detection utility

Downloads

478,170

Readme

Framework detection utility.

Detects which framework a specific website is using. The framework's build/dev commands, directories and server port are also returned.

The following frameworks are detected:

  • Static site generators: Gatsby, Hugo, Jekyll, Next.js, Nuxt, Hexo, Gridsome, Docusaurus, Eleventy, Middleman, Phenomic, React-static, Stencil, Vuepress, Assemble, DocPad, Harp, Metalsmith, Roots, Wintersmith
  • Front-end frameworks: create-react-app, Vue, Sapper, Angular, Ember, Svelte, Expo, Quasar
  • Build tools: Parcel, Brunch, Grunt, Gulp

If you're looking for a way to run framework-info via CLI check the build-info project.

Additions and updates are welcome!

Example (Node.js)

import { listFrameworks, hasFramework, getFramework, getFrameworkById } from '@netlify/framework-info'

console.log(await listFrameworks({ projectDir: './path/to/gatsby/website' }))
// [
//   {
//     id: 'gatsby',
//     name: 'Gatsby',
//     category: 'static_site_generator',
//     dev: {
//       commands: ['gatsby develop'],
//       port: 8000,
//       pollingStrategies: [{ name: 'TCP' }]
//     },
//     build: {
//       commands: ['gatsby build'],
//       directory: 'public'
//     },
//     staticAssetsDirectory: "static",
//     env: { GATSBY_LOGGER: 'yurnalist' },
//     plugins: []
//   }
// ]

console.log(await listFrameworks({ projectDir: './path/to/vue/website' }))
// [
//   {
//     id: 'vue',
//     name: 'Vue.js',
//     category: 'frontend_framework',
//     dev: {
//       commands: ['npm run serve'],
//       port: 8080,
//       pollingStrategies: [{ name: 'TCP' }]
//     },
//     build: {
//       commands: ['vue-cli-service build'],
//       directory: 'dist'
//     },
//     env: {},
//     plugins: []
//   }
// ]

console.log(await hasFramework('vue', { projectDir: './path/to/vue/website' }))
// true

console.log(await getFramework('vue', { projectDir: './path/to/vue/website' }))
// {
//   id: 'vue',
//   name: 'Vue.js',
//   category: 'frontend_framework',
//   dev: {
//     commands: ['npm run serve'],
//     port: 8080,
//     pollingStrategies: [{ name: 'TCP' }]
//   },
//   build: {
//     commands: ['vue-cli-service build'],
//     directory: 'dist'
//   },
//   env: {},
//   plugins: []
// }

console.log(getFrameworkById('vue'))
// {
//   id: 'vue',
//   name: 'Vue.js',
//   category: 'frontend_framework',
//   dev: {
//     commands: ['npm run serve'],
//     port: 8080,
//     pollingStrategies: [{ name: 'TCP' }]
//   },
//   build: {
//     commands: ['vue-cli-service build'],
//     directory: 'dist'
//   },
//   env: {},
//   plugins: []
// }

Installation

npm install @netlify/framework-info

Usage (Node.js)

listFrameworks(options?)

options: object?
Return value: Promise<object[]>

Options

projectDir

Type: string
Default value: process.cwd()

Path to the website's directory.

Return value

This returns a Promise resolving to an array of objects describing each framework. The array can be empty, contain a single object or several objects.

Each object has the following properties.

id

Type: string

Id such as "gatsby".

name

Type: string

Framework name such as "Gatsby".

category

Type: string

Category among "static_site_generator", "frontend_framework" and "build_tool".

dev

Type: object

Information about the dev command.

commands

Type: string[]

Dev command. There might be several alternatives.

port

Type: number

Server port.

pollingStrategies

Type: object[]

Polling strategies to use when checking if the dev server is ready.

build

Type: object

Information about the build command.

commands

Type: string[]

Build command. There might be several alternatives.

directory

Type: string

Relative path to the directory where files are built.

staticAssetsDirectory

Type: string

Directory where the framework stores static assets. Can be undefined.

env

Type: object

Environment variables that should be set when calling the dev command.

plugins

Type: string[]

A list of recommend Netlify build plugins to install for the framework.

hasFramework(frameworkId, options?)

options: object?
Return value: Promise<boolean>

Same as listFramework() except only for a specific framework and returns a boolean.

getFramework(frameworkId, options?)

options: object?
Return value: Promise<object>

Same as listFramework() except the framework is passed as argument instead of being detected. A single framework object is returned.

Usage (CLI)

$ framework-info [projectDirectory]

This prints the ids of each framework.

If known is found, unknown is printed.

Available flags:

  • --long: Show more information about each framework. The output will be a JSON array.

Add or update a framework

Each framework is a JSON file in the /src/frameworks/ directory. For example:

{
  "id": "gatsby",
  "name": "Gatsby",
  "category": "static_site_generator",
  "detect": {
    "npmDependencies": ["gatsby"],
    "excludedNpmDependencies": [],
    "configFiles": ["gatsby-config.js"]
  },
  "dev": {
    "command": "gatsby develop",
    "port": 8000,
    "pollingStrategies": [{ "name": "TCP" }, { "name": "HTTP" }]
  },
  "build": {
    "command": "gatsby build",
    "directory": "public"
  },
  "staticAssetsDirectory": "static",
  "env": { "GATSBY_LOGGER": "yurnalist" },
  "plugins": []
}

All properties are required.

id

Type: string

Id of the framework.

name

Type: string

Name of the framework.

category

Type: string

One of "static_site_generator", "frontend_framework" or "build_tool".

detect

Type: object

Information used to detect this framework

npmDependencies

Type: string[]

Framework's npm packages. Any project with one of those packages in their package.json (dependencies or devDependencies) will be considered as using the framework.

If empty, this is ignored.

excludedNpmDependencies

Type: string[]

Inverse of npmDependencies. If any project is using one of those packages, it will not be considered as using the framework.

If empty, this is ignored.

configFiles

Type: string[]

Framework's configuration files. Those should be paths relative to the project's directory. Any project with one of configuration files will be considered as using the framework.

If empty, this is ignored.

dev

Type: object

Parameters to detect the dev command.

command

Type: string

Default dev command.

port

Type: number

Local dev server port.

pollingStrategies

Type: object[]

Polling strategies to use when checking if the dev server is ready.

build

Type: object

Parameters to detect the build command.

command

Type: string

Default build command.

directory

Type: string

Directory where built files are written to.

staticAssetsDirectory

Type: string

Directory where the framework stores static assets where relevant for the framework.

env

Type: object

Environment variables that should be set when running the dev command.

plugins

Type: object[]

A list of Netlify build plugins package names and conditions. If a condition is met for a plugin it will be returned in the framework's plugin's list.

For example

{
  "plugins": [
    {
      "packageName": "@netlify/plugin-nextjs",
      "condition": { "minNodeVersion": "10.13.0" }
    }
  ]
}