chore: adjust ui-components publishing (#8620)

* chore: adjust ui-components publishing

* chore: normalize moduleResolution casing

* chore: make compile:watch cross-platform

* chore: missing pnpm-lock updates

* meta: updated readme

Added local development instructions for using the package via npm link.

Signed-off-by: Claudio Wunder <cwunder@gnome.org>

---------

Signed-off-by: Claudio Wunder <cwunder@gnome.org>

Author: ovflowd

.github/workflows/publish-packages.yml

@@ -116,10 +116,11 @@ jobs:
           # Check if a custom publish script exists in package.json
           if jq -e '.scripts.release' package.json > /dev/null; then
             pnpm run release
-          else
-            pnpm publish --access public --no-git-checks
           fi
 
+          # Then publish the package to npm
+          pnpm publish --access public --no-git-checks
+
       - name: Notify on Manual Release
         if: ${{ github.event_name == 'workflow_dispatch' }}
         uses: rtCamp/action-slack-notify@e31e87e03dd19038e411e38ae27cbad084a90661 # 2.3.3

apps/site/tsconfig.json

@@ -10,6 +10,7 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "Bundler",
+    "customConditions": ["default"],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",

packages/i18n/tsconfig.json

@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "incremental": true,

packages/ui-components/README.md

@@ -8,3 +8,23 @@ The components are based on [this design file](https://www.figma.com/design/a10c
 Most components in this package are available on [Chromatic](https://www.chromatic.com/library?appId=64c7d71358830e9105808652).
 
 For additional details regarding specific components, refer to the [nodejs/nodejs.org](https://github.com/nodejs/nodejs.org) repository.
+
+## Local development
+
+To use this package via `npm link` in another repo (for example, doc-kit), build the
+compiled outputs and keep them updated while you work.
+
+```bash
+# From nodejs.org/packages/ui-components
+pnpm install
+node --run compile:watch
+
+# In another terminal, still in nodejs.org/packages/ui-components
+npm link
+
+# From the consumer repo (for example doc-kit)
+npm link @node-core/ui-components
+```
+
+The `compile:watch` script keeps `dist/` up to date so consumers resolve compiled
+CSS and JavaScript instead of the raw Tailwind source.

packages/ui-components/package.json

@@ -3,13 +3,20 @@
   "version": "1.5.10",
   "type": "module",
   "exports": {
-    "./*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
-    ]
+    "./*": {
+      "rolldown": [
+        "./dist/*",
+        "./dist/*.js",
+        "./dist/*/index.js"
+      ],
+      "default": [
+        "./src/*",
+        "./src/*.tsx",
+        "./src/*/index.tsx",
+        "./src/*.ts",
+        "./src/*/index.ts"
+      ]
+    }
   },
   "repository": {
     "type": "git",
@@ -20,7 +27,8 @@
     "compile:ts": "tsc",
     "compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
     "compile": "node --run compile:ts && node --run compile:css",
-    "release": "node --run compile && node scripts/publish.mjs",
+    "compile:watch": "concurrently -k \"node --run compile:ts -- --watch\" \"node --run compile:css -- --watch\"",
+    "release": "node --run compile",
     "lint": "node --run lint:js && node --run lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint:css:fix": "node --run lint:css -- --fix",
@@ -61,6 +69,7 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "cross-env": "catalog:",
+    "concurrently": "^8.2.2",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -80,14 +89,25 @@
     "typescript": "catalog:"
   },
   "imports": {
-    "#ui/*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
-    ]
+    "#ui/*": {
+      "rolldown": [
+        "./dist/*",
+        "./dist/*.js",
+        "./dist/*/index.js"
+      ],
+      "default": [
+        "./src/*",
+        "./src/*.tsx",
+        "./src/*/index.tsx",
+        "./src/*.ts",
+        "./src/*/index.ts"
+      ]
+    }
   },
+  "files": [
+    "dist/**",
+    "README.md"
+  ],
   "engines": {
     "node": ">=20"
   }

packages/ui-components/scripts/publish.mjs

@@ -8,10 +8,12 @@
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
+    "customConditions": ["default"],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
+    "declaration": true,
     "incremental": true,
     "baseUrl": "./src",
     "rootDir": "./src",