diff --git a/packages/docs/src/components/DependencyCountText.astro b/packages/docs/src/components/DependencyCountText.astro new file mode 100644 index 00000000..cf29f9b4 --- /dev/null +++ b/packages/docs/src/components/DependencyCountText.astro @@ -0,0 +1,7 @@ +For dependency counts, we start by looking at the dependencies for the +meta-framework package directly. For example, how many production, development +and overall dependencies does `Nuxt` have? We then look at dependencies for the +starter projects specifically. Looking at a project's dependencies is more +realistic (like the `starter-*` projects) as meta-frameworks rarely just include +the meta-framework package alone. It is also important to look at direct +dependencies. diff --git a/packages/docs/src/components/DepsChart.astro b/packages/docs/src/components/DepsChart.astro index 684ab211..f9c273a8 100644 --- a/packages/docs/src/components/DepsChart.astro +++ b/packages/docs/src/components/DepsChart.astro @@ -16,7 +16,7 @@ const data = validEntries --- { + const value = framework.frameworkDependencies?.[metric] + if (typeof value !== 'number' || !Number.isFinite(value)) return [] + + return [ + { + name: framework.name, + value, + focused: framework.isFocused, + }, + ] + }) + .sort((a, b) => a.value - b.value || a.name.localeCompare(b.name)) +} +--- + + + + diff --git a/packages/docs/src/components/FrameworkDependencyStatsTable.astro b/packages/docs/src/components/FrameworkDependencyStatsTable.astro new file mode 100644 index 00000000..33cc19a6 --- /dev/null +++ b/packages/docs/src/components/FrameworkDependencyStatsTable.astro @@ -0,0 +1,29 @@ +--- +import { frameworkDepsStats } from '../lib/collections' +import { getFrameworkSlug } from '../lib/utils' +import StatsTable from './StatsTable.astro' + +const frameworkDepsColumns = [ + { + key: 'name', + header: 'Framework', + nameCell: true, + href: (row: Record) => + `/framework/${getFrameworkSlug(row.package as string)}`, + }, + { key: 'allDependencies', header: 'Deps' }, + { key: 'devDependencies', header: 'Dev' }, + { key: 'prodDependencies', header: 'Prod' }, + { + key: 'graph', + header: 'Graph', + href: (row: Record) => row.graphUrl as string, + }, +] +--- + + diff --git a/packages/docs/src/components/FrameworkDependencyVersionCharts.astro b/packages/docs/src/components/FrameworkDependencyVersionCharts.astro index cdeafa81..42203f16 100644 --- a/packages/docs/src/components/FrameworkDependencyVersionCharts.astro +++ b/packages/docs/src/components/FrameworkDependencyVersionCharts.astro @@ -1,4 +1,5 @@ --- +import DependencyCountText from './DependencyCountText.astro' import VersionLineChart from './VersionLineChart.astro' interface Props { @@ -8,29 +9,52 @@ interface Props { const { versions } = Astro.props --- + + + + + + +### Meta-framework Direct Package Counts + + + + +### Starter Projects + diff --git a/packages/docs/src/content/docs/dev-time.mdx b/packages/docs/src/content/docs/dev-time.mdx index ad06a312..b9a433f9 100644 --- a/packages/docs/src/content/docs/dev-time.mdx +++ b/packages/docs/src/content/docs/dev-time.mdx @@ -8,7 +8,10 @@ import BrowserBaselineTable from '../../components/BrowserBaselineTable.astro' import BuildSizeCharts from '../../components/BuildSizeCharts.astro' import CoreJsTable from '../../components/CoreJsTable.astro' import DependencyCharts from '../../components/DependencyCharts.astro' +import DependencyCountText from '../../components/DependencyCountText.astro' import DependencyStatsTable from '../../components/DependencyStatsTable.astro' +import FrameworkDependencyCharts from '../../components/FrameworkDependencyCharts.astro' +import FrameworkDependencyStatsTable from '../../components/FrameworkDependencyStatsTable.astro' import NodeModulesSizeCharts from '../../components/NodeModulesSizeCharts.astro' ## Setup @@ -21,6 +24,15 @@ Each starter project uses each meta-frameworks recommended setup via their CLI w Methodology: [Dependency Counts](/methodology/#dependency-counts). + + +### Meta-framework Direct Package Counts + + + + +### Starter Projects + diff --git a/packages/docs/src/lib/collections.ts b/packages/docs/src/lib/collections.ts index d1f288bb..fdc11b83 100644 --- a/packages/docs/src/lib/collections.ts +++ b/packages/docs/src/lib/collections.ts @@ -201,6 +201,41 @@ export const depsStats = starterStats.map((f) => ({ graph: 'View', })) +const frameworkPackageNames: Record = { + 'starter-astro': 'astro', + 'starter-mastro': '@mastrojs/mastro', + 'starter-next-js': 'next', + 'starter-nuxt': 'nuxt', + 'starter-react-router': '@react-router/dev', + 'starter-solid-start': '@solidjs/start', + 'starter-sveltekit': '@sveltejs/kit', + 'starter-tanstack-start-react': '@tanstack/react-start', +} + +export const frameworkDepsStats = starterStats.flatMap((f) => { + const dependencies = f.frameworkDependencies + const frameworkPackage = frameworkPackageNames[f.package] + if (dependencies == null || frameworkPackage == null) return [] + + const graphQuery = + f.frameworkVersion != null && f.frameworkVersion !== 'unknown' + ? `${frameworkPackage}@${f.frameworkVersion}` + : frameworkPackage + + return [ + { + name: f.name, + package: f.package, + isFocused: f.isFocused, + allDependencies: dependencies.allDependencies.toLocaleString(), + devDependencies: dependencies.devDependencies.toLocaleString(), + prodDependencies: dependencies.prodDependencies.toLocaleString(), + graph: 'View', + graphUrl: `https://npmgraph.js.org/?q=${encodeURIComponent(graphQuery)}`, + }, + ] +}) + export const buildInstallData = starterStats.map((f) => ({ name: f.name, package: f.package,