fix: respect manual order of frameworks (#4858)

This is a regression of #4819

Author: danez

packages/framework-info/package.json

@@ -19,6 +19,7 @@
     "build:browser": "run-s build:browser:*",
     "build:browser:core": "vite build",
     "build:browser:site-root": "cpy index.html ./dist",
+    "pretest": "run-s prebuild",
     "test": "vitest run",
     "test:dev": "vitest",
     "test:ci": "vitest run --reporter=default"

packages/framework-info/src/frameworks/main.ts renamed to packages/framework-info/scripts/frameworks.js

@@ -57,6 +57,4 @@ export const FRAMEWORK_NAMES = [
   'gulp',
   'vite',
   'wmr',
-] as const
-
-export type FrameworkName = typeof FRAMEWORK_NAMES[number]
+]

packages/framework-info/scripts/transform_json.js

@@ -1,12 +1,13 @@
 import { promises as fs } from 'fs'
 import process from 'process'
-import { fileURLToPath } from 'url'
 
-import glob from 'fast-glob'
+import { FRAMEWORK_NAMES } from './frameworks.js'
 
+const FRAMEWORKS_SOURCE = new URL('./frameworks.js', import.meta.url)
 const FRAMEWORKS_DIR = new URL('../src/frameworks/', import.meta.url)
 const BUILD_DIR = new URL('../src/generated/', import.meta.url)
 const FRAMEWORKS_BUILD = new URL('frameworks.ts', BUILD_DIR)
+const FRAMEWORK_NAMES_BUILD = new URL('frameworkNames.ts', BUILD_DIR)
 
 // We enforce frameworks to be written with JSON to ensure they remain logicless
 // which is simpler for contributors and avoid adding unnecessary logic.
@@ -15,8 +16,9 @@ const FRAMEWORKS_BUILD = new URL('frameworks.ts', BUILD_DIR)
 // Therefore, we transform JSON to JavaScript files using at build time.
 const transformFrameworks = async function () {
   await fs.mkdir(BUILD_DIR, { recursive: true })
-  const frameworkFiles = await glob('*.json', { cwd: fileURLToPath(FRAMEWORKS_DIR), absolute: true })
-  const frameworks = await Promise.all(frameworkFiles.map(transformFramework))
+  // We use the framework names here to generate the frameworks infos, so that
+  // we keep the exact same order as in FRAMEWORK_NAMES
+  const frameworks = await Promise.all(FRAMEWORK_NAMES.map(transformFramework))
   const fileContents = `${FRAMEWORKS_HEADER}${JSON.stringify(frameworks, null, 2)}`
   await fs.writeFile(FRAMEWORKS_BUILD, fileContents)
 }
@@ -33,8 +35,9 @@ const updateLogoUrls = function (contents) {
   return updatedContents
 }
 
-const transformFramework = async function (frameworkFile) {
-  const jsonContents = await fs.readFile(frameworkFile)
+const transformFramework = async function (frameworkName) {
+  const frameworkUrl = new URL(`${frameworkName}.json`, FRAMEWORKS_DIR)
+  const jsonContents = await fs.readFile(frameworkUrl)
   const contents = JSON.parse(jsonContents)
 
   const updatedContents = updateLogoUrls(contents)
@@ -45,4 +48,17 @@ const FRAMEWORKS_HEADER = `import type { FrameworkDefinition } from "../types.js
 // This file is autogenerated at build time
 export const FRAMEWORKS: FrameworkDefinition[] = `
 
+const transformFrameworkNames = async function () {
+  const frameworkNamesContent = await fs.readFile(FRAMEWORKS_SOURCE, 'utf-8')
+  const fileContents = `${FRAMEWORK_NAMES_HEADER}${frameworkNamesContent.trim()}${FRAMEWORK_NAMES_FOOTER}`
+  await fs.writeFile(FRAMEWORK_NAMES_BUILD, fileContents)
+}
+
+const FRAMEWORK_NAMES_HEADER = '// This file is autogenerated at build time\n\n'
+
+const FRAMEWORK_NAMES_FOOTER = ` as const
+
+export type FrameworkName = typeof FRAMEWORK_NAMES[number]`
+
 transformFrameworks()
+transformFrameworkNames()

packages/framework-info/src/core.ts

@@ -4,7 +4,7 @@ import type { PackageJson } from 'read-pkg-up'
 import type { Context, PathExists } from './context.js'
 import { usesFramework } from './detect.js'
 import { getDevCommands } from './dev.js'
-import type { FrameworkName } from './frameworks/main.js'
+import type { FrameworkName } from './generated/frameworkNames.js'
 import { FRAMEWORKS } from './generated/frameworks.js'
 import { getPackageJsonContent } from './package.js'
 import { getPlugins } from './plugins.js'

packages/framework-info/src/main.ts

@@ -5,7 +5,7 @@ import { findUp } from 'find-up'
 
 import { getContext, getPackageJson } from './context.js'
 import { listFrameworks as list, hasFramework as has, getFramework as get } from './core.js'
-import type { FrameworkName } from './frameworks/main.js'
+import type { FrameworkName } from './generated/frameworkNames.js'
 import type { Framework } from './types.js'
 
 interface Options {

packages/framework-info/src/types.ts

@@ -1,4 +1,4 @@
-import type { FrameworkName } from './frameworks/main.js'
+import type { FrameworkName } from './generated/frameworkNames.js'
 
 interface PollingStrategy {
   name: 'HTTP' | 'TCP'

packages/framework-info/tests/__snapshots__/main.test.ts.snap

@@ -129,14 +129,14 @@ exports[`getFrameworks > Should return the version of each framework when multip
   {
     "build": {
       "commands": [
-        "vue-cli-service build",
+        "vuepress build",
       ],
-      "directory": "dist",
+      "directory": ".vuepress/dist",
     },
-    "category": "frontend_framework",
+    "category": "static_site_generator",
     "dev": {
       "commands": [
-        "vue-cli-service serve",
+        "vuepress dev",
       ],
       "pollingStrategies": [
         {
@@ -149,31 +149,31 @@ exports[`getFrameworks > Should return the version of each framework when multip
       "port": 8080,
     },
     "env": {},
-    "id": "vue",
+    "id": "vuepress",
     "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",
+      "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": "Vue.js",
+    "name": "VuePress",
     "package": {
-      "name": "@vue/cli-service",
-      "version": "1.2.3",
+      "name": "vuepress",
+      "version": "4.5.6",
     },
     "plugins": [],
     "staticAssetsDirectory": undefined,
   },
   {
     "build": {
       "commands": [
-        "vuepress build",
+        "vue-cli-service build",
       ],
-      "directory": ".vuepress/dist",
+      "directory": "dist",
     },
-    "category": "static_site_generator",
+    "category": "frontend_framework",
     "dev": {
       "commands": [
-        "vuepress dev",
+        "vue-cli-service serve",
       ],
       "pollingStrategies": [
         {
@@ -186,16 +186,16 @@ exports[`getFrameworks > Should return the version of each framework when multip
       "port": 8080,
     },
     "env": {},
-    "id": "vuepress",
+    "id": "vue",
     "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",
+      "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": "VuePress",
+    "name": "Vue.js",
     "package": {
-      "name": "vuepress",
-      "version": "4.5.6",
+      "name": "@vue/cli-service",
+      "version": "1.2.3",
     },
     "plugins": [],
     "staticAssetsDirectory": undefined,

packages/framework-info/tests/frameworks.test.ts

@@ -4,7 +4,7 @@ import Ajv from 'ajv'
 import glob from 'fast-glob'
 import { describe, expect, test } from 'vitest'
 
-import { FRAMEWORK_NAMES } from '../src/frameworks/main.js'
+import { FRAMEWORK_NAMES } from '../src/generated/frameworkNames.js'
 import { FRAMEWORKS } from '../src/generated/frameworks.js'
 
 const FRAMEWORKS_DIR = new URL('../src/frameworks/', import.meta.url)