Use nx for running dev tasks (#32476)

* Use nx for running dev tasks Initially only build & start This enables caching, i.e. if you made no changes to shared-components then it can skip that build and speed up your iteration cycle time nx will also be used for our release tooling down the line Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Drop `concurrently` - we no longer use it Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Make knip happier Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Also use nx tasks for jest & tsc so that SC gets built as needed Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add missing @nx/jest plugin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix prebuild:rethemendex for Windows Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix prebuild:rethemendex for Windows Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add prepack script to package.json --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-12 15:19:59 +00:00
parent 7eff3f6c68
commit f326814895
9 changed files with 937 additions and 148 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,6 @@ storybook-static
 *.tsbuildinfo

 /.link-config
+
+.nx/cache
+.nx/workspace-data
--- a/knip.ts
+++ b/knip.ts
@@ -63,4 +63,7 @@ export default {
        "@types/sdp-transform",
    ],
    ignoreExportsUsedInFile: true,
+    nx: {
+        config: ["nx.json", "project.json", "{apps,packages,modules}/**/project.json", "package.json"],
+    },
 } satisfies KnipConfig;
--- a/nx.json
+++ b/nx.json
@@ -0,0 +1,9 @@
+{
+    "$schema": "./node_modules/nx/schemas/nx-schema.json",
+    "defaultBase": "develop",
+    "targetDefaults": {
+        "build": {
+            "dependsOn": ["^build", "prebuild:*"]
+        }
+    }
+}
--- a/package.json
+++ b/package.json
@@ -35,31 +35,20 @@
        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null && pnpm --dir packages/shared-components i18n:lint",
        "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && pnpm i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
        "make-component": "node scripts/make-react-component.js",
-        "rethemendex": "./res/css/rethemendex.sh",
-        "clean": "rimraf lib webapp",
-        "build": "pnpm clean && pnpm build:genfiles && pnpm build:bundle",
-        "build-stats": "pnpm clean && pnpm build:genfiles && pnpm build:bundle-stats",
-        "build:res": "node scripts/copy-res.ts",
-        "build:genfiles": "pnpm build:res && pnpm build:module_system",
+        "rethemendex": "sh ./res/css/rethemendex.sh",
+        "build": "nx build element-web",
+        "build-stats": "nx build-stats element-web --args=\"--json=webpack-stats.json\"",
        "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js && mv src/vector/modernizr.js src/vector/modernizr.cjs",
-        "build:bundle": "webpack --progress --mode production",
-        "build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json",
-        "build:module_system": "node module_system/scripts/install.ts",
        "dist": "./scripts/package.sh",
-        "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n modules,res \"pnpm build:module_system\" \"pnpm build:res\" && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"pnpm start:res\" \"pnpm start:js\"",
-        "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"pnpm start:res\" \"pnpm start:js --server-type https\"",
-        "start:res": "node scripts/copy-res.ts -w",
-        "start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
+        "start": "nx start element-web",
        "lint": "pnpm lint:types && pnpm lint:js && pnpm lint:style && pnpm lint:workflows",
        "lint:js": "eslint --max-warnings 0 src test playwright module_system && prettier --check .",
        "lint:js-fix": "prettier --log-level=warn --write . && eslint --fix src test playwright module_system",
-        "lint:types": "pnpm lint:types:src && pnpm lint:types:module_system",
-        "lint:types:src": "tsc --noEmit --jsx react && tsc --noEmit --jsx react -p playwright",
-        "lint:types:module_system": "tsc --noEmit --project ./tsconfig.module_system.json",
+        "lint:types": "nx lint:types element-web",
        "lint:style": "stylelint \"res/css/**/*.pcss\"",
        "lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) | xargs -I {} sh -c 'echo \"Linting {}\"; action-validator \"{}\"'",
        "lint:knip": "knip",
-        "test": "jest",
+        "test": "nx test:unit element-web",
        "test:playwright": "playwright test",
        "test:playwright:open": "pnpm test:playwright --ui",
        "test:playwright:screenshots": "playwright-screenshots --project=Chrome",
@@ -181,6 +170,7 @@
        "@element-hq/element-web-playwright-common": "catalog:",
        "@fetch-mock/jest": "^0.2.20",
        "@jest/globals": "^30.2.0",
+        "@nx/jest": "^22.5.0",
        "@peculiar/webcrypto": "^1.4.3",
        "@playwright/test": "catalog:",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
@@ -225,7 +215,6 @@
        "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
        "blob-polyfill": "^9.0.0",
        "chokidar": "^5.0.0",
-        "concurrently": "^9.0.0",
        "copy-webpack-plugin": "^13.0.0",
        "cronstrue": "^3.0.0",
        "css-loader": "^7.0.0",
@@ -262,6 +251,7 @@
        "mini-css-extract-plugin": "2.10.0",
        "minimist": "^1.2.6",
        "modernizr": "^3.12.0",
+        "nx": "22.5.0",
        "postcss": "8.5.6",
        "postcss-easings": "4.0.0",
        "postcss-hexrgba": "2.1.0",
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@@ -41,7 +41,8 @@
        "test:unit": "vitest --project=unit",
        "test:storybook": "pnpm build:doc && vitest --project=storybook",
        "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules",
-        "prepare": "vite build",
+        "build": "vite build",
+        "prepack": "pnpm run build",
        "storybook": "storybook dev -p 6007",
        "build:storybook": "pnpm build:doc && storybook build && node scripts/storybook-build-i18n.ts",
        "build:doc": "typedoc",
--- a/packages/shared-components/project.json
+++ b/packages/shared-components/project.json
@@ -0,0 +1,18 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "cache": true,
+            "command": "vite build",
+            "inputs": ["{projectRoot}/src/**/*"],
+            "outputs": ["{projectRoot}/dist"],
+            "options": { "cwd": "packages/shared-components" }
+        },
+        "start": {
+            "command": "vite build --watch",
+            "options": { "cwd": "packages/shared-components" },
+            "continuous": true
+        }
+    }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 nodeLinker: hoisted
 linkWorkspacePackages: true
 packages:
+    - "."
    - "packages/*"
 catalogMode: prefer
 cleanupUnusedCatalogs: true
--- a/project.json
+++ b/project.json
@@ -0,0 +1,66 @@
+{
+    "$schema": "./node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "implicitDependencies": ["@element-hq/web-shared-components"],
+    "targets": {
+        "clean": {
+            "command": "rimraf webapp",
+            "outputs": ["{projectRoot}/webapp/"]
+        },
+        "prebuild:i18n": {
+            "cache": true,
+            "command": "node scripts/copy-res.ts",
+            "dependsOn": ["clean"],
+            "inputs": ["{projectRoot}/src/i18n/strings/*.json"],
+            "outputs": ["{projectRoot}/webapp/i18n/"]
+        },
+        "prebuild:module_system": {
+            "cache": true,
+            "command": "node module_system/scripts/install.ts",
+            "inputs": ["{projectRoot}/build_config.yaml"],
+            "outputs": ["{projectRoot}/src/modules.js", "{projectRoot}/package.json", "{workspaceRoot}/pnpm-lock.yaml"]
+        },
+        "prebuild:rethemendex": {
+            "cache": true,
+            "executor": "nx:run-script",
+            "options": {
+                "script": "rethemendex"
+            },
+            "inputs": ["{projectRoot}/res/css/**/*"],
+            "outputs": ["{projectRoot}/res/css/_components.pcss"]
+        },
+        "build": {
+            "command": "webpack-cli --progress --mode production {args}",
+            "outputs": ["{projectRoot}/webapp"]
+        },
+        "start:i18n": {
+            "command": "node scripts/copy-res.ts -w",
+            "dependsOn": ["clean"],
+            "continuous": true
+        },
+        "start": {
+            "command": "webpack-dev-server --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
+            "dependsOn": ["prebuild:*", "start:i18n", "^start"],
+            "continuous": true
+        },
+        "lint:types": {
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": [
+                    "tsc --noEmit --project ./tsconfig.module_system.json",
+                    "tsc --noEmit",
+                    "tsc --noEmit -p playwright"
+                ],
+                "parallel": false
+            },
+            "dependsOn": ["^build"]
+        },
+        "test:unit": {
+            "executor": "@nx/jest:jest",
+            "options": {
+                "jestConfig": "jest.config.ts"
+            },
+            "dependsOn": ["^build"]
+        }
+    }
+}