feat(vite): add angular option to vitest generator

[yjaaidi]

Current Behavior

@nx/vite:vitest generator does not provide Angular support in the uiFramework options.

Expected Behavior

angular option should generate the vitest configuration just like @nx/angular:application and @nx/angular/library do.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
nx-dev	⬜️ Ignored (Inspect)	Visit Preview	Nov 26, 2024 6:14pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ffd2a3c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 4 targets

• nx affected --targets=lint,test,build,e2e,e2e-ci --base=5f92f1729b356b8ce5cd8fff5b8f602888437355 --head=ffd2a3cbfb23dfb70bebc5be4a4c74edfdab9ba5 --parallel=3
• nx run-many -t check-imports check-commit check-lock-files check-codeowners documentation --parallel=1 --no-dte
• nx-cloud record -- nx format:check --base=5f92f1729b356b8ce5cd8fff5b8f602888437355 --head=ffd2a3cbfb23dfb70bebc5be4a4c74edfdab9ba5
• nx documentation --no-dte

---

Sent with 💌 from NxCloud.

[yjaaidi]

@nx/vite:vitest's uiFramework should be required but that would be a breaking change. Should I add it here or should we keep this for the next major?

[yjaaidi]

In order to improve tests maintainability and symmetry to production, I would love to replace fixtures like these: https://github.com/nrwl/nx/blob/8738d10446f17df7f9f30e3c94e509062feb0df2/packages/vite/src/utils/test-utils.ts

with reusable "object mothers" in testing utils:

const workspace = workspaceMother.withInferenceDisabled().build();
const app = angularAppMother.withName('my-app').withJestSetup().withSomeTests().build();
const lib = angularLibMother.withName('my-lib').build(); // no test config & no tests

createWorkspace(workspace);
createProjects([app, lib])

What do you think?

[isaacplmann]

Docs changes approved

[Coly010]

Looks good, and testing it out locally worked fine.

One addressable comment, another is more thought-provoking but doesn't need to be solved.

[Coly010]

I wonder if there is any way we can detect this if the user does not pass it in 🤔

[yjaaidi]

It is conceptually challenging.

We could implement heuristics that analyze the imports. The problem is that a project can be defined with a "targeted" type before it has anything in it that is specific to that framework.

Let's say I have an Angular library with nothing Angular-specific yet, it would assume uiFramework: none, and then simply not work once I decide to add something Angular-specific.
Then we would need a generator that updates the configuration according to the detected framework so things can get a bit complicated.

[Coly010]

Agreed.

With angular applications and buildable libraries, we can check the project graph to see if the project has a dependency on any @angular or @nx/angular package.

If they generated their library via @nx/angular:library generator, one of those dependencies should still exist.

But if they generated their library via @nx/js:library then it wouldn’t.

That said, I think that is good enough.

We can try to infer it if someone has not passed in --uiFramework.

Worse case they end up with “none” which is the same outcome as they didn’t pass in --uiFramework.

At the start of the generator we can add something like

schema.uiFramework ??= tryDetermineFramework()

so that it only attempts it if the user has not provided it.

the tryDetermineFramework can use the project graph to look for dependencies.

const REACT_DEPS = [“react”, “react-dom”, …]
const ANGULAR_DEPS = [“@angular/core”, “@nx/angular”, …]
const projectGraph = await createProjectGraphAsync();

const projectDeps = projectGraph.deps.filter(dep => dep.source === schema.project).reduce((collectedDeps, dep) => collectedDeps.add(dep), new Set())

const isReact = REACT_DEPS.some(dep => projectDeps.has(dep));
const isAngular = ANGULAR_DEPS.some(dep => projectDeps.has(dep))

schema.uiFramework = isReact 
  ? “react” 
  : isAngular
    ? “angular”
     : “none”