feat: detect installed version of framework (#822)

* feat: (WIP) add framework version detection

* feat: include version of installed framework in listFrameworks response

* chore: upgrade node version to use to 14

* test: add mock installed package

* test: add test case for multiple frameworks

* fix: update import path

* 9.3.1-framework-version-detection.0

* feat: support monorepo case

* 9.3.1-framework-version-detection.1

* refactor: general cleanup before starting code review

Author: ericapisani

.gitignore

@@ -12,3 +12,8 @@ cypress/support
 
 # Local Netlify folder
 .netlify
+
+# These are mock node_modules folder for testing purposes
+!test/fixtures/simple/node_modules
+!test/fixtures/multiple/node_modules
+!test/fixtures/monorepos/node_modules

package-lock.json

@@ -71,12 +71,16 @@
   "dependencies": {
     "ajv": "^8.0.0",
     "filter-obj": "^3.0.0",
+    "find-up": "^6.3.0",
+    "fs-extra": "^10.1.0",
     "is-plain-obj": "^4.0.0",
     "locate-path": "^7.0.0",
     "p-filter": "^3.0.0",
     "p-locate": "^6.0.0",
+    "process": "^0.11.10",
     "read-pkg-up": "^9.0.0",
-    "semver": "^7.3.4"
+    "semver": "^7.3.4",
+    "url": "^0.11.0"
   },
   "devDependencies": {
     "@netlify/eslint-config-node": "^6.0.0",
@@ -94,7 +98,7 @@
     "vite": "^3.1.6"
   },
   "engines": {
-    "node": "^12.20.0 || ^14.14.0 || >=16.0.0"
+    "node": "^14.14.0 || >=16.0.0"
   },
   "ava": {
     "verbose": true,

package.json

@@ -1,29 +1,29 @@
-import { cwd, version } from 'process'
+import { cwd, version as nodejsVersion } from 'process'
 
 import isPlainObj from 'is-plain-obj'
 import { locatePath } from 'locate-path'
 import { readPackageUp } from 'read-pkg-up'
 
-const getPackageJson = async (projectDir) => {
+export const getPackageJson = async (projectDir) => {
   try {
     const result = await readPackageUp({ cwd: projectDir, normalize: false })
     if (result === undefined) {
       return {}
     }
 
-    const { packageJson, path: packageJsonPath } = result
+    const { version, packageJson, path: packageJsonPath } = result
 
     if (!isPlainObj(packageJson)) {
       return { packageJsonPath }
     }
 
-    return { packageJson, packageJsonPath }
+    return { version, packageJson, packageJsonPath }
   } catch {
     return {}
   }
 }
 
-export const getContext = async ({ projectDir = cwd(), nodeVersion = version } = {}) => {
+export const getContext = async ({ projectDir = cwd(), nodeVersion = nodejsVersion } = {}) => {
   const { packageJson, packageJsonPath = projectDir } = await getPackageJson(projectDir)
   return {
     pathExists: async (path) => (await locatePath([path], { type: 'file', cwd: projectDir })) !== undefined,

src/context.js

@@ -142,6 +142,7 @@ const getFrameworkInfo = function (
   {
     id,
     name,
+    detect,
     category,
     dev: { command: frameworkDevCommand, port, pollingStrategies },
     build: { command: frameworkBuildCommand, directory },
@@ -157,6 +158,10 @@ const getFrameworkInfo = function (
   return {
     id,
     name,
+    package: {
+      name: detect.npmDependencies[0],
+      version: 'unknown',
+    },
     category,
     dev: { commands: devCommands, port, pollingStrategies },
     build: { commands: [frameworkBuildCommand], directory },

src/core.js

@@ -1,4 +1,9 @@
-import { getContext } from './context.js'
+import { join } from 'path'
+import { cwd, chdir } from 'process'
+
+import { findUp } from 'find-up'
+
+import { getContext, getPackageJson } from './context.js'
 import { listFrameworks as list, hasFramework as has, getFramework as get } from './core.js'
 
 /**
@@ -19,16 +24,62 @@ import { listFrameworks as list, hasFramework as has, getFramework as get } from
  * @property {string} directory - Relative path to the directory where files are built
  */
 
+/**
+ * @typedef {object} FrameworkPackage
+ * @property {string} name - The name of the package. e.g: 'gatsby'
+ * @property {string} version - The version of the installed package as found in the package.json. Is set to 'unknown' by default.
+ */
+
 /**
  * @typedef {object} Framework
  * @property {string} id - Id such as `"gatsby"`
  * @property {string} category - Category among `"static_site_generator"`, `"frontend_framework"` and `"build_tool"`
+ * @property {FrameworkPackage} package - Information about the framework's underlying package
  * @property {Dev} dev - Information about the dev command
  * @property {Build} build - Information about the build command
  * @property {object} env - Environment variables that should be set when calling the dev command
  * @property {string[]} plugins - A list of recommend Netlify build plugins to install for the framework
  */
 
+/**
+ * Gets the version of the framework that is installed in a project.
+ *
+ * This cannot currently be used in the browser at this time, which is why it's defined
+ * here rather than in `core.js` as part of the `getFrameworkInfo` method
+ *
+ * @param {string} projectDir - Project directory
+ * @param {Framework} frameworkInfo - Information about the framework as detected by `getFrameworkInfo`
+ *
+ * @returns {Promise<Framework>}
+ */
+const getFrameworkVersion = async (projectDir, frameworkInfo) => {
+  // Need to change the CWD to the project directory in order to make sure we find and use the correct
+  // package.json
+  const originalCwd = cwd()
+  const returnToOriginalDirectory = () => {
+    chdir(originalCwd)
+  }
+  chdir(projectDir)
+
+  const npmPackage = frameworkInfo.package.name
+
+  // Get path of package.json for the installed framework. We need to traverse up the directories
+  // in the event that the project uses something like npm workspaces, and the installed framework package
+  // has been hoisted to the root directory of the project (which differs from the directory of the project/application being built)
+  const installedFrameworkPath = await findUp(join('node_modules', npmPackage, 'package.json'))
+  const { packageJson } = await getPackageJson(installedFrameworkPath)
+
+  returnToOriginalDirectory()
+
+  return {
+    ...frameworkInfo,
+    package: {
+      name: frameworkInfo.package.name,
+      version: packageJson.version || 'unknown',
+    },
+  }
+}
+
 /**
  * Return all the frameworks used by a project.
  *
@@ -38,7 +89,16 @@ import { listFrameworks as list, hasFramework as has, getFramework as get } from
  */
 export const listFrameworks = async function (opts) {
   const context = await getContext(opts)
-  return await list(context)
+  const frameworkList = await list(context)
+
+  const projectDir = opts && opts.projectDir ? opts.projectDir : cwd()
+
+  const settledPromises = await Promise.allSettled(
+    frameworkList.map((framework) => getFrameworkVersion(projectDir, framework)),
+  )
+  const updatedList = settledPromises.map((result) => result.value)
+
+  return updatedList
 }
 
 /**

src/main.js

@@ -26,17 +26,6 @@ test('Should default dev.commands to framework.dev.command', async (t) => {
   t.deepEqual(frameworks[0].dev.commands, ['sapper dev'])
 })
 
-test('Should return the same result when script order is different', async (t) => {
-  const frameworksBuildFirst = await getFrameworks('scripts-order/build-first')
-  const frameworksDevFirst = await getFrameworks('scripts-order/dev-first')
-
-  t.is(frameworksBuildFirst.length, 1)
-  t.is(frameworksDevFirst.length, 1)
-
-  t.deepEqual(frameworksBuildFirst[0].dev.commands, ['npm run dev', 'npm run start', 'npm run build'])
-  t.deepEqual(frameworksBuildFirst, frameworksDevFirst)
-})
-
 test('Should sort scripts in the format *:<name>', async (t) => {
   const frameworks = await getFrameworks('scripts-order/postfix-format')
 

test/dev.js

@@ -0,0 +1,7 @@
+{
+  "name": "app1",
+  "version": "1.0.0",
+  "dependencies": {
+    "next":"*"
+  }
+}

test/fixtures/monorepos/app1/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "app2",
+  "version": "2.0.0",
+  "dependencies": {
+    "next":"*"
+  }
+}

test/fixtures/monorepos/app2/package.json

@@ -17,6 +17,16 @@ test('Should return several items when multiple frameworks are detected', async
   t.is(frameworks.length, 2)
 })
 
+test('Should return the version of each framework when multiple are detected', async (t) => {
+  const frameworks = await getFrameworks('multiple')
+  t.snapshot(frameworks)
+})
+
+test('Should return the version of the framework when the installed package is hoisted to the root project directory', async (t) => {
+  const frameworks = await getFrameworks('monorepos/app1')
+  t.snapshot(frameworks)
+})
+
 test('Should allow getting a specific framework', async (t) => {
   const framework = await getFramework('simple', 'sapper')
   t.snapshot(framework)

test/fixtures/monorepos/node_modules/next/package.json

@@ -4,6 +4,49 @@ The actual snapshot is saved in `main.js.snap`.
 
 Generated by [AVA](https://avajs.dev).
 
+## Should return the version of the framework when the installed package is hoisted to the root project directory
+
+> Snapshot 1
+
+    [
+      {
+        build: {
+          commands: [
+            'next build',
+          ],
+          directory: '.next',
+        },
+        category: 'static_site_generator',
+        dev: {
+          commands: [
+            'next',
+          ],
+          pollingStrategies: [
+            {
+              name: 'TCP',
+            },
+          ],
+          port: 3000,
+        },
+        env: {},
+        id: 'next',
+        logo: {
+          dark: 'https://framework-info.netlify.app/logos/nextjs/dark.svg',
+          default: 'https://framework-info.netlify.app/logos/nextjs/light.svg',
+          light: 'https://framework-info.netlify.app/logos/nextjs/light.svg',
+        },
+        name: 'Next.js',
+        package: {
+          name: 'next',
+          version: '3.2.1',
+        },
+        plugins: [
+          '@netlify/plugin-nextjs',
+        ],
+        staticAssetsDirectory: undefined,
+      },
+    ]
+
 ## Should detect frameworks
 
 > Snapshot 1
@@ -39,11 +82,96 @@ Generated by [AVA](https://avajs.dev).
           light: 'https://framework-info.netlify.app/logos/sapper/default.svg',
         },
         name: 'Sapper',
+        package: {
+          name: 'sapper',
+          version: '3.4.3',
+        },
         plugins: [],
         staticAssetsDirectory: 'static',
       },
     ]
 
+## Should return the version of each framework when multiple are detected
+
+> Snapshot 1
+
+    [
+      {
+        build: {
+          commands: [
+            'vuepress build',
+          ],
+          directory: '.vuepress/dist',
+        },
+        category: 'static_site_generator',
+        dev: {
+          commands: [
+            'vuepress dev',
+          ],
+          pollingStrategies: [
+            {
+              name: 'TCP',
+            },
+            {
+              name: 'HTTP',
+            },
+          ],
+          port: 8080,
+        },
+        env: {},
+        id: 'vuepress',
+        logo: {
+          dark: 'https://framework-info.netlify.app/logos/vuepress/default.svg',
+          default: 'https://framework-info.netlify.app/logos/vuepress/default.svg',
+          light: 'https://framework-info.netlify.app/logos/vuepress/default.svg',
+        },
+        name: 'VuePress',
+        package: {
+          name: 'vuepress',
+          version: '4.5.6',
+        },
+        plugins: [],
+        staticAssetsDirectory: undefined,
+      },
+      {
+        build: {
+          commands: [
+            'vue-cli-service build',
+          ],
+          directory: 'dist',
+        },
+        category: 'frontend_framework',
+        dev: {
+          commands: [
+            'vue-cli-service serve',
+          ],
+          pollingStrategies: [
+            {
+              name: 'TCP',
+            },
+            {
+              name: 'HTTP',
+            },
+          ],
+          port: 8080,
+        },
+        env: {},
+        id: 'vue',
+        logo: {
+          dark: 'https://framework-info.netlify.app/logos/vue/default.svg',
+          default: 'https://framework-info.netlify.app/logos/vue/default.svg',
+          light: 'https://framework-info.netlify.app/logos/vue/default.svg',
+        },
+        name: 'Vue.js',
+        package: {
+          name: '@vue/cli-service',
+          version: '1.2.3',
+        },
+        plugins: [],
+        staticAssetsDirectory: undefined,
+      },
+    ]
+
 ## Should allow getting a specific framework
 
 > Snapshot 1
@@ -78,6 +206,10 @@ Generated by [AVA](https://avajs.dev).
         light: 'https://framework-info.netlify.app/logos/sapper/default.svg',
       },
       name: 'Sapper',
+      package: {
+        name: 'sapper',
+        version: 'unknown',
+      },
       plugins: [],
       staticAssetsDirectory: 'static',
     }

test/fixtures/multiple/node_modules/@vue/cli-service/package.json

@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url'
+import { fileURLToPath } from 'node:url'
 import nodePolyfills from 'rollup-plugin-node-polyfills'
 
 const CORE_FILE = fileURLToPath(new URL('src/core.js', import.meta.url))