Update Document for SPFx 1.22 (gulp to heft) #10544

Ashlesha-MSFT · 2025-12-29T15:27:28Z

What's in this Pull Request?

Migration from gulp to heft
Replace office-ui-fabric-react imports with @fluentui/react
Update import paths from /lib/components/* to /lib/*
Add TypeScript strict mode fixes (optional types with | undefined)
Add null checks for optional properties
Update build commands from gulp to heft
Add type annotations for TypeScript compatibility
Fix property pane control key assignment"

…ration

… migration

…ation

…Fluent UI

learn-build-service-prod · 2025-12-29T15:28:33Z

PoliCheck Scan Report

The following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans.

✅ No issues found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

learn-build-service-prod · 2025-12-29T15:29:11Z

Learn Build status updates of commit c2c59be:

✅ Validation status: passed

File	Status	Preview URL
docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md	✅Succeeded	View
docs/spfx/web-parts/get-started/connect-to-sharepoint.md	✅Succeeded	View
docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md	✅Succeeded	View
docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md	✅Succeeded	View
docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md	✅Succeeded	View
docs/spfx/web-parts/guidance/validate-web-part-property-values.md	✅Succeeded	View

For more details, please refer to the build report.

learn-build-service-prod · 2025-12-30T06:18:55Z

PoliCheck Scan Report

The following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans.

✅ No issues found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

learn-build-service-prod · 2025-12-30T06:19:55Z

Learn Build status updates of commit 03c7ef6:

✅ Validation status: passed

File	Status	Preview URL
docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md	✅Succeeded	View
docs/spfx/web-parts/get-started/connect-to-sharepoint.md	✅Succeeded	View
docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md	✅Succeeded	View
docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md	✅Succeeded	View
docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md	✅Succeeded	View
docs/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties.md	✅Succeeded	View
docs/spfx/web-parts/guidance/validate-web-part-property-values.md	✅Succeeded	View

For more details, please refer to the build report.

andrewconnell · 2025-12-30T12:44:20Z

references #10545

… improvements

learn-build-service-prod · 2025-12-30T12:47:46Z

PoliCheck Scan Report

The following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans.

✅ No issues found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

learn-build-service-prod · 2025-12-30T12:47:54Z

Learn Build status updates of commit 1ee6bc3:

✅ Validation status: passed

File	Status	Preview URL
docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md	✅Succeeded	View
docs/spfx/web-parts/get-started/connect-to-sharepoint.md	✅Succeeded	View
docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md	✅Succeeded	View
docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md	✅Succeeded	View
docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md	✅Succeeded	View
docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md	✅Succeeded	View
docs/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties.md	✅Succeeded	View
docs/spfx/web-parts/guidance/validate-web-part-property-values.md	✅Succeeded	View

For more details, please refer to the build report.

andrewconnell

Thanks for these! I left some comments that need to be addressed. When you resolve each one, please mark it as resolved, selecting the button on each one to indicate it was addressed (making it easier to review).

andrewconnell · 2025-12-30T19:32:06Z

docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md

 ## Preview the web part

-You can preview and test your client-side web part in the SharePoint hosted workbench without deploying your solution to SharePoint. This is done by starting a local web server the hosted workbench can load files from using the gulp task **serve**.
+You can preview and test your client-side web part in the SharePoint hosted workbench without deploying your solution to SharePoint. This is done by starting a local web server the hosted workbench can load files by using the **Heft start** command.


Heft should be lowercase when running on the command line.

andrewconnell · 2025-12-30T19:32:51Z

docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md

 ```

-SharePoint client-side development tools use [gulp](http://gulpjs.com/) as the task runner to handle build process tasks such as:
+SharePoint client-side development tools use [heft](https://heft.rushstack.io/) as the task runner to handle build process tasks such as:


Heft is a proper name and should be uppercase when used in prose copy.

andrewconnell · 2025-12-30T19:33:06Z

docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md

 - Bundle and minify JavaScript and CSS files.

-VS Code provides built-in support for gulp and other task runners. Select <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on Windows or <kbd>CMD</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on macOS to debug and preview your web part.
+VS Code provides built-in support for heft and other task runners. Select <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on Windows or <kbd>CMD</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on macOS to debug and preview your web part.


Heft is a proper name and should be uppercase when used in prose copy.

andrewconnell · 2025-12-30T19:33:29Z

docs/spfx/web-parts/get-started/connect-to-sharepoint.md


    > [!NOTE]
-    > Keep the console window and Visual Studio Code side-by-side to see gulp automatically compile as you save changes in Visual Studio Code.
+    > Keep the console window and Visual Studio Code side-by-side to see heft automatically compile as you save changes in Visual Studio Code.


Heft is a proper name and should be uppercase when used in prose copy.

andrewconnell · 2025-12-30T19:34:01Z

docs/spfx/web-parts/get-started/connect-to-sharepoint.md


 1. Save the file.
-1. Switch to the console window that is running **gulp serve** and check if there are any errors. If there are errors, gulp reports them in the console, and you need to fix them before proceeding.
+1. Switch to the console window that is running **heft start** and check if there are any errors. If there are errors, heft reports them in the console, and you need to fix them before proceeding.


Heft is a proper name and should be uppercase when used in prose copy (the 2nd instance in this line).

andrewconnell · 2025-12-30T19:34:42Z

docs/spfx/web-parts/get-started/connect-to-sharepoint.md

    ![Render lists data from localhost](../../../images/sp-lists-render-online-workbench.png)

-1. Now you can stop the server from running. Switch to the console and stop **gulp serve**. Select <kbd>CTRL</kbd>+<kbd>C</kbd> to stop the gulp task.
+1. Now you can stop the server from running. Switch to the console and stop **heft start**. Select <kbd>CTRL</kbd>+<kbd>C</kbd> to stop the heft task.


same comment about heft casing as previously posted

andrewconnell · 2025-12-30T19:38:14Z

docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md

 ### Package contents

-The package uses SharePoint Feature to package your web part. By default, the gulp task creates a feature for your web part.
+The package uses SharePoint Feature to package your web part. By default, the heft task creates a feature for your web part.


same comment about heft casing as previously posted

andrewconnell · 2025-12-30T19:38:34Z

docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md


 1. *Before* adding the web part to a SharePoint server-side page, run the local server.
-1. In the console window that has the **helloworld-webpart** project directory, run the gulp task to start serving from localhost:
+1. In the console window that has the **helloworld-webpart** project directory, run the heft task to start serving from localhost:


same comment about heft casing

andrewconnell · 2025-12-30T19:43:04Z

@Ashlesha-MSFT Thanks for these! Since opening this PR, we've implemented a master tracker issue for all updates that need to be addressed

#10545

In the future, can you follow the instructions in that issue, as multiple people will be working off this list & it will help to ensure we don't have more than one person working on the same thing.

Thanks!

…nto update-custom-property-pane-docs

learn-build-service-prod · 2025-12-31T04:31:08Z

PoliCheck Scan Report

The following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans.

✅ No issues found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

learn-build-service-prod · 2025-12-31T04:31:28Z

Learn Build status updates of commit 472d132:

✅ Validation status: passed

File	Status	Preview URL
docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md	✅Succeeded	View
docs/spfx/web-parts/get-started/connect-to-sharepoint.md	✅Succeeded	View
docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md	✅Succeeded	View
docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md	✅Succeeded	View
docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md	✅Succeeded	View
docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md	✅Succeeded	View
docs/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties.md	✅Succeeded	View
docs/spfx/web-parts/guidance/validate-web-part-property-values.md	✅Succeeded	View

For more details, please refer to the build report.

Ashlesha-MSFT · 2025-12-31T04:33:29Z

@andrewconnell,
I’ve addressed all the review comments as directed and updated the documentation accordingly — including fixing the Heft/heft casing (uppercase in prose, lowercase for CLI commands). All comments have been resolved.

Thank you for the detailed review and guidance 👍

Noted about the master tracker issue #10545 — I’ll make sure to follow that process for any future updates to avoid overlap.

Appreciate the review and feedback!

learn-build-service-prod · 2025-12-31T05:51:15Z

PoliCheck Scan Report

The following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans.

✅ No issues found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

learn-build-service-prod · 2025-12-31T05:51:50Z

Learn Build status updates of commit 1566240:

✅ Validation status: passed

File	Status	Preview URL
docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md	✅Succeeded	View
docs/spfx/web-parts/get-started/connect-to-sharepoint.md	✅Succeeded	View
docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md	✅Succeeded	View
docs/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md	✅Succeeded	View
docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md	✅Succeeded	View
docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md	✅Succeeded	View
docs/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties.md	✅Succeeded	View
docs/spfx/web-parts/guidance/validate-web-part-property-values.md	✅Succeeded	View

For more details, please refer to the build report.

andrewconnell · 2025-12-31T10:43:42Z

@Ashlesha-MSFT said:

All comments have been resolved.

When you do this, can you literally mark them as resolved? That's what I meant when I had this in my comment:

When you resolve each one, please mark it as resolved, selecting the button on each one to indicate it was addressed (making it easier to review).

You can do this by clicking the Resolve Conversation button... it helps quickly verify the necessary changes have been addressed (like in the above comment):

Thanks!

Ashlesha-MSFT added 7 commits December 26, 2025 12:31

Update build-a-hello-world-web-part.md for SPFx 1.22 gulp to heft mig…

aba139f

…ration

Update connect-to-sharepoint.md for SPFx 1.22 gulp to heft migration

c9e1af0

Update serve-your-web-part-in-a-sharepoint-page.md for SPFx 1.22 heft…

43e88e1

… migration

Update hosting-webpart-from-office-365-cdn.md for SPFx 1.22 heft migr…

05fdace

…ation

Update validation guidance for web part property values

dcac065

Refine validation examples in web part property guidance

450be38

Update custom property pane control documentation for SPFx v1.22 and …

c2c59be

…Fluent UI

Ashlesha-MSFT changed the title ~~Update custom property pane docs~~ Update Document for SPFx 1.22 (gulp to heft) Dec 29, 2025

Update react-cascading-dropdowns from gulp to heft

03c7ef6

andrewconnell added the pr:in-review Actively reviewing pull request label Dec 30, 2025

andrewconnell self-assigned this Dec 30, 2025

andrewconnell mentioned this pull request Dec 30, 2025

Doc Update Tracker - Refresh articles for Heft in SPFx v1.22 #10545

Open

54 tasks

andrewconnell self-requested a review December 30, 2025 12:43

Migrate simplify-adding-web-parts to gulp to heft toolchain with code…

1ee6bc3

… improvements

andrewconnell requested changes Dec 30, 2025

View reviewed changes

andrewconnell added Needs: Author Feedback Awaiting response from the original poster of the issue. Marked as stale if no activity for 7 days. pr:do-not-merge Pull request not ready to be merged and removed pr:in-review Actively reviewing pull request labels Dec 30, 2025

Ashlesha-MSFT added 2 commits December 31, 2025 09:55

Merge branch 'main' of https://github.com/Ashlesha-MSFT/sp-dev-docs i…

f3761a5

…nto update-custom-property-pane-docs

fixed heft casing

472d132

Ashlesha-MSFT mentioned this pull request Dec 31, 2025

Update WebParts ▶ Concepts & Scenarios docs for SPFx 1.22 (gulp → Heft) #10549

Closed

Heft casing

1566240

andrewconnell approved these changes Dec 31, 2025

View reviewed changes

andrewconnell merged commit f341d30 into SharePoint:main Dec 31, 2025
3 checks passed

Update Document for SPFx 1.22 (gulp to heft) #10544

Update Document for SPFx 1.22 (gulp to heft) #10544

Uh oh!

Conversation

Ashlesha-MSFT commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Category

What's in this Pull Request?

Uh oh!

learn-build-service-prod bot commented Dec 29, 2025

PoliCheck Scan Report

✅ No issues found

More information about PoliCheck

Uh oh!

learn-build-service-prod bot commented Dec 29, 2025

✅ Validation status: passed

Uh oh!

learn-build-service-prod bot commented Dec 30, 2025

PoliCheck Scan Report

✅ No issues found

More information about PoliCheck

Uh oh!

learn-build-service-prod bot commented Dec 30, 2025

✅ Validation status: passed

Uh oh!

andrewconnell commented Dec 30, 2025

Uh oh!

learn-build-service-prod bot commented Dec 30, 2025

PoliCheck Scan Report

✅ No issues found

More information about PoliCheck

Uh oh!

learn-build-service-prod bot commented Dec 30, 2025

✅ Validation status: passed

Uh oh!

andrewconnell left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andrewconnell commented Dec 30, 2025

Uh oh!

learn-build-service-prod bot commented Dec 31, 2025

PoliCheck Scan Report

✅ No issues found

More information about PoliCheck

Uh oh!

learn-build-service-prod bot commented Dec 31, 2025

✅ Validation status: passed

Uh oh!

Ashlesha-MSFT commented Dec 31, 2025

Uh oh!

learn-build-service-prod bot commented Dec 31, 2025

PoliCheck Scan Report

✅ No issues found

More information about PoliCheck

Uh oh!

learn-build-service-prod bot commented Dec 31, 2025

✅ Validation status: passed

Uh oh!

andrewconnell commented Dec 31, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Ashlesha-MSFT commented Dec 29, 2025 •

edited

Loading