feat(import): check for server dependencies (#6603)

**Note for reviewers:**
Other than refactors, tests and name changes, the **actual logic** is
only in
[requirement-server-packages.ts](https://github.com/concrete-utopia/utopia/compare/feat/check-server-dependencies?expand=1#diff-a2a88b7fd33ba102c98948e8efcb2c1771061df92f39e2b99af55560a1aceffc).
(I had to change the resolution name from `'Found'` to `'Passed'` since
here a passing check means that server packages weren't actually found)

**PR details:**
This PR adds a check for server dependencies to the import process -
currently a very closed list, to be added more incrementally.
For example when importing a Next project:
<video
src="https://github.com/user-attachments/assets/4db242d8-bb51-46e0-892c-d0a84d4c5231"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode

Author: liady

editor/src/components/assets.spec.ts

@@ -1,16 +1,25 @@
 import * as FastCheck from 'fast-check'
 import fastDeepEquals from 'fast-deep-equal'
 import type { ProjectContents } from '../core/shared/project-file-types'
-import { directory, isDirectory } from '../core/shared/project-file-types'
+import {
+  directory,
+  isDirectory,
+  RevisionsState,
+  textFile,
+  textFileContents,
+  unparsed,
+} from '../core/shared/project-file-types'
 import { codeFile } from '../core/shared/project-file-types'
 import type { ProjectContentTreeRoot } from './assets'
 import {
   contentsToTree,
+  getProjectDependencies,
   projectContentDirectory,
   projectContentFile,
   treeToContents,
 } from './assets'
 import { projectContentsArbitrary } from './assets.test-utils'
+import { simpleDefaultProject } from '../sample-projects/sample-project-utils'
 
 function checkContentsToTree(contents: ProjectContents): boolean {
   const result = treeToContents(contentsToTree(contents))
@@ -51,3 +60,37 @@ describe('contentsToTree', () => {
     expect(contentsToTree(contents)).toEqual(expectedResult)
   })
 })
+
+describe('getProjectDependencies', () => {
+  it('should merge the dependencies from package.json and package-lock.json', () => {
+    const project = simpleDefaultProject({
+      additionalFiles: {
+        '/package-lock.json': textFile(
+          textFileContents(
+            JSON.stringify(
+              {
+                dependencies: {
+                  react: {
+                    version: '1.0.0',
+                  },
+                },
+              },
+              null,
+              2,
+            ),
+            unparsed,
+            RevisionsState.CodeAhead,
+          ),
+          null,
+          null,
+          0,
+        ),
+      },
+    })
+    const dependencies = getProjectDependencies(project.projectContents)
+    // from package.json
+    expect(dependencies?.['react-dom']).toEqual('16.13.1')
+    // from package-lock.json
+    expect(dependencies?.react).toEqual('1.0.0')
+  })
+})

editor/src/components/assets.ts

@@ -761,3 +761,36 @@ export function ensureDirectoriesExist(projectContents: ProjectContents): Projec
     return result
   }
 }
+
+function getFileAsJson<T>(projectContents: ProjectContentTreeRoot, fileName: string): T | null {
+  const file = getProjectFileByFilePath(projectContents, fileName)
+  if (file != null && isTextFile(file)) {
+    return JSON.parse(file.fileContents.code) as T
+  }
+  return null
+}
+
+type PackageJson = { utopia?: Record<string, string>; dependencies?: Record<string, string> }
+export function getPackageJson(projectContents: ProjectContentTreeRoot): PackageJson | null {
+  return getFileAsJson<PackageJson>(projectContents, '/package.json')
+}
+
+type PackageLockJson = { dependencies?: Record<string, { version?: string }> }
+export function getPackageLockJson(
+  projectContents: ProjectContentTreeRoot,
+): PackageLockJson | null {
+  return getFileAsJson<PackageLockJson>(projectContents, '/package-lock.json')
+}
+
+export function getProjectDependencies(
+  projectContents: ProjectContentTreeRoot,
+): Record<string, string> | null {
+  const packageJsonDependencies = getPackageJson(projectContents)?.dependencies ?? {}
+  const packageLockJsonDependencies = getPackageLockJson(projectContents)?.dependencies ?? {}
+  for (const packageName of Object.keys(packageJsonDependencies)) {
+    if (packageLockJsonDependencies[packageName]?.version != null) {
+      packageJsonDependencies[packageName] = packageLockJsonDependencies[packageName].version
+    }
+  }
+  return packageJsonDependencies
+}

editor/src/components/editor/import-wizard/components.tsx

@@ -102,7 +102,7 @@ const dependenciesSuccessFn = (op: ImportFetchDependency) =>
 const dependenciesSuccessTextFn = (successCount: number) =>
   `${successCount} dependencies fetched successfully`
 const requirementsSuccessFn = (op: ImportCheckRequirementAndFix) =>
-  op.resolution === RequirementResolutionResult.Found
+  op.resolution === RequirementResolutionResult.Passed
 const requirementsSuccessTextFn = (successCount: number) => `${successCount} requirements met`
 
 function AggregatedChildrenStatus<T extends ImportOperation>({

editor/src/components/editor/store/store-deep-equality-instances.ts

@@ -4802,7 +4802,7 @@ export const ProjectRequirementResolutionKeepDeepEquality: KeepDeepEqualityCall<
   )
 
 export const ProjectRequirementsKeepDeepEquality: KeepDeepEqualityCall<ProjectRequirements> =
-  combine4EqualityCalls(
+  combine5EqualityCalls(
     (requirements) => requirements.storyboard,
     ProjectRequirementResolutionKeepDeepEquality,
     (requirements) => requirements.packageJsonEntries,
@@ -4811,6 +4811,8 @@ export const ProjectRequirementsKeepDeepEquality: KeepDeepEqualityCall<ProjectRe
     ProjectRequirementResolutionKeepDeepEquality,
     (requirements) => requirements.reactVersion,
     ProjectRequirementResolutionKeepDeepEquality,
+    (requirements) => requirements.serverPackages,
+    ProjectRequirementResolutionKeepDeepEquality,
     newProjectRequirements,
   )
 

editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts

@@ -1,14 +1,17 @@
-import { getProjectFileByFilePath } from '../../../../components/assets'
 import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
-import { isTextFile } from '../../project-file-types'
 import type { EditorDispatch } from '../../../../components/editor/action-types'
 import CheckPackageJson from './requirements/requirement-package-json'
 import CheckLanguage from './requirements/requirement-language'
 import CheckReactVersion from './requirements/requirement-react'
 import { RequirementResolutionResult } from './utopia-requirements-types'
 import type { ProjectRequirement, RequirementCheck } from './utopia-requirements-types'
-import { notifyCheckingRequirement, notifyResolveRequirement } from './utopia-requirements-service'
+import {
+  initialTexts,
+  notifyCheckingRequirement,
+  notifyResolveRequirement,
+} from './utopia-requirements-service'
 import CheckStoryboard from './requirements/requirement-storyboard'
+import CheckServerPackages from './requirements/requirement-server-packages'
 
 export function checkAndFixUtopiaRequirements(
   dispatch: EditorDispatch,
@@ -19,13 +22,14 @@ export function checkAndFixUtopiaRequirements(
     packageJsonEntries: new CheckPackageJson(),
     language: new CheckLanguage(),
     reactVersion: new CheckReactVersion(),
+    serverPackages: new CheckServerPackages(),
   }
   let projectContents = parsedProjectContents
   let result: RequirementResolutionResult = RequirementResolutionResult.Found
   // iterate over all checks, updating the project contents as we go
   for (const [name, check] of Object.entries(checks)) {
     const checkName = name as ProjectRequirement
-    notifyCheckingRequirement(dispatch, checkName, check.getStartText())
+    notifyCheckingRequirement(dispatch, checkName, initialTexts[checkName])
     const checkResult = check.check(projectContents)
     if (checkResult.resolution === RequirementResolutionResult.Critical) {
       result = RequirementResolutionResult.Critical
@@ -41,29 +45,3 @@ export function checkAndFixUtopiaRequirements(
   }
   return { result: result, fixedProjectContents: projectContents }
 }
-
-export function getPackageJson(
-  projectContents: ProjectContentTreeRoot,
-): { utopia?: Record<string, string>; dependencies?: Record<string, string> } | null {
-  return getJsonFile<{ utopia?: Record<string, string>; dependencies?: Record<string, string> }>(
-    projectContents,
-    '/package.json',
-  )
-}
-
-export function getPackageLockJson(
-  projectContents: ProjectContentTreeRoot,
-): { dependencies?: Record<string, string> } | null {
-  return getJsonFile<{ dependencies?: Record<string, string> }>(
-    projectContents,
-    '/package-lock.json',
-  )
-}
-
-function getJsonFile<T>(projectContents: ProjectContentTreeRoot, fileName: string): T | null {
-  const file = getProjectFileByFilePath(projectContents, fileName)
-  if (file != null && isTextFile(file)) {
-    return JSON.parse(file.fileContents.code) as T
-  }
-  return null
-}

editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts

@@ -7,9 +7,6 @@ import {
 import { applyToAllUIJSFiles } from '../../../../model/project-file-utils'
 
 export default class CheckProjectLanguage implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking project language'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     let jsCount = 0
     let tsCount = 0
@@ -35,7 +32,7 @@ export default class CheckProjectLanguage implements RequirementCheck {
       }
     } else {
       return {
-        resolution: RequirementResolutionResult.Found,
+        resolution: RequirementResolutionResult.Passed,
         resultText: 'Project uses JS/JSX',
         resultValue: 'javascript',
       }

editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts

@@ -1,15 +1,12 @@
 import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
 import { RevisionsState } from 'utopia-shared/src/types'
-import { getPackageJson } from '../check-utopia-requirements'
+import { getPackageJson } from '../../../../../components/assets'
 import type { RequirementCheck, RequirementCheckResult } from '../utopia-requirements-types'
 import { RequirementResolutionResult } from '../utopia-requirements-types'
 import { addFileToProjectContents } from '../../../../../components/assets'
 import { codeFile } from '../../../../../core/shared/project-file-types'
 
 export default class PackageJsonCheckAndFix implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking package.json'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     const parsedPackageJson = getPackageJson(projectContents)
     if (parsedPackageJson == null) {
@@ -39,7 +36,7 @@ export default class PackageJsonCheckAndFix implements RequirementCheck {
       }
     } else {
       return {
-        resolution: RequirementResolutionResult.Found,
+        resolution: RequirementResolutionResult.Passed,
         resultText: 'Valid package.json found',
       }
     }

editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts

@@ -4,24 +4,15 @@ import {
   type RequirementCheck,
   type RequirementCheckResult,
 } from '../utopia-requirements-types'
-import { getPackageJson, getPackageLockJson } from '../check-utopia-requirements'
 import Semver from 'semver'
+import { getProjectDependencies } from '../../../../../components/assets'
 
 const SUPPORTED_REACT_VERSION_RANGE = '16.8.0 - 18.x'
 
 export default class CheckReactRequirement implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking React version'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
-    const parsedPackageLockJson = getPackageLockJson(projectContents)
-    // check package-lock.json first
-    let reactVersion = parsedPackageLockJson?.dependencies?.react
-    if (reactVersion == null) {
-      const parsedPackageJson = getPackageJson(projectContents)
-      // then check package.json
-      reactVersion = parsedPackageJson?.dependencies?.react
-    }
+    const projectDependencies = getProjectDependencies(projectContents)
+    const reactVersion = projectDependencies?.react
     if (reactVersion == null) {
       return {
         resolution: RequirementResolutionResult.Critical,
@@ -31,7 +22,7 @@ export default class CheckReactRequirement implements RequirementCheck {
     const isMatching = Semver.intersects(reactVersion, SUPPORTED_REACT_VERSION_RANGE)
     return {
       resolution: isMatching
-        ? RequirementResolutionResult.Found
+        ? RequirementResolutionResult.Passed
         : RequirementResolutionResult.Critical,
       resultText: isMatching ? 'React version is ok' : 'React version is not in supported range',
       resultValue: reactVersion,

editor/src/core/shared/import/proejct-health-check/requirements/requirement-server-packages.ts

@@ -0,0 +1,29 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import {
+  RequirementResolutionResult,
+  type RequirementCheck,
+  type RequirementCheckResult,
+} from '../utopia-requirements-types'
+import { getProjectDependencies } from '../../../../../components/assets'
+
+const serverPackagesRestrictionList: RegExp[] = [/^next/, /^remix/, /^astro/, /^svelte/]
+
+export default class CheckServerPackages implements RequirementCheck {
+  check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
+    const projectDependencies = getProjectDependencies(projectContents) ?? {}
+    const serverPackages = Object.keys(projectDependencies).filter((packageName) =>
+      serverPackagesRestrictionList.some((restriction) => restriction.test(packageName)),
+    )
+    if (serverPackages.length > 0) {
+      return {
+        resolution: RequirementResolutionResult.Critical,
+        resultText: 'Server packages found',
+        resultValue: serverPackages.join(', '),
+      }
+    }
+    return {
+      resolution: RequirementResolutionResult.Passed,
+      resultText: 'No server packages found',
+    }
+  }
+}

editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts

@@ -13,9 +13,6 @@ import { codeFile } from '../../../../../core/shared/project-file-types'
 import { addStoryboardFileToProject } from '../../../../../core/model/storyboard-utils'
 
 export default class CheckStoryboard implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking for storyboard.js'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     return createStoryboardFileIfNecessaryInner(projectContents)
   }
@@ -34,7 +31,7 @@ function createStoryboardFileIfNecessaryInner(
   const storyboardFile = getProjectFileByFilePath(projectContents, StoryboardFilePath)
   if (storyboardFile != null) {
     return {
-      resolution: RequirementResolutionResult.Found,
+      resolution: RequirementResolutionResult.Passed,
       resultText: 'Storyboard.js found',
     }
   }