miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore(repo): use @nx/webpack/plugin to infer graph client targets (#22955)

Browse Source
This commit is contained in:
Jack Hsu 2024-04-24 09:45:35 -04:00 committed by GitHub
parent 25eeddc338
commit 973244970f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 402 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
graph/client-e2e/cypress-release-static.config.ts
View File

@ -1,6 +1,5 @@
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import setupNodeEvents from './src/plugins/index';
const cypressJsonConfig = {
fileServerFolder: '.',
@ -14,9 +13,14 @@ const cypressJsonConfig = {
};
export default defineConfig({
e2e: {
...nxE2EPreset(__dirname),
...nxE2EPreset(__dirname, {
webServerCommands: {
default:
'pnpm exec nx run graph-client:serve --configuration=release-static',
},
}),
baseUrl: 'http://localhost:4205',
...cypressJsonConfig,
setupNodeEvents,
/**
* TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
* This can cause tests to start breaking where not indended.

9
graph/client-e2e/cypress-release.config.ts
View File

@ -1,6 +1,5 @@
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import setupNodeEvents from './src/plugins/index';
const cypressJsonConfig = {
fileServerFolder: '.',
@ -14,9 +13,13 @@ const cypressJsonConfig = {
};
export default defineConfig({
e2e: {
...nxE2EPreset(__dirname),
...nxE2EPreset(__dirname, {
webServerCommands: {
default: 'pnpm exec nx run graph-client:serve --configuration=release',
},
}),
baseUrl: 'http://localhost:4203',
...cypressJsonConfig,
setupNodeEvents,
/**
* TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
* This can cause tests to start breaking where not indended.

9
graph/client-e2e/cypress-watch-mode.config.ts
View File

@ -1,6 +1,5 @@
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import setupNodeEvents from './src/plugins/index';
const cypressJsonConfig = {
fileServerFolder: '.',
@ -14,9 +13,13 @@ const cypressJsonConfig = {
};
export default defineConfig({
e2e: {
...nxE2EPreset(__dirname),
...nxE2EPreset(__dirname, {
webServerCommands: {
default: 'pnpm exec nx run graph-client:serve --configuration=watch',
},
}),
baseUrl: 'http://localhost:4204',
...cypressJsonConfig,
setupNodeEvents,
/**
* TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
* This can cause tests to start breaking where not indended.

9
graph/client-e2e/cypress.config.ts
View File

@ -1,6 +1,5 @@
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import setupNodeEvents from './src/plugins/index';
const cypressJsonConfig = {
fileServerFolder: '.',
@ -14,9 +13,13 @@ const cypressJsonConfig = {
};
export default defineConfig({
e2e: {
...nxE2EPreset(__dirname),
...nxE2EPreset(__dirname, {
webServerCommands: {
default: 'pnpm exec nx run graph-client:serve --configuration=dev-e2e',
},
}),
baseUrl: 'http://localhost:4206',
...cypressJsonConfig,
setupNodeEvents,
/**
* TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
* This can cause tests to start breaking where not indended.

17
graph/client-e2e/project.json
View File

@ -8,28 +8,21 @@
"executor": "@nx/cypress:cypress",
"options": {
"testingType": "e2e",
"skipServe": true,
"browser": "chrome"
},
"configurations": {
"dev": {
"cypressConfig": "graph/client-e2e/cypress.config.ts",
"devServerTarget": "graph-client:serve-base:dev-e2e",
"baseUrl": "http://localhost:4206"
"cypressConfig": "graph/client-e2e/cypress.config.ts"
},
"watch": {
"cypressConfig": "graph/client-e2e/cypress-watch-mode.config.ts",
"devServerTarget": "graph-client:serve-base:watch",
"baseUrl": "http://localhost:4204"
"cypressConfig": "graph/client-e2e/cypress-watch-mode.config.ts"
},
"release": {
"cypressConfig": "graph/client-e2e/cypress-release.config.ts",
"devServerTarget": "graph-client:serve-base:release",
"baseUrl": "http://localhost:4203"
"cypressConfig": "graph/client-e2e/cypress-release.config.ts"
},
"release-static": {
"cypressConfig": "graph/client-e2e/cypress-release-static.config.ts",
"devServerTarget": "graph-client:serve-base:release-static",
"baseUrl": "http://localhost:4205"
"cypressConfig": "graph/client-e2e/cypress-release-static.config.ts"
}
},
"defaultConfiguration": "dev"

2
graph/client/postcss.config.js
View File

@ -1,7 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {
config: './graph/client/tailwind.config.js',
config: './tailwind.config.js',
},
autoprefixer: {},
},

196
graph/client/project.json
View File

@ -31,191 +31,24 @@
}
},
"build-client": {
"executor": "@nx/webpack:webpack",
"options": {
"maxWorkers": 8,
"outputPath": "build/apps/graph",
"index": "graph/client/src/index.html",
"main": "graph/client/src/main.tsx",
"tsConfig": "graph/client/tsconfig.app.json",
"styles": ["graph/client/src/styles.css"],
"scripts": [],
"assets": [],
"webpackConfig": "graph/client/webpack.config.js",
"optimization": false,
"outputHashing": "none",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"extractLicenses": false,
"vendorChunk": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"babelUpwardRootMode": true
},
"configurations": {
"dev": {
"assets": [
"graph/client/src/favicon.ico",
"graph/client/src/assets/project-graphs/",
"graph/client/src/assets/task-graphs/",
"graph/client/src/assets/generated-project-graphs/",
"graph/client/src/assets/generated-task-graphs/",
"graph/client/src/assets/generated-task-inputs/",
"graph/client/src/assets/generated-source-maps/",
{
"input": "graph/client/src/assets/dev",
"output": "/",
"glob": "environment.js"
}
]
},
"dev-e2e": {
"assets": [
"graph/client/src/favicon.ico",
"graph/client/src/assets/project-graphs/",
"graph/client/src/assets/task-graphs/",
"graph/client/src/assets/task-inputs/",
"graph/client/src/assets/source-maps/",
{
"input": "graph/client/src/assets/dev-e2e",
"output": "/",
"glob": "environment.js"
}
]
},
"nx-console": {
"assets": [
"graph/client/src/favicon.ico",
{
"input": "graph/client/src/assets/project-graphs",
"output": "/assets/project-graphs",
"glob": "e2e.json"
},
{
"input": "graph/client/src/assets/nx-console",
"output": "/",
"glob": "environment.js"
}
]
},
"release": {
"assets": [
"graph/client/src/favicon.ico",
{
"input": "graph/client/src/assets/project-graphs",
"output": "/assets/project-graphs",
"glob": "e2e.json"
},
{
"input": "graph/client/src/assets/task-graphs",
"output": "/assets/task-graphs",
"glob": "e2e.json"
},
{
"input": "graph/client/src/assets/source-maps",
"output": "/assets/source-maps",
"glob": "e2e.json"
},
{
"input": "graph/client/src/assets/release",
"output": "/",
"glob": "environment.js"
}
],
"optimization": true,
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"release-static": {
"assets": [
"graph/client/src/favicon.ico",
{
"input": "graph/client/src/assets/project-graphs",
"output": "/assets/project-graphs",
"glob": "e2e.json"
},
{
"input": "graph/client/src/assets/task-graphs",
"output": "/assets/task-graphs",
"glob": "e2e.json"
},
{
"input": "graph/client/src/assets/release-static",
"output": "/",
"glob": "environment.js"
}
],
"optimization": true,
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"watch": {
"assets": [
"graph/client/src/favicon.ico",
{
"input": "graph/client/src/assets/watch",
"output": "/",
"glob": "environment.js"
}
]
}
"dev": {},
"nx-console": {},
"release": {},
"watch": {},
"release-static": {},
"dev-e2e": {}
},
"defaultConfiguration": "release",
"outputs": ["{options.outputPath}"]
"defaultConfiguration": "release"
},
"serve-base": {
"executor": "@nx/webpack:dev-server",
"configurations": {
"dev": {
"buildTarget": "graph-client:build-client:dev",
"port": 4201
},
"nx-console": {
"buildTarget": "graph-client:build-client:nx-console",
"port": 4202
},
"release": {
"buildTarget": "graph-client:build-client:release",
"port": 4203
},
"watch": {
"buildTarget": "graph-client:build-client:watch",
"port": 4204
},
"release-static": {
"buildTarget": "graph-client:build-client:release-static",
"port": 4205
},
"dev-e2e": {
"buildTarget": "graph-client:build-client:dev-e2e",
"port": 4206
}
"dev": {},
"nx-console": {},
"release": {},
"watch": {},
"release-static": {},
"dev-e2e": {}
},
"defaultConfiguration": "dev"
},
@ -229,6 +62,9 @@
],
"parallel": false
},
"dev-e2e": {
"commands": ["npx nx serve-base graph-client --configuration dev-e2e"]
},
"release": {
"commands": ["npx nx serve-base graph-client --configuration release"]
},

169
graph/client/webpack.config.js
View File

@ -1,20 +1,157 @@
const { join } = require('node:path');
// nx-ignore-next-line
const { withNx, composePlugins } = require('@nx/webpack');
const { NxWebpackPlugin } = require('@nx/webpack');
// nx-ignore-next-line
const { withReact } = require('@nx/react');
const { NxReactWebpackPlugin } = require('@nx/react');
module.exports = composePlugins(withNx(), withReact(), (config, context) => {
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat', // Must be below test-utils
'react/jsx-runtime': 'preact/jsx-runtime',
},
module.exports = {
output: {
path: join(__dirname, '../../build/apps/graph'),
},
devServer: {
port: getPort(process.env.NX_TASK_TARGET_CONFIGURATION),
historyApiFallback: {
disableDotRule: true,
},
};
});
},
resolve: {
alias: {
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat', // Must be below test-utils
'react/jsx-runtime': 'preact/jsx-runtime',
},
},
plugins: [
new NxWebpackPlugin({
index: './src/index.html',
compiler: 'babel',
main: './src/main.tsx',
tsConfig: './tsconfig.app.json',
styles: ['./src/styles.css'],
scripts: [],
assets: getAssets(process.env.NX_TASK_TARGET_CONFIGURATION),
webpackConfig: './webpack.config.js',
outputHashing: 'none',
}),
new NxReactWebpackPlugin({
svgr: false,
}),
],
};
function getPort(nxConfiguration) {
switch (nxConfiguration) {
case 'nx-console':
return 4202;
case 'release':
return 4203;
case 'watch':
return 4204;
case 'release-static':
return 4205;
case 'dev-e2e':
return 4206;
default: // dev
return 4201;
}
}
function getAssets(nxConfiguration) {
switch (nxConfiguration) {
case 'nx-console':
return [
'./src/favicon.ico',
{
input: './src/assets/project-graphs',
output: '/assets/project-graphs',
glob: 'e2e.json',
},
{
input: './src/assets/nx-console',
output: '/',
glob: 'environment.js',
},
];
case 'release':
return [
'./src/favicon.ico',
{
input: './src/assets/project-graphs',
output: '/assets/project-graphs',
glob: 'e2e.json',
},
{
input: './src/assets/task-graphs',
output: '/assets/task-graphs',
glob: 'e2e.json',
},
{
input: './src/assets/source-maps',
output: '/assets/source-maps',
glob: 'e2e.json',
},
{
input: './src/assets/release',
output: '/',
glob: 'environment.js',
},
];
case 'watch':
return [
'./src/favicon.ico',
{
input: './src/assets/watch',
output: '/',
glob: 'environment.js',
},
];
case 'release-static':
return [
'./src/favicon.ico',
{
input: './src/assets/project-graphs',
output: '/assets/project-graphs',
glob: 'e2e.json',
},
{
input: './src/assets/task-graphs',
output: '/assets/task-graphs',
glob: 'e2e.json',
},
{
input: './src/assets/release-static',
output: '/',
glob: 'environment.js',
},
];
case 'dev-e2e':
return [
'./src/favicon.ico',
'./src/assets/project-graphs/',
'./src/assets/task-graphs/',
'./src/assets/task-inputs/',
'./src/assets/source-maps/',
{
input: './src/assets/dev-e2e',
output: '/',
glob: 'environment.js',
},
];
default: // dev
return [
'./src/favicon.ico',
'./src/assets/project-graphs/',
'./src/assets/task-graphs/',
'./src/assets/generated-project-graphs/',
'./src/assets/generated-task-graphs/',
'./src/assets/generated-task-inputs/',
'./src/assets/generated-source-maps/',
{
input: './src/assets/dev',
output: '/',
glob: 'environment.js',
},
];
}
}

10
nx.json
View File

@ -169,9 +169,6 @@
"build-ng": {
"cache": true
},
"build-client": {
"cache": true
},
"sitemap": {
"cache": true
},
@ -205,6 +202,13 @@
"options": {
"targetName": "test"
}
},
{
"plugin": "@nx/webpack/plugin",
"options": {
"serveTargetName": "serve-base",
"buildTargetName": "build-client"
}
}
],
"nxCloudAccessToken": "YmZiOWQyNzctOThiZC00MjYwLWI3YTAtZDA3MDg4YWY1YTExfHJlYWQ=",

3
package.json
View File

@ -353,7 +353,8 @@
"tailwind-merge": "^1.8.1",
"tailwindcss": "3.2.4",
"tslib": "^2.3.0",
"weak-napi": "^2.0.2"
"weak-napi": "^2.0.2",
"webpack-cli": "^5.1.4"
},
"resolutions": {
"minimist": "^1.2.6",

546
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff