@hyperfrontend/project-scope/tech/frontend

frontend

Frontend-framework detectors for the modern web framework landscape.

Covers React, Next.js, Vue, Nuxt, Angular, Svelte, SvelteKit, Solid, Qwik, Astro, Remix, and Gatsby. Each <framework>Detector follows the shared FrameworkDetector contract; detectFrontendFrameworks runs them all and returns the aggregate FrameworkDetection[]. The detectors look at package.json dependencies, framework-specific files (next.config.js, vite.config.ts, angular.json, etc.), and characteristic source patterns to score each framework with confidence and evidence.

API Reference

ƒ Functions

§function

angularDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Angular in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Angular framework

const result = angularDetector('/path/to/angular-app', {
  dependencies: { '@angular/core': '^17.0.0', '@angular/cli': '^17.0.0' }
})
// => {
//   id: 'angular',
//   name: 'Angular',
//   category: 'frontend',
//   version: '17.0.0',
//   confidence: 85,
//   detectedFrom: [
//     { type: 'package.json', field: 'dependencies.@angular/core' },
//     { type: 'package.json', field: 'dependencies.@angular/cli' }
//   ]
// }

§function

astroDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Astro in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Astro framework

const result = astroDetector('/path/to/astro-project', {
  dependencies: { 'astro': '^4.0.0' }
})
// => {
//   id: 'astro',
//   name: 'Astro',
//   category: 'meta-framework',
//   version: '4.0.0',
//   confidence: 70,
//   detectedFrom: [{ type: 'package.json', field: 'dependencies.astro' }]
// }

§function

detectFrontendFrameworks(projectPath: string, packageJson?: PackageJson): FrameworkDetection[]

Detect all frontend frameworks in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection[]

Array of detected frameworks, sorted by confidence

Example

Detecting multiple frontend frameworks

const frameworks = detectFrontendFrameworks('/path/to/nextjs-app', {
  dependencies: { 'react': '^18.0.0', 'next': '^14.0.0' }
})
// => [
//   { id: 'nextjs', name: 'Next.js', category: 'meta-framework', confidence: 70, ... },
//   { id: 'react', name: 'React', category: 'frontend', confidence: 60, ... }
// ]

§function

gatsbyDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Gatsby in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Gatsby framework

const result = gatsbyDetector('/path/to/gatsby-blog', {
  dependencies: {
    'gatsby': '^5.0.0',
    'gatsby-plugin-image': '^3.0.0',
    'gatsby-source-filesystem': '^5.0.0'
  }
})
// => {
//   id: 'gatsby',
//   name: 'Gatsby',
//   category: 'meta-framework',
//   version: '5.0.0',
//   confidence: 75,
//   detectedFrom: [
//     { type: 'package.json', field: 'dependencies.gatsby' },
//     { type: 'package.json', field: 'dependencies (gatsby plugins)' }
//   ]
// }

§function

nextjsDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Next.js in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Next.js framework

const result = nextjsDetector('/path/to/nextjs-app', {
  dependencies: { 'next': '^14.0.0', 'react': '^18.0.0' }
})
// => {
//   id: 'nextjs',
//   name: 'Next.js',
//   category: 'meta-framework',
//   version: '14.0.0',
//   confidence: 70,
//   detectedFrom: [{ type: 'package.json', field: 'dependencies.next' }]
// }

§function

nuxtDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Nuxt in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Nuxt framework

const result = nuxtDetector('/path/to/nuxt-app', {
  dependencies: { 'nuxt': '^3.0.0', 'vue': '^3.0.0' }
})
// => {
//   id: 'nuxt',
//   name: 'Nuxt',
//   category: 'meta-framework',
//   version: '3.0.0',
//   confidence: 70,
//   detectedFrom: [{ type: 'package.json', field: 'dependencies.nuxt' }]
// }

§function

qwikDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Qwik in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Qwik framework

const result = qwikDetector('/path/to/qwik-app', {
  dependencies: {
    '@builder.io/qwik': '^1.0.0',
    '@builder.io/qwik-city': '^1.0.0'
  }
})
// => {
//   id: 'qwik',
//   name: 'Qwik',
//   category: 'frontend',
//   version: '1.0.0',
//   confidence: 90,
//   detectedFrom: [
//     { type: 'package.json', field: 'dependencies.@builder.io/qwik' },
//     { type: 'package.json', field: 'dependencies.@builder.io/qwik-city' }
//   ]
// }

§function

reactDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect React in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting React library

const result = reactDetector('/path/to/react-app', {
  dependencies: { 'react': '^18.0.0', 'react-dom': '^18.0.0' }
})
// => {
//   id: 'react',
//   name: 'React',
//   category: 'frontend',
//   version: '18.0.0',
//   confidence: 80,
//   detectedFrom: [
//     { type: 'package.json', field: 'dependencies.react' },
//     { type: 'package.json', field: 'dependencies.react-dom' }
//   ]
// }

§function

remixDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Remix in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Remix framework

const result = remixDetector('/path/to/remix-app', {
  dependencies: {
    '@remix-run/react': '^2.0.0',
    '@remix-run/node': '^2.0.0'
  }
})
// => {
//   id: 'remix',
//   name: 'Remix',
//   category: 'meta-framework',
//   version: '2.0.0',
//   confidence: 90,
//   detectedFrom: [
//     { type: 'package.json', field: 'dependencies.@remix-run/react' },
//     { type: 'package.json', field: 'dependencies.@remix-run/*' }
//   ]
// }

§function

solidDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Solid in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Solid.js framework

const result = solidDetector('/path/to/solid-app', {
  dependencies: { 'solid-js': '^1.8.0', 'vite-plugin-solid': '^2.0.0' }
})
// => {
//   id: 'solid',
//   name: 'Solid',
//   category: 'frontend',
//   version: '1.8.0',
//   confidence: 90,
//   detectedFrom: [
//     { type: 'package.json', field: 'dependencies.solid-js' },
//     { type: 'package.json', field: 'dependencies.vite-plugin-solid' }
//   ]
// }

§function

svelteDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Svelte in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Svelte framework

const result = svelteDetector('/path/to/svelte-app', {
  devDependencies: { 'svelte': '^4.0.0' }
})
// => {
//   id: 'svelte',
//   name: 'Svelte',
//   category: 'frontend',
//   version: '4.0.0',
//   confidence: 70,
//   detectedFrom: [{ type: 'package.json', field: 'dependencies.svelte' }]
// }

§function

sveltekitDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect SvelteKit in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting SvelteKit framework

const result = sveltekitDetector('/path/to/sveltekit-app', {
  devDependencies: { '@sveltejs/kit': '^2.0.0', 'svelte': '^4.0.0' }
})
// => {
//   id: 'sveltekit',
//   name: 'SvelteKit',
//   category: 'meta-framework',
//   version: '2.0.0',
//   confidence: 70,
//   detectedFrom: [{ type: 'package.json', field: 'dependencies.@sveltejs/kit' }]
// }

§function

vueDetector(projectPath: string, packageJson?: PackageJson): FrameworkDetection

Detect Vue in project.

Parameters

Name	Type	Description
§projectPath	`string`	Project directory path
§packageJson?	`PackageJson`	Optional pre-loaded package.json

Returns

FrameworkDetection

Detection result or null if not detected

Example

Detecting Vue.js framework

const result = vueDetector('/path/to/vue-app', {
  dependencies: { 'vue': '^3.0.0', '@vue/cli-service': '^5.0.0' }
})
// => {
//   id: 'vue',
//   name: 'Vue',
//   category: 'frontend',
//   version: '3.0.0',
//   confidence: 85,
//   detectedFrom: [
//     { type: 'package.json', field: 'dependencies.vue' },
//     { type: 'package.json', field: 'dependencies.@vue/cli-service' }
//   ]
// }

◈ Interfaces

§interface

FrameworkDetection

Framework detection result.

Properties

§category:"frontend" | "meta-framework"—

Framework category

§confidence:number—

Detection confidence (0-100)

§detectedFrom:DetectionSource[]—

Detection sources

§id:string—

Framework identifier

§metaFrameworks?:FrameworkDetection[]—

Meta-frameworks built on this framework

§name:string—

Human-readable name

§version?:string—

Detected version

§interface

FrameworkDetector

Framework detector interface.

Properties

§category:"frontend" | "meta-framework"—

Framework category

§id:string—

Framework identifier

§name:string—

Human-readable name

● Variables

§type

frameworkDetectors

All frontend framework detectors