Switch to package exports for React packages

change/@ni-nimble-react-87afa7f5-520c-4a7f-b04b-a3b510dc0f43.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Switch to package exports",
+  "packageName": "@ni/nimble-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-ok-react-75f3e0c4-573f-4603-a3f5-dd12c50a7dcb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Switch to package exports",
+  "packageName": "@ni/ok-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-spright-react-f4aefe44-b717-4641-9803-312fbc4d9ddf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Switch to package exports",
+  "packageName": "@ni/spright-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-workspace/nimble-react/.npmignore

@@ -1,4 +1,5 @@
 *
+!/styles/*
 !/dist/*.*
 !/dist/esm/**
 /dist/esm/**/tests

packages/react-workspace/nimble-react/build/generate-icons/source/index.js → packages/react-workspace/nimble-react/build/generate-icons.mjs

@@ -2,10 +2,9 @@
  * Build script for generating React wrappers for Nimble icon components.
  */
 import { pascalCase, spinalCase } from '@ni/fast-web-utilities';
-import * as icons from '@ni/nimble-tokens/dist/icons/js';
-
-const fs = require('fs');
-const path = require('path');
+import * as icons from '@ni/nimble-tokens/dist/icons/js/index.js';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
 
 const trimSizeFromName = text => {
     // Remove dimensions from icon name, e.g. "add16X16" -> "add"
@@ -15,7 +14,7 @@ const trimSizeFromName = text => {
 const generatedFilePrefix = `// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
 // See generation source in nimble-react/build/generate-icons\n`;
 
-const iconsDirectory = path.resolve(__dirname, '../../../src/icons');
+const iconsDirectory = path.resolve(import.meta.dirname, '../src/icons');
 
 if (fs.existsSync(iconsDirectory)) {
     console.log(`Deleting existing icons directory "${iconsDirectory}"`);
@@ -49,4 +48,4 @@ export const Nimble${className} = wrap(${className});`;
         encoding: 'utf-8'
     });
 }
-console.log(`Finshed writing ${fileCount} icon react wrapper files`);
+console.log(`Finished writing ${fileCount} icon react wrapper files`);

packages/react-workspace/nimble-react/eslint.config.mjs

@@ -1,20 +1,16 @@
 import { defineConfig, globalIgnores } from 'eslint/config';
-import { lintNimbleConfig, javascriptNimbleConfig, typescriptNimbleConfig } from '@ni-private/eslint-config-nimble';
+import { javascriptConfig, importNodeEsmConfig } from '@ni/eslint-config-javascript';
+import { lintNimbleConfig, typescriptNimbleConfig } from '@ni-private/eslint-config-nimble';
 
 export default defineConfig([
     globalIgnores(['**/dist/']),
     lintNimbleConfig,
     {
-        files: ['**/*.js', '**/*.cjs'],
-        extends: javascriptNimbleConfig,
+        files: ['build/**/*.mjs'],
+        extends: [javascriptConfig, importNodeEsmConfig],
         rules: {
             // Configuration scripts will not be in published package and are allowed to use devDependencies
             'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-        },
-    },
-    {
-        files: ['**/build/**/*.js'],
-        rules: {
             // Build scripts should give verbose logging
             'no-console': 'off',
             // Rollup config files use default exports

packages/react-workspace/nimble-react/package.json

@@ -7,11 +7,32 @@
     "nimble",
     "react"
   ],
+  "type": "module",
+  "exports": {
+      "./package.json": "./package.json",
+      "./styles/*": "./styles/*",
+      "./icons/*": {
+        "types": "./dist/esm/icons/*.d.ts",
+        "import": "./dist/esm/icons/*.js"
+      },
+      "./*": {
+        "types": "./dist/esm/*.d.ts",
+        "import": "./dist/esm/*/index.js"
+      }
+  },
+  "typesVersions": {
+    "*": {
+      "icons/*": [
+        "dist/esm/icons/*.d.ts"
+      ],
+      "*": [
+        "dist/esm/*/index.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "build": "npm run build:icons && npm run build:components",
-    "build:icons": "npm run build:icons:bundle && npm run build:icons:run",
-    "build:icons:bundle": "rollup --bundleConfigAsCjs --config build/generate-icons/rollup.config.js",
-    "build:icons:run": "node build/generate-icons/dist/index.js",
+    "build:icons": "node build/generate-icons.mjs",
     "build:components": "tsc -p ./tsconfig.json",
     "lint": "eslint .",
     "format": "eslint . --fix",
@@ -32,8 +53,6 @@
     "@ni/fast-web-utilities": "^10.0.0",
     "@ni/nimble-components": "^34.10.3",
     "@ni/nimble-tokens": "^8.13.6",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "rollup": "^4.12.0",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {

packages/react-workspace/nimble-react/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "declaration": true,
         "esModuleInterop": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "outDir": "dist/esm",
         "strict": true,
         "experimentalDecorators": true,

packages/react-workspace/ok-react/eslint.config.mjs

@@ -1,17 +1,9 @@
 import { defineConfig, globalIgnores } from 'eslint/config';
-import { lintNimbleConfig, javascriptNimbleConfig, typescriptNimbleConfig } from '@ni-private/eslint-config-nimble';
+import { lintNimbleConfig, typescriptNimbleConfig } from '@ni-private/eslint-config-nimble';
 
 export default defineConfig([
     globalIgnores(['**/dist/']),
     lintNimbleConfig,
-    {
-        files: ['**/*.js', '**/*.cjs'],
-        extends: javascriptNimbleConfig,
-        rules: {
-            // Configuration scripts will not be in published package and are allowed to use devDependencies
-            'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-        }
-    },
     {
         files: ['**/*.ts'],
         extends: typescriptNimbleConfig,

packages/react-workspace/ok-react/package.json

@@ -7,6 +7,21 @@
     "ok",
     "react"
   ],
+  "type": "module",
+  "exports": {
+      "./package.json": "./package.json",
+      "./*": {
+        "types": "./dist/esm/*.d.ts",
+        "import": "./dist/esm/*/index.js"
+      }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/esm/*/index.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "build": "tsc -p ./tsconfig.json",
     "lint": "eslint .",

packages/react-workspace/ok-react/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "declaration": true,
         "esModuleInterop": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "outDir": "dist/esm",
         "strict": true,
         "experimentalDecorators": true,

packages/react-workspace/react-client-app/.npmignore

@@ -0,0 +1,2 @@
+*
+!/dist/*.*

packages/react-workspace/react-client-app/eslint.config.mjs

@@ -2,17 +2,22 @@ import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import { defineConfig, globalIgnores } from 'eslint/config';
-import { lintNimbleConfig, javascriptNimbleConfig, typescriptNimbleConfig } from '@ni-private/eslint-config-nimble';
+import { javascriptConfig, importNodeEsmConfig } from '@ni/eslint-config-javascript';
+import { lintNimbleConfig, typescriptNimbleConfig } from '@ni-private/eslint-config-nimble';
 
 export default defineConfig([
     globalIgnores(['**/dist/']),
     lintNimbleConfig,
     {
-        files: ['**/*.js', '**/*.cjs'],
-        extends: javascriptNimbleConfig,
+        files: ['vite.config.mjs'],
+        extends: [javascriptConfig, importNodeEsmConfig],
         rules: {
             // Configuration scripts will not be in published package and are allowed to use devDependencies
             'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+            // Build scripts should give verbose logging
+            'no-console': 'off',
+            // Rollup config files use default exports
+            'import/no-default-export': 'off',
         },
     },
     {
@@ -30,7 +35,7 @@ export default defineConfig([
         ],
         languageOptions: {
             parserOptions: {
-                project: './tsconfig.app.json',
+                project: './tsconfig.json',
                 tsconfigRootDir: import.meta.dirname,
                 ecmaFeatures: {
                     jsx: true,
@@ -58,19 +63,5 @@ export default defineConfig([
             '@typescript-eslint/strict-boolean-expressions': 'off',
             'no-alert': 'off',
         },
-    },
-    {
-        files: ['**/vite.config.ts'],
-        languageOptions: {
-            parserOptions: {
-                project: './tsconfig.node.json',
-                tsconfigRootDir: import.meta.dirname,
-            },
-        },
-        rules: {
-            // Configuration scripts will not be in published package and are allowed to use devDependencies
-            'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-            'import/no-default-export': 'off',
-        },
     }
 ]);

packages/react-workspace/react-client-app/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "vite",
     "build": "tsc -b && vite build",
+    "test": "tsc -p ./tsconfig.legacy.json",
     "lint": "eslint .",
     "format": "eslint . --fix",
     "pack": "npm pack"