diff --git a/ai-migrations/MIGRATE_STORYBOOK_10.md b/ai-migrations/MIGRATE_STORYBOOK_10.md new file mode 100644 index 000000000..7f02854bc --- /dev/null +++ b/ai-migrations/MIGRATE_STORYBOOK_10.md @@ -0,0 +1,175 @@ +# Instructions for LLM: Transform Storybook Config Files from CommonJS to ESM + +## Task Overview + +Find all .storybook/main.ts and .storybook/main.js files in the workspace and transform +any CommonJS (CJS) configurations to ES Modules (ESM). + +### Step 1: Find All Storybook Config Files + +Use glob patterns to locate all Storybook main configuration files: +**/.storybook/main.js +**/.storybook/main.ts + +### Step 2: Identify CommonJS vs ESM + +For each file found, read its contents and determine if it uses CommonJS syntax by +checking for: + +CommonJS indicators: + +- `module.exports =` or `module.exports.` +- `exports.` +- `require()` function calls + +ESM indicators (already correct): + +- export default +- export const/export function +- import statements + +### Step 3: Transform CJS to ESM + +For each file identified as CommonJS, perform the following transformations: + +A. Convert `module.exports` + +// FROM (CJS): + +``` +module.exports = { + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'], + addons: ['@storybook/addon-essentials'] +}; +``` + +// TO (ESM): + +``` +export default { + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'], + addons: ['@storybook/addon-essentials'] +}; +``` + +B. Convert `require()` to import + +// FROM (CJS): + +``` +const { nxViteTsPaths } = require('@nx/vite/plugins/nx-tsconfig-paths.plugin'); +const { mergeConfig } = require('vite'); +``` + +// TO (ESM): + +``` +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; +import { mergeConfig } from 'vite'; +``` + +C. Handle `path.join()` patterns + +// FROM (CJS): + +``` +const path = require('path'); +const rootMain = require(path.join(__dirname, '../../.storybook/main')); +``` + +// TO (ESM): + +``` +import { join } from 'path'; +import rootMain from '../../.storybook/main'; +``` + +D. Handle Dynamic Requires in Config Functions + +// FROM (CJS): + +``` +module.exports = { + viteFinal: async (config) => { + const { mergeConfig } = require('vite'); + return mergeConfig(config, {}); + } +}; +``` + +// TO (ESM): + +``` +import { mergeConfig } from 'vite'; + +export default { + viteFinal: async (config) => { + return mergeConfig(config, {}); + } +}; +``` + +### Step 4: Validation Checks + +After transformation, verify: + +1. All require() calls have been converted to import statements at the top of the file +2. All module.exports have been converted to export default or named exports +3. Imports are at the top of the file (before the export) +4. The file maintains proper TypeScript typing if it's a .ts file + +### Step 5: Report Results + +Provide a summary of: + +- Total files found +- Files that were already ESM (no changes needed) +- Files that were transformed from CJS to ESM +- List the specific files that were modified + +### Example Complete Transformation + +Before (CJS): + +``` +const path = require('path'); +const { mergeConfig } = require('vite'); + +module.exports = { + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'], + addons: ['@storybook/addon-essentials'], + viteFinal: async (config) => { + return mergeConfig(config, { + resolve: { + alias: {} + } + }); + } +}; +``` + +After (ESM): + +``` +import { join } from 'path'; +import { mergeConfig } from 'vite'; + +export default { + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'], + addons: ['@storybook/addon-essentials'], + viteFinal: async (config) => { + return mergeConfig(config, { + resolve: { + alias: {} + } + }); + } +}; +``` + +## Important Notes + +- Preserve all comments in the original files +- Maintain the same indentation and formatting style +- For TypeScript files (.ts), ensure type imports use import type when appropriate +- Test that the transformations don't break the Storybook configuration diff --git a/migrations.json b/migrations.json new file mode 100644 index 000000000..4f657bf6e --- /dev/null +++ b/migrations.json @@ -0,0 +1,65 @@ +{ + "migrations": [ + { + "version": "22.0.0-beta.1", + "description": "Updates release version config based on the breaking changes in Nx v22", + "implementation": "./src/migrations/update-22-0-0/release-version-config-changes", + "package": "nx", + "name": "22-0-0-release-version-config-changes" + }, + { + "version": "22.0.0-beta.2", + "description": "Consolidates releaseTag* options into nested releaseTag object structure", + "implementation": "./src/migrations/update-22-0-0/consolidate-release-tag-config", + "package": "nx", + "name": "22-0-0-consolidate-release-tag-config" + }, + { + "cli": "nx", + "version": "22.1.0-beta.5", + "description": "Updates the nx wrapper.", + "implementation": "./src/migrations/update-22-1-0/update-nx-wrapper", + "package": "nx", + "name": "22-1-0-update-nx-wrapper" + }, + { + "version": "22.0.0-beta.0", + "description": "Remove the deprecated `external` and `externalBuildTargets` options from the `@nx/js:swc` and `@nx/js:tsc` executors.", + "factory": "./src/migrations/update-22-0-0/remove-external-options-from-js-executors", + "package": "@nx/js", + "name": "remove-external-options-from-js-executors" + }, + { + "version": "22.1.0-rc.1", + "description": "Removes redundant TypeScript project references from project's tsconfig.json files when runtime tsconfig files (e.g., tsconfig.lib.json, tsconfig.app.json) exist.", + "factory": "./src/migrations/update-22-1-0/remove-redundant-ts-project-references", + "package": "@nx/js", + "name": "remove-redundant-ts-project-references" + }, + { + "cli": "nx", + "version": "22.1.0-beta.8", + "requires": { "storybook": ">=10.0.0" }, + "description": "Update workspace to use Storybook v10", + "implementation": "./src/migrations/update-22-1-0/migrate-to-storybook-10", + "package": "@nx/storybook", + "name": "update-22-1-0-migrate-storybook-v10" + }, + { + "cli": "nx", + "version": "21.6.1-beta.2", + "requires": { "@angular/core": ">=20.3.0" }, + "description": "Update the @angular/cli package version to ~20.3.0.", + "factory": "./src/migrations/update-21-6-1/update-angular-cli", + "package": "@nx/angular", + "name": "update-angular-cli-version-20-3-0" + }, + { + "version": "20.3.0", + "description": "Adds `BootstrapContext` to `bootstrapApplication` calls in `main.server.ts` to support server rendering.", + "factory": "./bundles/add-bootstrap-context-to-server-main.cjs#migrate", + "package": "@angular/core", + "name": "add-bootstrap-context-to-server-main" + } + ] +}