chore: migrate from TS path aliases to workspaces + project references

.github/workflows/deploy.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Upload artifacts
         uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
         with:
-          path: './dist/apps/website'
+          path: './apps/website/dist'
 
   deploy:
     needs: build

.gitignore

@@ -1,9 +1,9 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
+dist
 /tmp
-/out-tsc
+out-tsc
 /packages/*/dist/bundle-size
 
 # TypeScript build info

.syncpackrc.json

@@ -1,6 +1,14 @@
 {
   "$schema": "./node_modules/syncpack/schema.json",
   "strict": true,
+  "semverGroups": [
+    {
+      "label": "Internal @griffel/* deps must use a caret range when semver-pinned",
+      "dependencies": ["@griffel/*"],
+      "specifierTypes": ["exact", "range-major", "range-minor", "range"],
+      "range": "^"
+    }
+  ],
   "versionGroups": [
     {
       "label": "Local @griffel/* cross-package deps must use the same caret range everywhere",

apps/website/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@griffel/website",
+  "version": "0.0.0",
   "description": "Docusaurus has update notifier that checks presence of package.json file, if it's missing it throws",
   "private": true
 }

apps/website/project.json

@@ -8,23 +8,23 @@
       "executor": "nx:run-commands",
       "options": {
         "cwd": "apps/website",
-        "commands": [{ "command": "docusaurus build --out-dir ../../dist/apps/website" }]
+        "commands": [
+          {
+            "command": "docusaurus build --out-dir ./dist"
+          }
+        ]
       },
-      "outputs": ["{workspaceRoot}/dist/apps/website"]
+      "outputs": ["{workspaceRoot}/apps/website/dist"]
     },
     "serve": {
       "executor": "nx:run-commands",
       "options": {
         "cwd": "apps/website",
-        "commands": [{ "command": "docusaurus start" }]
-      }
-    },
-    "type-check": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "apps/website",
-        "commands": [{ "command": "tsc -b --pretty" }],
-        "outputPath": []
+        "commands": [
+          {
+            "command": "docusaurus start"
+          }
+        ]
       }
     }
   },

apps/website/tsconfig.json

@@ -5,15 +5,21 @@
     "allowSyntheticDefaultImports": true,
     "checkJs": true,
     "jsx": "react",
-    "noEmit": true,
-    "outDir": "../../dist/out-tsc",
+    "outDir": "./out-tsc",
     "types": [
       "../../node_modules/@docusaurus/module-type-aliases",
       "../../node_modules/@docusaurus/theme-classic",
       "environment",
       "static-assets",
       "webpack-env"
-    ]
+    ],
+    "composite": true
   },
-  "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"]
+  "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
+  "exclude": ["./src/components/Playground/code/templates/**"],
+  "references": [
+    {
+      "path": "../../packages/core"
+    }
+  ]
 }

azure-pipelines.yml

@@ -51,6 +51,9 @@ extends:
               - script: yarn install --frozen-lockfile
                 displayName: Install dependencies
 
+              - script: yarn nx run-many --target=build --all --parallel
+                displayName: Build all packages
+
               - script: |
                   git config user.name "Fluent UI Build"
                   git config user.email "fluentui-internal@service.microsoft.com"

beachball.hooks.js

@@ -1,6 +1,8 @@
 // @ts-check
 
 const childProcess = require('child_process');
+const fs = require('fs');
+const path = require('path');
 
 /**
  * @param {String} command
@@ -38,21 +40,34 @@ function sh(command) {
   });
 }
 
-let completedPrepublish = false;
+const REPO_ROOT = __dirname;
+
+/**
+ * Make sure a workspace-rooted asset is present at the package root so `npm pack`
+ * picks it up via the `files` field. Falls back to copying the workspace-root copy
+ * when the package itself doesn't ship one (the LICENSE.md is shared across the
+ * monorepo; some packages also rely on the root README).
+ *
+ * @param {string} packagePath
+ * @param {string} asset
+ */
+function ensurePackageAsset(packagePath, asset) {
+  const target = path.join(packagePath, asset);
+  if (fs.existsSync(target)) return;
+  const source = path.join(REPO_ROOT, asset);
+  if (!fs.existsSync(source)) return;
+  fs.copyFileSync(source, target);
+}
 
 /**
  * @type {import('beachball').BeachballConfig['hooks']}
  */
 module.exports = {
-  // Executed after all package versions were bumped -> run build
-  // If we run build before `beachball publish`, artifacts would have
-  // old (without bump) versions.
-  async prepublish() {
-    // `beachball` runs this hook for every package, we want to run it only once.
-    if (!completedPrepublish) {
-      await sh('yarn nx run-many --target=build,build-cjs --all --parallel --max-parallel=3');
-      completedPrepublish = true;
-    }
+  // Per-package: stage the workspace-root LICENSE/README into the package root so
+  // `npm pack` (which beachball runs from the package root) finds them via `files`.
+  async prepublish(packagePath) {
+    ensurePackageAsset(packagePath, 'LICENSE.md');
+    ensurePackageAsset(packagePath, 'README.md');
   },
   // Runs once after all bumps, before committing — update lockfile so it stays in sync
   async precommit() {

change/@griffel-babel-preset-5c7ca657-6f16-4831-add5-ec10fa461db1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/babel-preset",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-core-488ea0f9-cccb-4721-86a4-b2491be089ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-devtools-a0037621-c810-4227-b642-4dcad066cf08.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/devtools",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-eslint-plugin-40aaef23-b998-4a26-a088-eb7c058b307b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/eslint-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-jest-serializer-14b11c90-c293-4a16-9682-a278877a5ed6.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/jest-serializer",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-postcss-syntax-cf05402a-d49d-4061-9c0b-1942aad275f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/postcss-syntax",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-react-bc97d453-9e78-491a-8956-522c5558ff31.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/react",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-shadow-dom-bdffa7d7-6265-4763-826e-0057fa91d215.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/shadow-dom",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-style-types-6312bb23-b468-4396-9648-72063566db45.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/style-types",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-transform-87d14893-72a5-4b6e-8458-a4d4e5eb572e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/transform",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-transform-shaker-0accdf23-15f3-4f87-bf5b-88581795b1e4.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/transform-shaker",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-webpack-extraction-plugin-77ddbf00-8fb4-4a21-8093-48e6b5efc497.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-webpack-loader-c5a41871-e1fe-49bd-915c-e24254eb6ede.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/webpack-loader",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-webpack-plugin-49de74bc-716f-43a5-a2b3-9892a585faba.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from TS path aliases to yarn workspaces + TS project references",
+  "packageName": "@griffel/webpack-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

e2e/eslint/package.json

@@ -2,5 +2,10 @@
   "name": "@griffel/e2e-eslint",
   "version": "0.0.0",
   "private": true,
-  "type": "module"
+  "type": "module",
+  "devDependencies": {
+    "@griffel/e2e-utils": "*",
+    "@griffel/eslint-plugin": "^3.0.2",
+    "@griffel/react": "^1.7.4"
+  }
 }

e2e/eslint/project.json

@@ -7,20 +7,21 @@
   "targets": {
     "test": {
       "executor": "nx:run-commands",
-      "dependsOn": [{ "target": "build", "dependencies": true }],
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
       "options": {
         "cwd": "e2e/eslint",
-        "commands": [{ "command": "node src/test.ts" }]
+        "commands": [
+          {
+            "command": "node src/test.ts"
+          }
+        ]
       },
       "outputs": []
-    },
-    "type-check": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "e2e/eslint",
-        "commands": [{ "command": "tsc -b --pretty" }],
-        "outputPath": []
-      }
     }
   },
   "tags": []

e2e/eslint/tsconfig.json

@@ -1,13 +1,5 @@
 {
   "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
-    "allowImportingTsExtensions": true,
-    "noEmit": true
-  },
   "files": [],
   "include": [],
   "references": [

e2e/eslint/tsconfig.lib.json

@@ -1,9 +1,22 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
     "types": ["node", "environment"]
   },
-  "include": ["**/*.ts", "**/*.js"],
-  "exclude": ["src/assets"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "references": [
+    {
+      "path": "../../packages/react/tsconfig.lib.json"
+    },
+    {
+      "path": "../../packages/eslint-plugin/tsconfig.lib.json"
+    },
+    {
+      "path": "../utils/tsconfig.lib.json"
+    }
+  ]
 }