feat(build-info): pass feature flags as json and change plugins to an…

… object

BREAKING CHANGE: Plugin build settings now use an object array, not string lists,
allowing extra details like install source and if always needed at runtime.

packages/build-info/src/build-systems/nx.test.ts

@@ -197,7 +197,7 @@ describe('nx-integrated project.json based', () => {
           frameworkPort: 4200,
           name: `Nx + Next.js ${join('packages/website')}`,
           packagePath: join('packages/website'),
-          plugins_recommended: ['@netlify/plugin-nextjs'],
+          plugins: [{ name: '@netlify/plugin-nextjs', alwaysInstall: true }],
         }),
       ]),
     )
@@ -212,7 +212,7 @@ describe('nx-integrated project.json based', () => {
           frameworkPort: 3000,
           name: `Nx + Astro ${join('packages/astro')}`,
           packagePath: join('packages/astro'),
-          plugins_recommended: [],
+          plugins: [],
         }),
       ]),
     )
@@ -250,7 +250,7 @@ describe('nx-integrated workspace.json based', () => {
           frameworkPort: 4200,
           name: `Nx + React Static ${join('apps/website')}`,
           packagePath: join('apps/website'),
-          plugins_recommended: [],
+          plugins: [],
         }),
       ]),
     )
@@ -264,7 +264,7 @@ describe('nx-integrated workspace.json based', () => {
           framework: { id: 'astro', name: 'Astro' },
           name: `Nx + Astro ${join('apps/astro')}`,
           packagePath: join('apps/astro'),
-          plugins_recommended: [],
+          plugins: [],
         }),
       ]),
     )

packages/build-info/src/frameworks/angular.test.ts

@@ -31,7 +31,7 @@ test('should detect Angular', async ({ fs }) => {
   expect(detected?.[0].build.command).toBe('ng build --prod')
   expect(detected?.[0].build.directory).toBe(fs.join('dist', 'demo', 'browser'))
   expect(detected?.[0].dev?.command).toBe('ng serve')
-  expect(detected?.[0].plugins).toEqual(['@netlify/angular-runtime'])
+  expect(detected?.[0].plugins).toEqual([{ name: '@netlify/angular-runtime' }])
 })
 
 test('should only install plugin on v17+', async ({ fs }) => {

packages/build-info/src/frameworks/angular.ts

@@ -31,7 +31,7 @@ export class Angular extends BaseFramework implements Framework {
 
     if (this.detected) {
       if (this.version && gte(this.version, '17.0.0-rc')) {
-        this.plugins.push('@netlify/angular-runtime')
+        this.plugins.push({ name: '@netlify/angular-runtime' })
         const angularJson = await this.project.fs.gracefullyReadFile('angular.json')
         if (angularJson) {
           const { projects, defaultProject } = JSON.parse(angularJson)

packages/build-info/src/frameworks/framework.ts

@@ -39,6 +39,13 @@ export type Detection = {
 
 export type FrameworkInfo = ReturnType<Framework['toJSON']>
 
+export type BuildPlugin = {
+  name: string
+  /** Plugins that should be always installed */
+  alwaysInstall?: boolean
+  source?: 'toml'
+}
+
 export interface Framework {
   project: Project
 
@@ -67,7 +74,7 @@ export interface Framework {
     light?: string
     dark?: string
   }
-  plugins: string[]
+  plugins: BuildPlugin[]
   env: Record<string, string>
 
   detect(): Promise<DetectedFramework | undefined>
@@ -147,7 +154,7 @@ export abstract class BaseFramework implements Framework {
   configFiles: string[] = []
   npmDependencies: string[] = []
   excludedNpmDependencies: string[] = []
-  plugins: string[] = []
+  plugins: BuildPlugin[] = []
   staticAssetsDirectory?: string
   env = {}
   dev?: {
@@ -355,7 +362,7 @@ export abstract class BaseFramework implements Framework {
             {},
           )
         : undefined,
-      plugins: this.plugins,
+      plugins: this.plugins.map(({ name }) => name),
     }
   }
 }

packages/build-info/src/frameworks/gatsby.test.ts

@@ -16,7 +16,7 @@ test('should not add the plugin if the node version is below 12.13.0', async ({
   fs.cwd = cwd
   const detected = await new Project(fs, cwd).setNodeVersion('12.12.9').detectFrameworks()
   expect(detected?.[0].id).toBe('gatsby')
-  expect(detected?.[0].plugins).toMatchObject([])
+  expect(detected?.[0].plugins).toHaveLength(0)
 })
 
 test('should detect a simple Gatsby project and add the plugin if the node version is large enough', async ({ fs }) => {
@@ -27,7 +27,7 @@ test('should detect a simple Gatsby project and add the plugin if the node versi
   fs.cwd = cwd
   const detected = await new Project(fs, cwd).setNodeVersion('12.13.0').detectFrameworks()
   expect(detected?.[0].id).toBe('gatsby')
-  expect(detected?.[0].plugins).toMatchObject(['@netlify/plugin-gatsby'])
+  expect(detected?.[0].plugins).toMatchObject([{ name: '@netlify/plugin-gatsby' }])
 })
 
 test('should detect a simple Gatsby 4 project', async ({ fs }) => {
@@ -67,8 +67,7 @@ test('should detect a simple Gatsby 4 project', async ({ fs }) => {
       frameworkPort: 8000,
       name: 'Gatsby',
       packagePath: '',
-      plugins_from_config_file: [],
-      plugins_recommended: [],
+      plugins: [],
       pollingStrategies: ['TCP', 'HTTP'],
     },
   ])

packages/build-info/src/frameworks/gatsby.ts

@@ -45,7 +45,7 @@ export class Gatsby extends BaseFramework implements Framework {
 
       const nodeVersion = await this.project.getCurrentNodeVersion()
       if (nodeVersion && gte(nodeVersion, '12.13.0')) {
-        this.plugins.push('@netlify/plugin-gatsby')
+        this.plugins.push({ name: '@netlify/plugin-gatsby' })
       }
       return this as DetectedFramework
     }

packages/build-info/src/frameworks/next.test.ts

@@ -38,7 +38,15 @@ describe('Next.js Plugin', () => {
     const project = new Project(fs, cwd).setNodeVersion('v10.13.0')
     const frameworks = await project.detectFrameworks()
     expect(frameworks?.[0].id).toBe('next')
-    expect(frameworks?.[0].plugins).toEqual(['@netlify/plugin-nextjs'])
+    expect(frameworks?.[0].plugins).toEqual([{ name: '@netlify/plugin-nextjs', alwaysInstall: true }])
+  })
+
+  test('Should use the old runtime if the next.js version is not >= 13.5.0', async ({ fs, cwd }) => {
+    const project = new Project(fs, cwd).setNodeVersion('v18.0.0')
+    project.featureFlags = { project_ceruledge_ui: '@netlify/next-runtime' }
+    const frameworks = await project.detectFrameworks()
+    expect(frameworks?.[0].id).toBe('next')
+    expect(frameworks?.[0].plugins).toEqual([{ name: '@netlify/plugin-nextjs', alwaysInstall: true }])
   })
 
   test('Should not detect Next.js plugin for Next.js if when Node version < 10.13.0', async ({ fs, cwd }) => {
@@ -49,6 +57,44 @@ describe('Next.js Plugin', () => {
   })
 })
 
+describe('New Next.js Runtime', () => {
+  beforeEach((ctx) => {
+    ctx.cwd = mockFileSystem({
+      'package.json': JSON.stringify({
+        name: 'my-next-app',
+        version: '0.1.0',
+        private: true,
+        scripts: {
+          dev: 'next dev',
+          build: 'next build',
+          start: 'next start',
+        },
+        dependencies: {
+          next: '13.5.0',
+          react: '17.0.1',
+          'react-dom': '17.0.1',
+        },
+      }),
+    })
+  })
+
+  test('Should not use the new runtime if the node version is below 18', async ({ fs, cwd }) => {
+    const project = new Project(fs, cwd).setNodeVersion('v16.0.0')
+    project.featureFlags = { project_ceruledge_ui: '@netlify/next-runtime@latest' }
+    const frameworks = await project.detectFrameworks()
+    expect(frameworks?.[0].id).toBe('next')
+    expect(frameworks?.[0].plugins).toEqual([{ name: '@netlify/plugin-nextjs', alwaysInstall: true }])
+  })
+
+  test('Should use the old runtime if the next.js version is not >= 13.5.0', async ({ fs, cwd }) => {
+    const project = new Project(fs, cwd).setNodeVersion('v18.0.0')
+    project.featureFlags = { project_ceruledge_ui: '@netlify/next-runtime@latest' }
+    const frameworks = await project.detectFrameworks()
+    expect(frameworks?.[0].id).toBe('next')
+    expect(frameworks?.[0].plugins).toEqual([{ name: '@netlify/next-runtime@latest', alwaysInstall: true }])
+  })
+})
+
 describe('simple Next.js project', async () => {
   beforeEach((ctx) => {
     ctx.cwd = mockFileSystem({
@@ -90,7 +136,7 @@ describe('simple Next.js project', async () => {
   test('Should detect Next.js plugin for Next.js if when Node version >= 10.13.0', async ({ fs, cwd }) => {
     const detected = await new Project(fs, cwd).setEnvironment({ NODE_VERSION: '18.x' }).detectFrameworks()
     expect(detected?.[0].id).toBe('next')
-    expect(detected?.[0].plugins).toMatchObject(['@netlify/plugin-nextjs'])
+    expect(detected?.[0].plugins).toMatchObject([{ name: '@netlify/plugin-nextjs', alwaysInstall: true }])
   })
 })
 
@@ -134,7 +180,7 @@ describe('Nx monorepo', () => {
       devCommand: 'nx run website:serve',
       dist: join('dist/packages/website'),
       frameworkPort: 4200,
-      plugins_recommended: ['@netlify/plugin-nextjs'],
+      plugins: [{ name: '@netlify/plugin-nextjs', alwaysInstall: true }],
     })
   })
 })
@@ -152,7 +198,7 @@ describe('Nx turborepo', () => {
       devCommand: 'turbo run dev --filter web',
       dist: join('apps/web/.next'),
       frameworkPort: 3000,
-      plugins_recommended: ['@netlify/plugin-nextjs'],
+      plugins: [{ name: '@netlify/plugin-nextjs', alwaysInstall: true }],
     })
   })
 })

packages/build-info/src/frameworks/next.ts

@@ -32,8 +32,17 @@ export class Next extends BaseFramework implements Framework {
 
     if (this.detected) {
       const nodeVersion = await this.project.getCurrentNodeVersion()
-      if (nodeVersion && gte(nodeVersion, '10.13.0')) {
-        this.plugins.push('@netlify/plugin-nextjs')
+      const runtimeFromRollout = this.project.featureFlags['project_ceruledge_ui']
+      if (
+        nodeVersion &&
+        gte(nodeVersion, '18.0.0') &&
+        this.detected.package?.version &&
+        gte(this.detected.package.version, '13.5.0') &&
+        typeof runtimeFromRollout === 'string'
+      ) {
+        this.plugins.push({ name: runtimeFromRollout ?? '@netlify/plugin-nextjs', alwaysInstall: true })
+      } else if (nodeVersion && gte(nodeVersion, '10.13.0')) {
+        this.plugins.push({ name: '@netlify/plugin-nextjs', alwaysInstall: true })
       }
       return this as DetectedFramework
     }

packages/build-info/src/node/__snapshots__/get-build-info.test.ts.snap

@@ -64,8 +64,7 @@ exports[`should retrieve the build info for providing a rootDir 1`] = `
       "frameworkPort": 3000,
       "name": "PNPM + Astro packages/blog",
       "packagePath": "packages/blog",
-      "plugins_from_config_file": [],
-      "plugins_recommended": [],
+      "plugins": [],
       "pollingStrategies": [
         "TCP",
         "HTTP",
@@ -84,9 +83,11 @@ exports[`should retrieve the build info for providing a rootDir 1`] = `
       "frameworkPort": 3000,
       "name": "PNPM + Next.js packages/website",
       "packagePath": "packages/website",
-      "plugins_from_config_file": [],
-      "plugins_recommended": [
-        "@netlify/plugin-nextjs",
+      "plugins": [
+        {
+          "alwaysInstall": true,
+          "name": "@netlify/plugin-nextjs",
+        },
       ],
       "pollingStrategies": [
         "TCP",
@@ -199,8 +200,7 @@ exports[`should retrieve the build info for providing a rootDir and a nested pro
       "frameworkPort": 3000,
       "name": "PNPM + Astro packages/blog",
       "packagePath": "packages/blog",
-      "plugins_from_config_file": [],
-      "plugins_recommended": [],
+      "plugins": [],
       "pollingStrategies": [
         "TCP",
         "HTTP",
@@ -274,8 +274,7 @@ exports[`should retrieve the build info for providing a rootDir and the same pro
       "frameworkPort": 3000,
       "name": "PNPM + Astro packages/blog",
       "packagePath": "packages/blog",
-      "plugins_from_config_file": [],
-      "plugins_recommended": [],
+      "plugins": [],
       "pollingStrategies": [
         "TCP",
         "HTTP",
@@ -294,9 +293,11 @@ exports[`should retrieve the build info for providing a rootDir and the same pro
       "frameworkPort": 3000,
       "name": "PNPM + Next.js packages/website",
       "packagePath": "packages/website",
-      "plugins_from_config_file": [],
-      "plugins_recommended": [
-        "@netlify/plugin-nextjs",
+      "plugins": [
+        {
+          "alwaysInstall": true,
+          "name": "@netlify/plugin-nextjs",
+        },
       ],
       "pollingStrategies": [
         "TCP",

packages/build-info/src/node/bin.ts

@@ -8,7 +8,11 @@ import { report } from '../metrics.js'
 import { getBuildInfo } from './get-build-info.js'
 import { initializeMetrics } from './metrics.js'
 
-type Args = Arguments<{ projectDir?: string; rootDir?: string; featureFlags: Record<string, boolean> }>
+type Args = Arguments<{
+  projectDir?: string
+  rootDir?: string
+  featureFlags: Record<string, number | boolean | string>
+}>
 
 yargs(hideBin(argv))
   .command(
@@ -22,13 +26,9 @@ yargs(hideBin(argv))
         },
         featureFlags: {
           string: true,
-          describe: 'comma separated list of feature flags',
-          coerce: (value = '') =>
-            value
-              .split(',')
-              .map((flag) => flag.trim())
-              .filter((flag) => flag.length)
-              .reduce((prev, cur) => ({ ...prev, [cur]: true }), {}),
+          describe: 'JSON stringified list of feature flags with values',
+          alias: 'ff',
+          coerce: (value: '{}') => JSON.parse(value),
         },
       }),
     async ({ projectDir, rootDir, featureFlags }: Args) => {
@@ -37,7 +37,12 @@ yargs(hideBin(argv))
       try {
         console.log(
           JSON.stringify(
-            await getBuildInfo({ projectDir, rootDir, featureFlags, bugsnagClient }),
+            await getBuildInfo({
+              projectDir,
+              rootDir,
+              featureFlags,
+              bugsnagClient,
+            }),
             // hide null values from the string output as we use null to identify it has already run but did not detect anything
             // undefined marks that it was never run
             (_, value) => (value !== null ? value : undefined),

packages/build-info/src/node/get-build-info.ts

@@ -45,7 +45,7 @@ export async function getBuildInfo(
   config: {
     projectDir?: string
     rootDir?: string
-    featureFlags?: Record<string, boolean>
+    featureFlags?: Record<string, boolean | number | string>
     bugsnagClient?: Client
   } = { featureFlags: {} },
 ): Promise<Info> {
@@ -54,6 +54,7 @@ export async function getBuildInfo(
   fs.logger = new NoopLogger()
   const project = new Project(fs, config.projectDir, config.rootDir)
     .setBugsnag(config.bugsnagClient)
+    .setFeatureFlags(config.featureFlags)
     .setEnvironment(process.env)
     .setNodeVersion(process.version)
 

packages/build-info/src/project.ts

@@ -62,6 +62,8 @@ export class Project {
   bugsnag: Client
   /** A logging instance  */
   logger: Logger
+  /** A list of enabled feature flags */
+  featureFlags: Record<string, boolean | number | string> = {}
 
   /** A function that is used to report errors */
   reportFn: typeof report = report
@@ -76,6 +78,11 @@ export class Project {
     return this
   }
 
+  setFeatureFlags(flags: Record<string, boolean | number | string> = {}): this {
+    this.featureFlags = { ...this.featureFlags, ...flags }
+    return this
+  }
+
   async getCurrentNodeVersion(): Promise<SemVer | null> {
     if (this._nodeVersion) {
       return this._nodeVersion