From 8edcdac5eb3bc08488027bc493f92c7f963c9550 Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Thu, 3 Nov 2022 13:19:29 -0400 Subject: [PATCH] feat(bundling): add initial vite plugin (#12969) --- docs/generated/packages/vite.json | 19 ++++++ docs/map.json | 13 ++++ docs/packages.json | 7 +++ docs/shared/vite-plugin.md | 42 +++++++++++++ e2e/utils/index.ts | 1 + e2e/vite/jest.config.ts | 11 ++++ e2e/vite/project.json | 34 +++++++++++ e2e/vite/src/vite.test.ts | 15 +++++ e2e/vite/tsconfig.json | 13 ++++ e2e/vite/tsconfig.spec.json | 20 ++++++ packages/vite/.eslintrc.json | 25 ++++++++ packages/vite/.lib.swcrc | 31 ++++++++++ packages/vite/README.md | 13 ++++ packages/vite/docs/.gitkeep | 0 packages/vite/executors.json | 4 ++ packages/vite/generators.json | 6 ++ packages/vite/index.ts | 1 + packages/vite/jest.config.ts | 17 ++++++ packages/vite/migrations.json | 1 + packages/vite/package.json | 40 ++++++++++++ packages/vite/project.json | 87 +++++++++++++++++++++++++++ packages/vite/src/executors/.gitkeep | 0 packages/vite/src/generators/.gitkeep | 0 packages/vite/src/utils/versions.ts | 1 + packages/vite/tsconfig.json | 16 +++++ packages/vite/tsconfig.lib.json | 9 +++ packages/vite/tsconfig.spec.json | 9 +++ scripts/depcheck/unused.ts | 3 +- workspace.json | 2 + 29 files changed, 439 insertions(+), 1 deletion(-) create mode 100644 docs/generated/packages/vite.json create mode 100644 docs/shared/vite-plugin.md create mode 100644 e2e/vite/jest.config.ts create mode 100644 e2e/vite/project.json create mode 100644 e2e/vite/src/vite.test.ts create mode 100644 e2e/vite/tsconfig.json create mode 100644 e2e/vite/tsconfig.spec.json create mode 100644 packages/vite/.eslintrc.json create mode 100644 packages/vite/.lib.swcrc create mode 100644 packages/vite/README.md create mode 100644 packages/vite/docs/.gitkeep create mode 100644 packages/vite/executors.json create mode 100644 packages/vite/generators.json create mode 100644 packages/vite/index.ts create mode 100644 packages/vite/jest.config.ts create mode 100644 packages/vite/migrations.json create mode 100644 packages/vite/package.json create mode 100644 packages/vite/project.json create mode 100644 packages/vite/src/executors/.gitkeep create mode 100644 packages/vite/src/generators/.gitkeep create mode 100644 packages/vite/src/utils/versions.ts create mode 100644 packages/vite/tsconfig.json create mode 100644 packages/vite/tsconfig.lib.json create mode 100644 packages/vite/tsconfig.spec.json diff --git a/docs/generated/packages/vite.json b/docs/generated/packages/vite.json new file mode 100644 index 0000000000..cdd60ad775 --- /dev/null +++ b/docs/generated/packages/vite.json @@ -0,0 +1,19 @@ +{ + "githubRoot": "https://github.com/nrwl/nx/blob/master", + "name": "vite", + "packageName": "@nrwl/vite", + "description": "The Nx Plugin for building and testing applications using Vite (Early Release)", + "root": "/packages/vite", + "source": "/packages/vite/src", + "documentation": [ + { + "name": "Overview", + "id": "overview", + "path": "/packages/vite", + "file": "shared/vite-plugin", + "content": "The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/).\n\n{% callout type=\"warning\" title=\"Early release plugin\" %}\nThis Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022.\n{% /callout %}\n\nWhy should you use this plugin?\n\n- Instant dev server start\n- Lightning fast Hot-Module Reloading\n- _Fast_ builds using Vite.\n- Vite-powered tests with smart and instant watch mode\n\n## Setting up Vite\n\nTo create a new workspace, run `npx create-nx-workspace@latest --preset=npm`.\n\nTo add the Vite plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```shell\nnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```shell\nyarn add -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"pnpm\" %}\n\n```shell\npnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% /tabs %}\n" + } + ], + "generators": [], + "executors": [] +} diff --git a/docs/map.json b/docs/map.json index 80879d5b20..a219a91826 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1372,6 +1372,19 @@ } ] }, + { + "name": "vite", + "id": "vite", + "description": "Vite package.", + "itemList": [ + { + "name": "Overview", + "id": "overview", + "path": "/packages/vite", + "file": "shared/vite-plugin" + } + ] + }, { "name": "angular", "id": "angular", diff --git a/docs/packages.json b/docs/packages.json index a0a7824a0d..21205dec11 100644 --- a/docs/packages.json +++ b/docs/packages.json @@ -368,6 +368,13 @@ "path": "generated/packages/tao.json", "schemas": { "executors": [], "generators": [] } }, + { + "name": "vite", + "packageName": "vite", + "description": "The Nx Plugin for building and testing applications using Vite (Early Release)", + "path": "generated/packages/vite.json", + "schemas": { "executors": [], "generators": [] } + }, { "name": "web", "packageName": "web", diff --git a/docs/shared/vite-plugin.md b/docs/shared/vite-plugin.md new file mode 100644 index 0000000000..4b50bafe36 --- /dev/null +++ b/docs/shared/vite-plugin.md @@ -0,0 +1,42 @@ +The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/). + +{% callout type="warning" title="Early release plugin" %} +This Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022. +{% /callout %} + +Why should you use this plugin? + +- Instant dev server start +- Lightning fast Hot-Module Reloading +- _Fast_ builds using Vite. +- Vite-powered tests with smart and instant watch mode + +## Setting up Vite + +To create a new workspace, run `npx create-nx-workspace@latest --preset=npm`. + +To add the Vite plugin to an existing workspace, run the following: + +{% tabs %} +{% tab label="npm" %} + +```shell +npm install -D @nrwl/vite +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nrwl/vite +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm install -D @nrwl/vite +``` + +{% /tab %} +{% /tabs %} diff --git a/e2e/utils/index.ts b/e2e/utils/index.ts index 2bfae8da28..b393c0cc6e 100644 --- a/e2e/utils/index.ts +++ b/e2e/utils/index.ts @@ -330,6 +330,7 @@ export function newProject({ `@nrwl/rollup`, `@nrwl/react`, `@nrwl/storybook`, + `@nrwl/vite`, `@nrwl/web`, `@nrwl/webpack`, `@nrwl/react-native`, diff --git a/e2e/vite/jest.config.ts b/e2e/vite/jest.config.ts new file mode 100644 index 0000000000..4dd8ea534e --- /dev/null +++ b/e2e/vite/jest.config.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +export default { + transform: { + '^.+\\.[tj]sx?$': 'ts-jest', + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], + maxWorkers: 1, + globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json' } }, + displayName: 'e2e-vite', + preset: '../../jest.preset.js', +}; diff --git a/e2e/vite/project.json b/e2e/vite/project.json new file mode 100644 index 0000000000..69b4fcec05 --- /dev/null +++ b/e2e/vite/project.json @@ -0,0 +1,34 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "e2e/vite", + "projectType": "application", + "targets": { + "e2e": { + "executor": "nx:run-commands", + "options": { + "commands": [ + { + "command": "yarn e2e-start-local-registry" + }, + { + "command": "yarn e2e-build-package-publish" + }, + { + "command": "nx run-e2e-tests e2e-vite" + } + ], + "parallel": false + } + }, + "run-e2e-tests": { + "executor": "@nrwl/jest:jest", + "options": { + "jestConfig": "e2e/vite/jest.config.ts", + "passWithNoTests": true, + "runInBand": true + }, + "outputs": ["{workspaceRoot}/coverage/e2e/vite"] + } + }, + "implicitDependencies": ["vite"] +} diff --git a/e2e/vite/src/vite.test.ts b/e2e/vite/src/vite.test.ts new file mode 100644 index 0000000000..70e6c08a23 --- /dev/null +++ b/e2e/vite/src/vite.test.ts @@ -0,0 +1,15 @@ +import { cleanupProject, newProject } from '@nrwl/e2e/utils'; + +describe('Vite Plugin', () => { + let proj: string; + + beforeEach(() => (proj = newProject())); + + afterEach(() => cleanupProject()); + + xit('should build applications', () => {}); + + xit('should serve applications in dev mode', () => {}); + + xit('should test applications', () => {}); +}); diff --git a/e2e/vite/tsconfig.json b/e2e/vite/tsconfig.json new file mode 100644 index 0000000000..6d5abf8483 --- /dev/null +++ b/e2e/vite/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "types": ["node", "jest"] + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/e2e/vite/tsconfig.spec.json b/e2e/vite/tsconfig.spec.json new file mode 100644 index 0000000000..1a24bfb0a1 --- /dev/null +++ b/e2e/vite/tsconfig.spec.json @@ -0,0 +1,20 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.test.ts", + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.test.js", + "**/*.spec.jsx", + "**/*.test.jsx", + "**/*.d.ts", + "jest.config.ts" + ] +} diff --git a/packages/vite/.eslintrc.json b/packages/vite/.eslintrc.json new file mode 100644 index 0000000000..556554a795 --- /dev/null +++ b/packages/vite/.eslintrc.json @@ -0,0 +1,25 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["./package.json", "./generators.json", "./executors.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "@nrwl/nx/nx-plugin-checks": "error" + } + } + ] +} diff --git a/packages/vite/.lib.swcrc b/packages/vite/.lib.swcrc new file mode 100644 index 0000000000..4bb0ed899c --- /dev/null +++ b/packages/vite/.lib.swcrc @@ -0,0 +1,31 @@ +{ + "jsc": { + "target": "es2017", + "parser": { + "syntax": "typescript", + "decorators": true, + "dynamicImport": true + }, + "transform": { + "decoratorMetadata": true, + "legacyDecorator": true + }, + "keepClassNames": true, + "externalHelpers": true, + "loose": true + }, + "module": { + "type": "commonjs", + "strict": true, + "noInterop": true + }, + "sourceMaps": true, + "exclude": [ + "jest.config.ts", + ".*.spec.tsx?$", + ".*.test.tsx?$", + "./src/jest-setup.ts$", + "./**/jest-setup.ts$", + ".*.js$" + ] +} diff --git a/packages/vite/README.md b/packages/vite/README.md new file mode 100644 index 0000000000..994b306e29 --- /dev/null +++ b/packages/vite/README.md @@ -0,0 +1,13 @@ +

Nx - Smart, Fast and Extensible Build System

+ +{{links}} + +
+ +# Nx: Smart, Fast and Extensible Build System + +Nx is a next generation build system with first class monorepo support and powerful integrations. + +This package is a [Vite plugin for Nx](https://nx.dev/packages/vite). + +{{content}} diff --git a/packages/vite/docs/.gitkeep b/packages/vite/docs/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/vite/executors.json b/packages/vite/executors.json new file mode 100644 index 0000000000..bfd9c672e7 --- /dev/null +++ b/packages/vite/executors.json @@ -0,0 +1,4 @@ +{ + "builders": {}, + "executors": {} +} diff --git a/packages/vite/generators.json b/packages/vite/generators.json new file mode 100644 index 0000000000..60b87097a8 --- /dev/null +++ b/packages/vite/generators.json @@ -0,0 +1,6 @@ +{ + "name": "Nx Vite", + "version": "0.1", + "schematics": {}, + "generators": {} +} diff --git a/packages/vite/index.ts b/packages/vite/index.ts new file mode 100644 index 0000000000..457e54197c --- /dev/null +++ b/packages/vite/index.ts @@ -0,0 +1 @@ +export * from './src/utils/versions'; diff --git a/packages/vite/jest.config.ts b/packages/vite/jest.config.ts new file mode 100644 index 0000000000..6a7529f6cd --- /dev/null +++ b/packages/vite/jest.config.ts @@ -0,0 +1,17 @@ +const fs = require('fs'); + +// Reading the SWC compilation config and remove the "exclude" +// for the test files to be compiled by SWC +const { exclude: _, ...swcJestConfig } = JSON.parse( + fs.readFileSync(`${__dirname}/.lib.swcrc`, 'utf-8') +); + +module.exports = { + displayName: 'vite', + preset: '../../jest.preset.js', + transform: { + '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig], + }, + moduleFileExtensions: ['ts', 'js', 'html'], + coverageDirectory: '../../coverage/packages/vite', +}; diff --git a/packages/vite/migrations.json b/packages/vite/migrations.json new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/packages/vite/migrations.json @@ -0,0 +1 @@ +{} diff --git a/packages/vite/package.json b/packages/vite/package.json new file mode 100644 index 0000000000..86dfc74e6d --- /dev/null +++ b/packages/vite/package.json @@ -0,0 +1,40 @@ +{ + "name": "@nrwl/vite", + "version": "0.0.1", + "private": false, + "description": "The Nx Plugin for building and testing applications using Vite (Early Release)", + "repository": { + "type": "git", + "url": "https://github.com/nrwl/nx.git", + "directory": "packages/vite" + }, + "keywords": [ + "Monorepo", + "Vite", + "Web", + "CLI" + ], + "main": "./index.js", + "typings": "./index.d.ts", + "author": "Victor Savkin", + "license": "MIT", + "bugs": { + "url": "https://github.com/nrwl/nx/issues" + }, + "homepage": "https://nx.dev", + "schematics": "./generators.json", + "builders": "./executors.json", + "ng-update": { + "requirements": {}, + "migrations": "./migrations.json" + }, + "dependencies": { + "@nrwl/devkit": "file:../devkit", + "@nrwl/workspace": "file:../workspace", + "@swc/helpers": "^0.4.11", + "chalk": "4.1.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/vite/project.json b/packages/vite/project.json new file mode 100644 index 0000000000..275c7e564d --- /dev/null +++ b/packages/vite/project.json @@ -0,0 +1,87 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/vite", + "projectType": "library", + "targets": { + "test": { + "executor": "@nrwl/jest:jest", + "options": { + "jestConfig": "packages/vite/jest.config.ts", + "passWithNoTests": true + }, + "outputs": ["{workspaceRoot}/coverage/packages/vite"] + }, + "build-base": { + "executor": "@nrwl/js:swc", + "options": { + "outputPath": "build/packages/vite", + "tsConfig": "packages/vite/tsconfig.lib.json", + "main": "packages/vite/index.ts", + "updateBuildableProjectDepsInPackageJson": false, + "assets": [ + { + "input": "packages/vite", + "glob": "**/files/**", + "output": "/" + }, + { + "input": "packages/vite", + "glob": "**/files/**/.gitkeep", + "output": "/" + }, + { + "input": "packages/vite", + "glob": "**/*.json", + "ignore": ["**/tsconfig*.json", "project.json", ".eslintrc.json"], + "output": "/" + }, + { + "input": "packages/vite", + "glob": "**/*.js", + "ignore": ["**/jest.config.js"], + "output": "/" + }, + { + "input": "packages/vite", + "glob": "**/*.d.ts", + "output": "/" + }, + { + "input": "", + "glob": "LICENSE", + "output": "/" + } + ] + }, + "outputs": ["{options.outputPath}"] + }, + "build": { + "executor": "nx:run-commands", + "outputs": ["{workspaceRoot}/build/packages/vite"], + "options": { + "command": "node ./scripts/copy-readme.js vite" + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "options": { + "lintFilePatterns": [ + "packages/vite/**/*.ts", + "packages/vite/**/*.spec.ts", + "packages/vite/**/*_spec.ts", + "packages/vite/**/*.spec.tsx", + "packages/vite/**/*.spec.js", + "packages/vite/**/*.spec.jsx", + "packages/vite/**/*.d.ts", + "packages/vite/**/executors/**/schema.json", + "packages/vite/**/generators/**/schema.json", + "packages/vite/generators.json", + "packages/vite/executors.json", + "packages/vite/package.json", + "packages/vite/migrations.json" + ] + }, + "outputs": ["{options.outputFile}"] + } + } +} diff --git a/packages/vite/src/executors/.gitkeep b/packages/vite/src/executors/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/vite/src/generators/.gitkeep b/packages/vite/src/generators/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/vite/src/utils/versions.ts b/packages/vite/src/utils/versions.ts new file mode 100644 index 0000000000..e268dc8f82 --- /dev/null +++ b/packages/vite/src/utils/versions.ts @@ -0,0 +1 @@ +export const nxVersion = require('../../package.json').version; diff --git a/packages/vite/tsconfig.json b/packages/vite/tsconfig.json new file mode 100644 index 0000000000..19b9eece4d --- /dev/null +++ b/packages/vite/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "module": "commonjs" + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/vite/tsconfig.lib.json b/packages/vite/tsconfig.lib.json new file mode 100644 index 0000000000..025471a4fc --- /dev/null +++ b/packages/vite/tsconfig.lib.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "declaration": true + }, + "include": ["**/*.ts"], + "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"] +} diff --git a/packages/vite/tsconfig.spec.json b/packages/vite/tsconfig.spec.json new file mode 100644 index 0000000000..546f12877f --- /dev/null +++ b/packages/vite/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] +} diff --git a/scripts/depcheck/unused.ts b/scripts/depcheck/unused.ts index d1fb101d21..fc086b3e2a 100644 --- a/scripts/depcheck/unused.ts +++ b/scripts/depcheck/unused.ts @@ -3,7 +3,7 @@ import * as depcheck from 'depcheck'; // Ignore packages that are defined here per package. // Note: If @babel/parser fails to parse a file, then its imports will not be detected. const IGNORE_MATCHES = { - '*': ['@nrwl/workspace', 'chalk', 'tslib'], + '*': ['@nrwl/devkit', '@nrwl/workspace', 'chalk', 'tslib', '@swc/helpers'], angular: ['@angular-devkit/schematics', '@schematics/angular', 'http-server'], cli: [], cypress: [], @@ -22,6 +22,7 @@ const IGNORE_MATCHES = { rollup: [], storybook: [], nx: ['glob'], + vite: [], web: ['http-server'], webpack: [ // These are not being picked up because @babel/parser is failing on the files that import them. diff --git a/workspace.json b/workspace.json index ff4c52e695..2795846cda 100644 --- a/workspace.json +++ b/workspace.json @@ -35,6 +35,7 @@ "e2e-storybook": "e2e/storybook", "e2e-storybook-angular": "e2e/storybook-angular", "e2e-utils": "e2e/utils", + "e2e-vite": "e2e/vite", "e2e-web": "e2e/web", "e2e-webpack": "e2e/webpack", "e2e-workspace-create": "e2e/workspace-create", @@ -82,6 +83,7 @@ "storybook": "packages/storybook", "tao": "packages/tao", "typedoc-theme": "typedoc-theme", + "vite": "packages/vite", "web": "packages/web", "webpack": "packages/webpack", "workspace": "packages/workspace"