Direct Deps

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.

packages/docs/src/components/DepsChart.astro

@@ -16,7 +16,7 @@ const data = validEntries
 ---
 
 <ComparisonBarChart
-  title="Deps"
+  title="Starter Project Dev Dependencies"
   data={data}
   valueFormat="count"
   yAxisLabel="Dependency count"

packages/docs/src/components/DuplicateDependencyChart.astro

@@ -8,7 +8,7 @@ const data = [...chartDuplicateDependencyData].sort(
 ---
 
 <ComparisonBarChart
-  title="Duplicate Dependencies"
+  title="Starter Project Duplicate Dependencies"
   data={data}
   valueFormat="count"
   yAxisLabel="Dependency count"

packages/docs/src/components/FrameworkDependencyCharts.astro

@@ -0,0 +1,43 @@
+---
+import { starterStats } from '../lib/collections'
+import ComparisonBarChart from './ComparisonBarChart.astro'
+
+type DependencyMetric =
+  'allDependencies' | 'devDependencies' | 'prodDependencies'
+
+function getChartData(metric: DependencyMetric) {
+  return starterStats
+    .flatMap((framework) => {
+      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))
+}
+---
+
+<ComparisonBarChart
+  title="Metaframework Dependencies"
+  data={getChartData('allDependencies')}
+  valueFormat="count"
+  yAxisLabel="Dependency count"
+/>
+<ComparisonBarChart
+  title="Metaframework Development Dependencies"
+  data={getChartData('devDependencies')}
+  valueFormat="count"
+  yAxisLabel="Dependency count"
+/>
+<ComparisonBarChart
+  title="Metaframework Production Dependencies"
+  data={getChartData('prodDependencies')}
+  valueFormat="count"
+  yAxisLabel="Dependency count"
+/>

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<string, unknown>) =>
+      `/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<string, unknown>) => row.graphUrl as string,
+  },
+]
+---
+
+<StatsTable
+  label="Metaframework package dependency counts"
+  columns={frameworkDepsColumns}
+  data={frameworkDepsStats}
+/>

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
 ---
 
+<DependencyCountText />
+
+<VersionLineChart
+  title="Metaframework · Production Dependencies"
+  versions={versions}
+  metric="frameworkDependencies.prodDependencies"
+  valueFormat="count"
+  yAxisLabel="Dependencies"
+/>
+<VersionLineChart
+  title="Metaframework · Development Dependencies"
+  versions={versions}
+  metric="frameworkDependencies.devDependencies"
+  valueFormat="count"
+  yAxisLabel="Dependencies"
+/>
+<VersionLineChart
+  title="Metaframework · All Dependencies"
+  versions={versions}
+  metric="frameworkDependencies.allDependencies"
+  valueFormat="count"
+  yAxisLabel="Dependencies"
+/>
 <VersionLineChart
-  title="Production Dependencies"
+  title="Starter Project · Production Dependencies"
   versions={versions}
   metric="prodDependencies"
   valueFormat="count"
   yAxisLabel="Dependencies"
 />
 <VersionLineChart
-  title="Development Dependencies"
+  title="Starter Project · Development Dependencies"
   versions={versions}
   metric="devDependencies"
   valueFormat="count"
   yAxisLabel="Dependencies"
 />
 <VersionLineChart
-  title="All Dependencies"
+  title="Starter Project · All Dependencies"
   versions={versions}
   metric="allDependencies"
   valueFormat="count"
   yAxisLabel="Dependencies"
 />
 <VersionLineChart
-  title="Duplicate Dependencies"
+  title="Starter Project · Duplicate Dependencies"
   versions={versions}
   metric="duplicateDependencies"
   valueFormat="count"

packages/docs/src/components/ProdDepsChart.astro

@@ -16,7 +16,7 @@ const data = validEntries
 ---
 
 <ComparisonBarChart
-  title="Prod Deps"
+  title="Starter Project Production Dependencies"
   data={data}
   valueFormat="count"
   yAxisLabel="Dependency count"

packages/docs/src/content/docs/all-frameworks.mdx

@@ -12,7 +12,10 @@ import CoreJsTable from '../../components/CoreJsTable.astro'
 import CoreWebVitalsCharts from '../../components/CoreWebVitalsCharts.astro'
 import CoreWebVitalsTable from '../../components/CoreWebVitalsTable.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'
 import ServerSideRenderedCharts from '../../components/ServerSideRenderedCharts.astro'
 import ServerSideRenderedStatsTable from '../../components/ServerSideRenderedStatsTable.astro'
@@ -28,6 +31,15 @@ import SSRRequestThroughputStatsTable from '../../components/SSRRequestThroughpu
 
 Methodology: [Dependency Counts](/methodology/#dependency-counts).
 
+<DependencyCountText />
+
+### Meta-framework Direct Package Counts
+
+<FrameworkDependencyStatsTable />
+<FrameworkDependencyCharts />
+
+### Starter Projects
+
 <DependencyStatsTable />
 <DependencyCharts />
 

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).
 
+<DependencyCountText />
+
+### Meta-framework Direct Package Counts
+
+<FrameworkDependencyStatsTable />
+<FrameworkDependencyCharts />
+
+### Starter Projects
+
 <DependencyStatsTable />
 <DependencyCharts />
 

packages/docs/src/lib/collections.ts

@@ -201,6 +201,41 @@ export const depsStats = starterStats.map((f) => ({
   graph: 'View',
 }))
 
+const frameworkPackageNames: Record<string, string> = {
+  '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,