feat(vite): nodes for build, serve, test, preview targets

[mandarini]

A plugin (@nx/vite/plugin) which will add Vite targets/projects to the Nx project graph. This allows you to run Vite for projects that have a vite.config.ts file without creating a project.json file.

To-do's

• Read outputs from vite.config.ts
• Figure out why it does not like .js
• Figure out cannot use import outside module on pure .ts vite apps
• Vitest: passWithNoTests should be moved to targetDefaults like jest
• Vitest: reportsDirectory shouldn't be passed in the executor options but rather in the config
• node for static-serve

Once this PR is merged, we can add the cypress web server config.

How it works

On @nx/vite:init (which is called through the @nx/vite:configuration generator, and the @nx/react:app|lib and @nx/web:app|lib generators) this is added in the nx.json:

...
plugins: [
  {
    plugin: '@nx/vite/plugin',
    options: {
      buildTargetName: 'build',
      previewTargetName: 'preview',
      testTargetName: 'test',
      serveTargetName: 'serve',
    },
  },
  ...
]

so that you can run nx build vite, nx test vite etc, without manually defining these targets in your projects' project.json.

The plugin generates these targets with bare minimum (no extra) options configuration. Any options you need for your vite app, you can add in your project's vite.config.ts.

Docs changes

Simple docs page: https://nx-dev-git-fork-mandarini-feat-vite-nodes-nrwl.vercel.app/nx-api/vite/documents/vite-nodes-plugin (to be discussed?)

FIXED ISSUES

FIXED: Why it does not like js

 >  NX   require() of ES Module /Users/fileas/Projects/nrwl/test-nx-workspaces/vitenodes/rlibjs/vite.config.js from /Users/fileas/Projects/nrwl/test-nx-workspaces/vitenodes/node_modules/@nx/vite/src/plugins/plugin.js not supported.

   Instead change the require of vite.config.js in /Users/fileas/Projects/nrwl/test-nx-workspaces/vitenodes/node_modules/@nx/vite/src/plugins/plugin.js to a dynamic import() which is available in all CommonJS modules.

Solutions

1. This can be solved once the createNodes function handles async.
2. This can be solved now using readFileSync and then AST parsing.

FIXED: cannot use import outside module on pure .ts vite apps

It does not like the loaded vite.config.ts.

Solutions

1. This will be solved once we use loadConfigFromFile function, when async is ready
2. This can be solved now using readFileSync and then AST parsing.

[vercel]

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

Name	Status	Preview	Updated (UTC)
nx-dev	✅ Ready (Inspect)	Visit Preview	Nov 30, 2023 6:57pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d0ca6fc. 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 6 targets

• nx affected --target=e2e --base=468de36ad1045a9b44181449c327bacce03320a7 --head=d0ca6fc5e44152286efdb72172482fdbea1054f8 --parallel=1
• nx affected --targets=lint,test,build --base=468de36ad1045a9b44181449c327bacce03320a7 --head=d0ca6fc5e44152286efdb72172482fdbea1054f8 --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=468de36ad1045a9b44181449c327bacce03320a7 --head=d0ca6fc5e44152286efdb72172482fdbea1054f8
• nx documentation --no-dte
• nx affected -t e2e-macos --parallel=1 --base=468de36ad1045a9b44181449c327bacce03320a7 --head=d0ca6fc5e44152286efdb72172482fdbea1054f8

---

Sent with 💌 from NxCloud.

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.