Preparation:

• nx migration generator implementation feat(tools): add migration generator user input validations #18421

What is new DX (1st stage) ?

• Tooling: only source of truth for package resolution/mapping is tsconfig.base.json, that uses TSpath aliases
• TypeScript: go to definition goes to actual source instead to generated declaration files
• Plug n play: clone/update your local copy and start working without need to build anything (jest-serializer-make-styles and babel-make-styles needs still manual build node packages within repo are required to be built first before using (blocking no-build dev loop mode) #18357)
• Task runner:
  • simplified package.json#scripts tasks
  • running storybook/start and test will invoke native storybook and jest binaries respectively
• Storybook:
  • every package uses collocated stories with local setup that inherits from global /.storybook configuration.
  • this makes running storybook much faster and also enables for experimentation on your local package level without affecting rest
• Testing:
  • tests are setup via locally scoped config that inherits from root /jest.preset.js.
  • all projects are registered via jest projects in root /jest.config.js which enables also easy debugging from within your IDE.

Packages that need migration

• @fluentui/babel-make-styles chore: migrate babel-make-styles to new DX #18758
• @fluentui/jest-serializer-make-styles chore(jest-serializer-make-styles): migrate to new DX #18719
• @fluentui/make-styles chore(make-styles): migrate to new DX #18673
• @fluentui/react-accordion Migrates react-accordion #18553
• @fluentui/react-avatar react-avatar: migration to new DX #18866
• @fluentui/react-badge react-badge: Migrate to new DX #18746
• @fluentui/react-button Button: Migrate react-button to new DX #18607
• @fluentui/react-checkbox react-checkbox: Migration to new DX #19063
• @fluentui/react-card react-card: Migrate to new DX #19036
• @fluentui/react-components chore(react-components): migrate to new dx stage-1 #19040 (comment)
• @fluentui/react-context-selector chore(react-context-selector): Migrate DX #18772
• @fluentui/react-divider react-divider: Migrate to new DX #18625
• @fluentui/react-image react-image - Migration to new DX #18606
• @fluentui/react-input Migrate react-input to new DX and create Input from template #18781
• @fluentui/react-link react-link: Migrating to new DX #18614
• @fluentui/react-make-styles react-make-styles: Migrate to new DX. #18695
• @fluentui/react-menu chore(Menu): Migrate to new DX #18581
• @fluentui/react-portal chore(Portal): Migrate to new DX #18482
• @fluentui/react-positioning chore(usePopper): Migrate react-positioning to new DX #18586
• @fluentui/react-provider chore: migrate react-provider to new DX #18745
• @fluentui/react-shared-contexts chore(react-shared-contexts): migrate to new DX #18998
• @fluentui/react-storybook chore(react-storybook): migrate to new DX stage 1 #19037
• @fluentui/react-tabster chore(react-tabster): Migrate to new DX #18699
• @fluentui/react-theme chore(react-theme): Migrate to new DX #18655
• @fluentui/react-theme-provider refactor: remove @fluentui/react-theme-provider #18710
• @fluentui/react-tooltip react-tooltip: Migration to new DX #18977
• @fluentui/react-utilities chore(react-utilities): Migrate DX #18794
• @fluentui/react-popover chore(Popover): Migrate DX #18623
• @fluentui/react-label react-label - Migration to new DX #18656
• @fluentui/react-text / NEW PACKAGE react-text scaffolding #18571
• @fluentui/react-aria / NEW PACKAGE React aria #18550

How to migrate

1. execute migration generator
   • from CLI yarn nx workspace-generator migrate-converged-pkg --name='@fluentui/<package-name>'
   • via NX console VSCode plugin
2. Apply any manual adjustments that might be needed. Check documentation
3. Create PR and make sure to add @microsoft/fluentui-react-build as reviewer to double check your changes

FAQ

Why should I migrate my own/teams packages instead of one person doing the whole migration for me?

As we are in process of introducing new Dev Experience for how to approach migrations in general within monorepo, that could be implemented also for customers in the future, we wanna:

• get early feedback within the internal team
• show you gradual approach with less efforts (small focused PRs)
• distribute the knowledge about the new underlying tooling (nx) that we use within internal team

I wanna create new package, how should I proceed ?

• bootstrap new package via plop for convergence
• follow steps mentioned above 🙌

If you'll run into any issues while running the migration generator please open github issue.

Thank you and Happy migrating!