@microsoft/generator-sharepoint 1.13.0-beta.19 → 1.13.0-rc.1

package/lib/generators/webpart/templates/none/{componentClassName}.ts

@@ -4,12 +4,6 @@ import {
   PropertyPaneTextField
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-import {
-  ThemeProvider,
-  ThemeChangedEventArgs,
-  IReadonlyTheme,
-  ITheme
-} from '@microsoft/sp-component-base';
 import { escape } from '@microsoft/sp-lodash-subset';
 
 import styles from './<%= componentClassName %>.module.scss';
@@ -21,174 +15,22 @@ export interface I<%= componentClassName %>Props {
 
 export default class <%= componentClassName %> extends BaseClientSideWebPart<I<%= componentClassName %>Props> {
 
-  private _themeProvider: ThemeProvider;
-  private _themeVariant: IReadonlyTheme | undefined;
-  private _isDarkTheme: boolean = false;
-  private _environmentMessage: string = '';
-  private _hasTeamsContext: boolean = false;
-
-  protected onInit(): Promise<void> {
-    this._hasTeamsContext = !!this.context.sdks.microsoftTeams;
-
-    if (this._hasTeamsContext) {
-      // handling MS Teams theme
-      const teamsTheme = this.context.sdks.microsoftTeams.context.theme;
-      this._updateTheme(teamsTheme);
-
-      this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(this._handleTeamsThemeChangedEvent);
-    }
-    else {
-      // Consume the new ThemeProvider service
-      this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
-
-      // If it exists, get the theme variant
-      this._themeVariant = this._themeProvider.tryGetTheme();
-      this._updateTheme(this._themeVariant);
-
-      // Register a handler to be notified if the theme variant changes
-      this._themeProvider.themeChangedEvent.add(this, this._handleSPThemeChangedEvent);
-    }
-
-    this._environmentMessage = this._getEnvironmentMessage();
-
-    return super.onInit();
-  }
-
   public render(): void {
     this.domElement.innerHTML = `
-    <div class="${ styles.<%= componentNameCamelCase %> } ${ this._hasTeamsContext ? styles.teams : '' }">
-      <div class="${ styles.container }">
-        <div class="${ styles.row }">
-          <div class="${ styles.column } ${ styles.center }">
-            <img src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
-          </div>
-        </div>
-        <div class="${ styles.row }">
-          <div class="${ styles.column } ${ styles.center }">
-            <span class="${ styles.title }">Well done, ${this.context.pageContext.user.displayName}!</span>
-            <p class="${ styles.subTitle }">${this._environmentMessage}</p>
-            <p class="${ styles.subTitle }">Web part property value: <span class="${ styles.description }"> ${escape(this.properties.description)}</span></p>
+      <div class="${ styles.<%= componentNameCamelCase %> }">
+        <div class="${ styles.container }">
+          <div class="${ styles.row }">
+            <div class="${ styles.column }">
+              <span class="${ styles.title }">Welcome to SharePoint!</span>
+              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
+              <p class="${ styles.description }">${escape(this.properties.description)}</p>
+              <a href="https://aka.ms/spfx" class="${ styles.button }">
+                <span class="${ styles.label }">Learn more</span>
+              </a>
+            </div>
           </div>
         </div>
-        <div class="${ styles.row }">
-          <div class="${ styles.column }">
-            <span class="${ styles.header }">Welcome to SharePoint Framework!</span>
-            <p class="${ styles.content }">
-            The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
-            </p>
-            <span class="${ styles.subheader }">Learn more about SPFx development:</span>
-            <p class="${ styles.content }">
-              <ul>
-                <li><a class="${styles.link}" href="https://aka.ms/spfx" target="_blank">Overview of the SharePoint Framework</a></li>
-                <li><a class="${styles.link}" href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/notes-on-solution-packaging" target="_blank">SharePoint solution packaging</a></li>
-                <li><a class="${styles.link}" href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview" target="_blank">Build for Microsoft Teams using SharePoint Framework</a></li>
-                <li><a class="${styles.link}" href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components" target="_blank">Use Fluent UI components in your SharePoint client-side web part</a></li>
-                <li><a class="${styles.link}" href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" target="_blank">Use Microsoft Graph in your solution</a></li>
-                <li><a class="${styles.link}" href="https://docs.microsoft.com/en-us/javascript/api/overview/sharepoint?view=sp-typescript-latest" target="_blank">SharePoint Framework API reference</a></li>
-                <li><a class="${styles.link}" href="https://aka.ms/m365pnp" target="_blank">Microsoft 365 Community Assets - Calls, samples and documentation</a></li>
-                <li><a class="${styles.link}" href="https://aka.ms/m365/devprogram" target="_blank">Register to Microsoft 365 Developer program for a free developer tenant</a></li>
-              </ul>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>`;
-  }
-
-  /**
-   * Update the current theme variant reference and re-render.
-   *
-   * @param args The new theme
-   */
-   private _handleSPThemeChangedEvent = (args: ThemeChangedEventArgs): void => {
-    this._themeVariant = args.theme;
-    this._updateTheme(this._themeVariant);
-    this.render();
-  }
-
-  /**
-   * Handle Teams theme change callback.
-   *
-   * @param args The new theme
-   */
-   private _handleTeamsThemeChangedEvent = (theme: string): void => {
-    this._updateTheme(theme);
-    this.render();
-  }
-
-  /**
-   * Updates fields based on the new theme
-   * @param currentTheme updated theme
-   */
-  private _updateTheme = (currentTheme: IReadonlyTheme | string) => {
-    this._setIsDarkTheme(currentTheme);
-    this._setCSSVariables();
-  }
-
-  /**
-   * Updates the _isDarkTheme based on current SharePoint or Teams theme
-   */
-  private _setIsDarkTheme = (currentTheme: IReadonlyTheme | string) => {
-    if (typeof currentTheme === 'string') { // Teams theme
-      this._isDarkTheme = currentTheme !== 'default'; // contrast theme is interpreted as dark
-    }
-    else { // SharePoint theme
-      const theme = currentTheme as ITheme;
-      this._isDarkTheme = !!theme && !!theme.isInverted;
-    }
-  }
-
-  private _setCSSVariables = () => {
-    let primaryText = '#323130'; // default
-    let linkText = '#03787c';
-    if (this._themeVariant) {
-      const {
-        semanticColors
-      } = this._themeVariant;
-      primaryText = semanticColors.bodyText;
-      linkText = semanticColors.link;
-    }
-    else if (this._hasTeamsContext) { // fallback for Teams
-      primaryText = this._isDarkTheme ? '#FFFFFF' : '#242424';
-      linkText = this._isDarkTheme ? '#FFFFFF' : '#494B83';
-    }
-    else { // fallback for single app page
-      primaryText = this._isDarkTheme ? '#3a96dd' : '#323130';
-      linkText = this._isDarkTheme ? '#3a96dd' : '#03787c';
-    }
-
-    this.domElement.style.setProperty('--primaryText', primaryText);
-    this.domElement.style.setProperty('--linkText', linkText);
-  }
-
-  private _getEnvironmentMessage = (): string => {
-    // checking for local environment
-    let isLocal: boolean = false;
-    const {
-      loaderConfig
-    } = this.manifest;
-
-    if (loaderConfig && loaderConfig.internalModuleBaseUrls && loaderConfig.internalModuleBaseUrls.length) {
-      isLocal = /^http(s)?\:\/\/localhost/gmi.test(loaderConfig.internalModuleBaseUrls[0]);
-    }
-
-    if (this._hasTeamsContext) { // running in Teams
-      return isLocal ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
-    }
-
-    return isLocal ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
-  }
-
-  protected onDispose(): void {
-    //
-    // unregistering theme changed handlers
-    //
-    if (this._hasTeamsContext) {
-      this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(null);
-    }
-    else {
-      this._themeProvider.themeChangedEvent.remove(this, this._handleSPThemeChangedEvent);
-    }
+      </div>`;
   }
 
   protected get dataVersion(): Version {

package/lib/generators/webpart/templates/react/components/I{componentName}Props.ts

@@ -1,7 +1,3 @@
 export interface I<%= componentName %>Props {
   description: string;
-  isDarkTheme: boolean;
-  environmentMessage: string;
-  hasTeamsContext: boolean;
-  userDisplayName: string;
 }

package/lib/generators/webpart/templates/react/components/{componentName}.module.scss

@@ -1,67 +1,74 @@
 @import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .<%= componentNameCamelCase %> {
-  &.teams {
-    font-family: $ms-font-family-fallbacks;
-  }
-
   .container {
-    @include ms-Grid;
-    color: var(--primaryText, #323130); // note: CSS variables support is limited to modern browsers only
+    max-width: 700px;
+    margin: 0px auto;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
   }
 
   .row {
     @include ms-Grid-row;
-    padding-top: 0.5rem;
+    @include ms-fontColor-white;
+    background-color: $ms-color-themeDark;
+    padding: 20px;
   }
 
   .column {
     @include ms-Grid-col;
-    @include ms-sm12;
-    @include ms-md8;
-    @include ms-mdOffset2;
-    @include ms-lg8;
-    @include ms-lgOffset2;
-  }
-
-  .welcomeImage {
-    width: 100%;
-    max-width: 420px;
-  }
-
-  .center {
-    text-align: center;
+    @include ms-lg10;
+    @include ms-xl8;
+    @include ms-xlPush2;
+    @include ms-lgPush1;
   }
 
   .title {
-    @include ms-fontSize-18;
-    @include ms-fontWeight-semibold;
+    @include ms-font-xl;
+    @include ms-fontColor-white;
   }
 
   .subTitle {
-    @include ms-fontSize-14;
+    @include ms-font-l;
+    @include ms-fontColor-white;
   }
 
-  .header {
-    @include ms-fontSize-18;
-    @include ms-fontWeight-semibold;
+  .description {
+    @include ms-font-l;
+    @include ms-fontColor-white;
   }
 
-  .subheader {
-    @include ms-fontSize-14;
-    @include ms-fontWeight-semibold;
-  }
+  .button {
+    // Our button
+    text-decoration: none;
+    height: 32px;
 
-  .content {
-    @include ms-fontSize-14;
-  }
+    // Primary Button
+    min-width: 80px;
+    background-color: $ms-color-themePrimary;
+    border-color: $ms-color-themePrimary;
+    color: $ms-color-white;
 
-  .link {
-    color: var(--linkText, #03787c); // note: CSS variables support is limited to modern browsers only
-  }
+    // Basic Button
+    outline: transparent;
+    position: relative;
+    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: $ms-font-size-m;
+    font-weight: $ms-font-weight-regular;
+    border-width: 0;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0 16px;
 
-  .description {
-    @include ms-fontWeight-bold;
-    @include ms-fontSize-14;
+    .label {
+      font-weight: $ms-font-weight-semibold;
+      font-size: $ms-font-size-m;
+      height: 32px;
+      line-height: 32px;
+      margin: 0 4px;
+      vertical-align: top;
+      display: inline-block;
+    }
   }
 }

package/lib/generators/webpart/templates/react/components/{componentName}.tsx

@@ -5,49 +5,19 @@ import { escape } from '@microsoft/sp-lodash-subset';
 
 export default class <%= componentName %> extends React.Component<I<%= componentName %>Props, {}> {
   public render(): React.ReactElement<I<%= componentName %>Props> {
-    const {
-      description,
-      isDarkTheme,
-      environmentMessage,
-      hasTeamsContext,
-      userDisplayName
-    } = this.props;
     return (
-      <div className={ `${styles.<%= componentNameCamelCase %>} ${ hasTeamsContext ? styles.teams : '' }` }>
+      <div className={ styles.<%= componentNameCamelCase %> }>
         <div className={ styles.container }>
           <div className={ styles.row }>
-            <div className={ `${ styles.column } ${ styles.center }` }>
-              <img src={ isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png') } className={ styles.welcomeImage } />
+            <div className={ styles.column }>
+              <span className={ styles.title }>Welcome to SharePoint!</span>
+              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
+              <p className={ styles.description }>{escape(this.props.description)}</p>
+              <a href="https://aka.ms/spfx" className={ styles.button }>
+                <span className={ styles.label }>Learn more</span>
+              </a>
             </div>
           </div>
-          <div className={ styles.row }>
-          <div className={ `${styles.column} ${styles.center}` }>
-            <span className={ styles.title }>Well done, {userDisplayName}!</span>
-            <p className={ styles.subTitle }>{environmentMessage}</p>
-            <p className={ styles.subTitle }>Web part property value: <span className={ styles.description }>{escape(description)}</span></p>
-          </div>
-        </div>
-        <div className={ styles.row }>
-          <div className={ styles.column }>
-            <span className={ styles.header }>Welcome to SharePoint Framework!</span>
-            <p className={ styles.content }>
-            The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
-            </p>
-            <span className={ styles.subheader }>Learn more about SPFx development:</span>
-            <p className={ styles.content }>
-              <ul>
-                <li><a className={ styles.link } href="https://aka.ms/spfx" target="_blank">Overview of the SharePoint Framework</a></li>
-                <li><a className={ styles.link } href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/notes-on-solution-packaging" target="_blank">SharePoint solution packaging</a></li>
-                <li><a className={ styles.link } href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview" target="_blank">Build for Microsoft Teams using SharePoint Framework</a></li>
-                <li><a className={ styles.link } href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components" target="_blank">Use Fluent UI components in your SharePoint client-side web part</a></li>
-                <li><a className={ styles.link } href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" target="_blank">Use Microsoft Graph in your solution</a></li>
-                <li><a className={ styles.link } href="https://docs.microsoft.com/en-us/javascript/api/overview/sharepoint?view=sp-typescript-latest" target="_blank">SharePoint Framework API reference</a></li>
-                <li><a className={ styles.link } href="https://aka.ms/m365pnp" target="_blank">Microsoft 365 Community Assets - Calls, samples and documentation</a></li>
-                <li><a className={ styles.link } href="https://aka.ms/m365/devprogram" target="_blank">Register to Microsoft 365 Developer program for a free developer tenant</a></li>
-              </ul>
-            </p>
-          </div>
-        </div>
         </div>
       </div>
     );

package/lib/generators/webpart/templates/react/{componentClassName}.ts

@@ -6,12 +6,6 @@ import {
   PropertyPaneTextField
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-import {
-  ThemeProvider,
-  ThemeChangedEventArgs,
-  IReadonlyTheme,
-  ITheme
-} from '@microsoft/sp-component-base';
 
 import * as strings from '<%= componentStrings %>';
 import <%= componentName %> from './components/<%= componentName %>';
@@ -23,150 +17,19 @@ export interface I<%= componentClassName %>Props {
 
 export default class <%= componentClassName %> extends BaseClientSideWebPart<I<%= componentClassName %>Props> {
 
-  private _themeProvider: ThemeProvider;
-  private _themeVariant: IReadonlyTheme | undefined;
-  private _isDarkTheme: boolean = false;
-  private _environmentMessage: string = '';
-  private _hasTeamsContext: boolean = false;
-
-  protected onInit(): Promise<void> {
-    this._hasTeamsContext = !!this.context.sdks.microsoftTeams;
-
-    if (this._hasTeamsContext) {
-      // handling MS Teams theme
-      const teamsTheme = this.context.sdks.microsoftTeams.context.theme;
-      this._updateTheme(teamsTheme);
-
-      this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(this._handleTeamsThemeChangedEvent);
-    }
-    else {
-      // Consume the new ThemeProvider service
-      this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
-    
-      // If it exists, get the theme variant
-      this._themeVariant = this._themeProvider.tryGetTheme();
-      this._updateTheme(this._themeVariant);
-    
-      // Register a handler to be notified if the theme variant changes
-      this._themeProvider.themeChangedEvent.add(this, this._handleSPThemeChangedEvent);
-    }
-
-    this._environmentMessage = this._getEnvironmentMessage();
-  
-    return super.onInit();
-  }
-
   public render(): void {
     const element: React.ReactElement<I<%= componentName %>Props> = React.createElement(
       <%= componentName %>,
       {
-        description: this.properties.description,
-        isDarkTheme: this._isDarkTheme,
-        environmentMessage: this._environmentMessage,
-        hasTeamsContext: this._hasTeamsContext,
-        userDisplayName: this.context.pageContext.user.displayName
+        description: this.properties.description
       }
     );
 
     ReactDom.render(element, this.domElement);
   }
 
-  /**
-   * Update the current theme variant reference and re-render.
-   *
-   * @param args The new theme
-   */
-   private _handleSPThemeChangedEvent = (args: ThemeChangedEventArgs): void => {
-    this._themeVariant = args.theme;
-    this._updateTheme(this._themeVariant);
-    this.render();
-  }
-
-  /**
-   * Handle Teams theme change callback.
-   *
-   * @param args The new theme
-   */
-   private _handleTeamsThemeChangedEvent = (theme: string): void => {
-    this._updateTheme(theme);
-    this.render();
-  }
-
-  /**
-   * Updates fields based on the new theme
-   * @param currentTheme updated theme
-   */
-  private _updateTheme = (currentTheme: IReadonlyTheme | string) => {
-    this._setIsDarkTheme(currentTheme);
-    this._setCSSVariables();
-  }
-
-  /**
-   * Updates the _isDarkTheme based on current SharePoint or Teams theme
-   */
-  private _setIsDarkTheme = (currentTheme: IReadonlyTheme | string) => {
-    if (typeof currentTheme === 'string') { // Teams theme
-      this._isDarkTheme = currentTheme !== 'default'; // contrast theme is interpreted as dark
-    }
-    else { // SharePoint theme
-      const theme = currentTheme as ITheme;
-      this._isDarkTheme = !!theme && !!theme.isInverted;
-    }
-  }
-
-  private _setCSSVariables = () => {
-    let primaryText = '#323130'; // default
-    let linkText = '#03787c';
-    if (this._themeVariant) {
-      const {
-        semanticColors
-      } = this._themeVariant;
-      primaryText = semanticColors.bodyText;
-      linkText = semanticColors.link;
-    }
-    else if (this._hasTeamsContext) { // fallback for Teams
-      primaryText = this._isDarkTheme ? '#FFFFFF' : '#242424';
-      linkText = this._isDarkTheme ? '#FFFFFF' : '#494B83';
-    }
-    else { // fallback for single app page
-      primaryText = this._isDarkTheme ? '#3a96dd' : '#323130';
-      linkText = this._isDarkTheme ? '#3a96dd' : '#03787c';
-    }
-
-    this.domElement.style.setProperty('--primaryText', primaryText);
-    this.domElement.style.setProperty('--linkText', linkText);
-  }
-
-  private _getEnvironmentMessage = (): string => {
-    // checking for local environment
-    let isLocal: boolean = false;
-    const {
-      loaderConfig
-    } = this.manifest;
-
-    if (loaderConfig && loaderConfig.internalModuleBaseUrls && loaderConfig.internalModuleBaseUrls.length) {
-      isLocal = /^http(s)?\:\/\/localhost/gmi.test(loaderConfig.internalModuleBaseUrls[0]);
-    }
-
-    if (this._hasTeamsContext) { // running in Teams
-      return isLocal ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
-    }
-
-    return isLocal ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
-  }
-
   protected onDispose(): void {
     ReactDom.unmountComponentAtNode(this.domElement);
-
-    //
-    // unregistering theme changed handlers
-    //
-    if (this._hasTeamsContext) {
-      this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(null);
-    }
-    else {
-      this._themeProvider.themeChangedEvent.remove(this, this._handleSPThemeChangedEvent);
-    }
   }
 
   protected get dataVersion(): Version {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/generator-sharepoint",
-  "version": "1.13.0-beta.19",
+  "version": "1.13.0-rc.1",
   "description": "Yeoman generator for the SharePoint Framework",
   "scripts": {},
   "engines": {
@@ -13,13 +13,13 @@
   "homepage": "http://aka.ms/spfx",
   "main": "lib/generators/app/index.js",
   "dependencies": {
-    "@microsoft/spfx-heft-plugins": "1.13.0-beta.19",
+    "@microsoft/spfx-heft-plugins": "1.13.0-rc.1",
     "@rushstack/node-core-library": "3.40.0",
     "colors": "~1.2.1",
     "lodash": "4.17.21",
-    "update-notifier": "~2.6.0",
+    "update-notifier": "5.1.0",
     "uuid": "~3.1.0",
-    "yeoman-generator": "5.0.0",
+    "yeoman-generator": "5.4.2",
     "yosay": "2.0.2"
   }
 }

package/lib/generators/solution/templates/base/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "./release/assets/"
-}