@microsoft/generator-sharepoint 1.13.1 → 1.14.0

package/lib/generators/searchQueryModifier/index.js

@@ -36,7 +36,7 @@ class SearchQueryModifierGenerator extends BaseExtension.BaseExtensionGenerator
         super(args, options);
         this.friendlyName = 'Search Query Modifier';
         this.codeName = 'SearchQueryModifier';
-        this.allowedFrameworks = [];
+        this.allowedTemplates = [];
         defineOptions(this);
     }
     initializing() {

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

@@ -1,4 +1,3 @@
-import { override } from '@microsoft/decorators';
 import { Log } from '@microsoft/sp-core-library';
 import { BaseSearchQueryModifier, IQuery, SearchQueryScenario } from '@microsoft/sp-search-extensibility';
 
@@ -18,13 +17,11 @@ const LOG_SOURCE: string = '<%= componentClassName %>';
 
 export default class <%= componentClassName %> extends BaseSearchQueryModifier<I<%= componentClassName %>Properties> {
 
-  @override
   public onInit(): Promise<void> {
     Log.info(LOG_SOURCE, 'Initialized <%= componentClassName %>');
     return Promise.resolve();
   }
 
-  @override
   public modifySearchQuery(query: IQuery, scenario: SearchQueryScenario): Promise<IQuery> {
     Log.info(LOG_SOURCE, `Modifying query ${query.queryText} with ${strings.Title}`);
     return Promise.resolve(query);

package/lib/generators/solution/index.d.ts

@@ -1,6 +1,7 @@
 import { BaseGenerator, IBaseOptions } from '../../common/BaseGenerator';
 export interface ISolutionOptions extends IBaseOptions {
     solutionName: string;
+    solutionShortDescription: string;
     skipFeatureDeployment: boolean;
     environment: 'spo';
     packageManager: 'npm' | 'pnpm' | 'yarn';

package/lib/generators/solution/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/generators/solution/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,WAAW,EAAE,KAAK,CAAC;IACnB,cAAc,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,WAAW,EAAE,MAAM,CAAiD;IACpE,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,QAAQ,SAAS,YAAY,EAAE,QAAQ,EACjE,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,EACvC,OAAO,EAAE,YAAY,GACpB,IAAI,CAEN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAAG,IAAI,CA8BhG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/generators/solution/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,wBAAwB,EAAE,MAAM,CAAC;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,WAAW,EAAE,KAAK,CAAC;IACnB,cAAc,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,WAAW,EAAE,MAAM,CAAiD;IACpE,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,QAAQ,SAAS,YAAY,EAAE,QAAQ,EACjE,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,EACvC,OAAO,EAAE,YAAY,GACpB,IAAI,CAEN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAAG,IAAI,CA8BhG"}

package/lib/generators/solution/index.js

@@ -81,22 +81,11 @@ class SolutionGenerator extends BaseGenerator_1.BaseGenerator {
                 default: lodash.kebabCase(this.appname),
                 when: () => !this.config.get('solutionName'),
                 message: 'What is your solution name?'
-            },
-            {
-                type: 'list',
-                name: 'environment',
-                when: () => !this.config.get('environment'),
-                message: 'Only SharePoint Online (latest) is supported.  For earlier versions of SharePoint (2016 and 2019) please use the 1.4.1 version of the generator.',
-                default: 'spo',
-                choices: [{ name: 'SharePoint Online only (latest)', value: 'spo' }]
-            }
-        ])
-            .then((answers) => {
-            if (!this.config.get('environment')) {
-                this.config.set('environment', answers.environment);
             }
-            const environment = this.config.get('environment');
-            const solutionName = this.config.get('solutionName');
+        ]).then((answers) => {
+            const environment = 'spo';
+            const solutionName = this.config.get('solutionName') || answers.solutionName;
+            const solutionShortDescription = this.config.get('solutionShortDescription') || `${solutionName} description`;
             // allows to set --skip-feature-deployment false
             let skipFeatureDeployment = undefined;
             const skipFeatureDeploymentConfig = this.config.get('skipFeatureDeployment');
@@ -108,9 +97,12 @@ class SolutionGenerator extends BaseGenerator_1.BaseGenerator {
                     skipFeatureDeployment = skipFeatureDeploymentConfig;
                 }
             }
+            else {
+                skipFeatureDeployment = true;
+            }
             const componentType = this.config.get('componentType');
             const extensionType = this.config.get('extensionType');
-            const framework = this.config.get('framework');
+            const template = this.config.get('framework') || this.config.get('template');
             const componentName = this.config.get('componentName');
             const componentDescription = this.config.get('componentDescription');
             const isCreatingSolution = this.config.get('isCreatingSolution');
@@ -125,10 +117,16 @@ class SolutionGenerator extends BaseGenerator_1.BaseGenerator {
                     isDomainIsolated = isDomainIsolatedConfig;
                 }
             }
+            else {
+                isDomainIsolated = false;
+            }
             const isPlusBeta = this.config.get('plusBeta');
-            this.context.solutionName = this.config.get('solutionName') || answers.solutionName;
+            this.context.solutionName = solutionName;
             this.context.libraryName = lodash.kebabCase(this.context.solutionName);
             this.context.libraryId = Utils.generateGuid();
+            this.context.solutionShortDescription = solutionShortDescription;
+            this.context.skipFeatureDeployment = skipFeatureDeployment;
+            this.context.isDomainIsolated = isDomainIsolated;
             // store some variables
             YeomanConfiguration_1.YeomanConfiguration.version = BaseGenerator_1.BaseGenerator.generatorPackageJson.version;
             YeomanConfiguration_1.YeomanConfiguration.libraryName = this.context.libraryName;
@@ -137,55 +135,17 @@ class SolutionGenerator extends BaseGenerator_1.BaseGenerator {
             YeomanConfiguration_1.YeomanConfiguration.packageManager =
                 this.config.get('packageManager') || YeomanConfiguration_1.YeomanConfiguration.packageManager || 'npm';
             this.config.set('solutionName', solutionName);
+            this.config.set('environment', environment);
+            this.config.set('solutionShortDescription', solutionShortDescription);
             this.config.set('skipFeatureDeployment', skipFeatureDeployment);
             this.config.set('componentType', componentType);
             this.config.set('extensionType', extensionType);
-            this.config.set('framework', framework);
+            this.config.set('template', template);
             this.config.set('componentName', componentName);
             this.config.set('componentDescription', componentDescription);
             this.config.set('isCreatingSolution', isCreatingSolution);
             this.config.set('isDomainIsolated', isDomainIsolated);
             this.config.set('plusBeta', isPlusBeta);
-        })
-            .then(() => {
-            return this.prompt([
-                {
-                    type: 'confirm',
-                    name: 'skipFeatureDeployment',
-                    default: false,
-                    when: () => this.config.get('skipFeatureDeployment') === undefined,
-                    message: 'Do you want to allow the tenant admin the choice of being able ' +
-                        'to deploy the solution to all sites immediately without running ' +
-                        'any feature deployment or adding apps in sites?'
-                }
-            ]);
-        })
-            .then((answers) => {
-            this.context.skipFeatureDeployment =
-                this.config.get('skipFeatureDeployment') !== undefined
-                    ? this.config.get('skipFeatureDeployment')
-                    : answers.skipFeatureDeployment;
-        })
-            .then(() => {
-            return this.prompt([
-                {
-                    type: 'confirm',
-                    name: 'isDomainIsolated',
-                    default: false,
-                    when: () => YeomanConfiguration_1.YeomanConfiguration.environment === 'spo' && this.config.get('isDomainIsolated') === undefined,
-                    message: 'Will the components in the solution require permissions to access ' +
-                        'web APIs that are unique and not shared with other components in the tenant?'
-                }
-            ]);
-        })
-            .then((answers) => {
-            if (YeomanConfiguration_1.YeomanConfiguration.environment === 'spo') {
-                if (this.config.get('isDomainIsolated') === undefined) {
-                    this.config.set('isDomainIsolated', answers.isDomainIsolated);
-                }
-                this.context.isDomainIsolated = this.config.get('isDomainIsolated');
-            }
-            // make sure we store the updated context values
             this.packageSolutionJson.setUpSolution(this.context);
         });
     }

package/lib/generators/solution/templates/base/.vscode/launch.json

@@ -1,13 +1,9 @@
 {
-  /**
-   * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the
-   * Chrome browser: https://aka.ms/spfx-debugger-extensions
-   */
   "version": "0.2.0",
   "configurations": [
     {
       "name": "Hosted workbench",
-      "type": "chrome",
+      "type": "pwa-chrome",
       "request": "launch",
       "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
       "webRoot": "${workspaceRoot}",

package/lib/generators/webpart/index.d.ts

@@ -1,4 +1,4 @@
-import { IBaseOptions, BaseGenerator, AvailableFrameworks } from '../../common/BaseGenerator';
+import { IBaseOptions, BaseGenerator, AvailableTemplates } from '../../common/BaseGenerator';
 import * as BaseComponent from '../component/BaseComponentGenerator';
 export interface IWebpartOptions extends BaseComponent.IBaseComponentOptions {
 }
@@ -9,7 +9,7 @@ export declare function defineOptions<TOptions extends IBaseOptions, TContext>(g
 export declare class WebpartGenerator extends BaseComponent.BaseComponentGenerator<IWebpartOptions, IWebpartContext> {
     protected readonly friendlyName: string;
     protected readonly codeName: string;
-    protected readonly allowedFrameworks: AvailableFrameworks[];
+    protected readonly allowedTemplates: AvailableTemplates[];
     protected readonly folderName: string;
     initializing(): void;
     prompting(): Promise<void>;

package/lib/generators/webpart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/generators/webpart/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAG9F,OAAO,KAAK,aAAa,MAAM,qCAAqC,CAAC;AAErE,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,qBAAqB;CAAG;AAE/E,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,qBAAqB;CAAG;AAE/E,wBAAgB,WAAW,CAAC,QAAQ,SAAS,YAAY,EAAE,QAAQ,EACjE,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,EACvC,OAAO,EAAE,YAAY,GACpB,IAAI,CAEN;AAED,wBAAgB,aAAa,CAAC,QAAQ,SAAS,YAAY,EAAE,QAAQ,EACnE,SAAS,EAAE,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAC3C,IAAI,CAEN;AAED,qBAAa,gBAAiB,SAAQ,aAAa,CAAC,sBAAsB,CAAC,eAAe,EAAE,eAAe,CAAC;IAC1G,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAc;IACrD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAa;IAChD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,CAAa;IACxE,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAc;IAE5C,YAAY,IAAI,IAAI;IAIpB,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAQ1B,WAAW,IAAI,IAAI;IAQnB,OAAO,IAAI,IAAI;IAqBf,OAAO,IAAI,IAAI;IAMf,GAAG,IAAI,IAAI;IAIlB,SAAS,aAAa,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,OAAO,EAAE,eAAe;IAKvE,OAAO,CAAC,aAAa;CAGtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/generators/webpart/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAI7F,OAAO,KAAK,aAAa,MAAM,qCAAqC,CAAC;AAErE,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,qBAAqB;CAAG;AAE/E,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,qBAAqB;CAAG;AAE/E,wBAAgB,WAAW,CAAC,QAAQ,SAAS,YAAY,EAAE,QAAQ,EACjE,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,EACvC,OAAO,EAAE,YAAY,GACpB,IAAI,CAEN;AAED,wBAAgB,aAAa,CAAC,QAAQ,SAAS,YAAY,EAAE,QAAQ,EACnE,SAAS,EAAE,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAC3C,IAAI,CAEN;AAED,qBAAa,gBAAiB,SAAQ,aAAa,CAAC,sBAAsB,CAAC,eAAe,EAAE,eAAe,CAAC;IAC1G,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAc;IACrD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAa;IAChD,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,CAAwB;IACjF,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAc;IAE5C,YAAY,IAAI,IAAI;IAIpB,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAQ1B,WAAW,IAAI,IAAI;IAenB,OAAO,IAAI,IAAI;IA0Bf,OAAO,IAAI,IAAI;IAMf,GAAG,IAAI,IAAI;IAIlB,SAAS,aAAa,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,OAAO,EAAE,eAAe;IAKvE,OAAO,CAAC,aAAa;CAGtB"}

package/lib/generators/webpart/index.js

@@ -22,6 +22,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebpartGenerator = exports.defineOptions = exports.composeWith = void 0;
 const path = __importStar(require("path"));
 const Utils = __importStar(require("../../common/utilities"));
+const YeomanConfiguration_1 = require("../../common/YeomanConfiguration");
 const BaseComponent = __importStar(require("../component/BaseComponentGenerator"));
 function composeWith(base, options) {
     Utils.compose(path.basename(__dirname), base, options);
@@ -36,7 +37,7 @@ class WebpartGenerator extends BaseComponent.BaseComponentGenerator {
         super(args, options);
         this.friendlyName = 'Web part';
         this.codeName = 'WebPart';
-        this.allowedFrameworks = ['react'];
+        this.allowedTemplates = ['react', 'minimal'];
         this.folderName = 'webparts';
         defineOptions(this);
     }
@@ -55,16 +56,23 @@ class WebpartGenerator extends BaseComponent.BaseComponentGenerator {
             super.configuring();
             this.ensureDependencyGroup('webpart');
             this.serveJson.setUpForWebParts();
+            const solutionName = YeomanConfiguration_1.YeomanConfiguration.libraryName;
+            this.packageSolutionJson.addFeature(Utils.generateGuid(), `${solutionName} Feature`, `The feature that activates elements of the ${solutionName} solution.`, false);
         }
     }
     writing() {
         if (this.shouldExecute()) {
-            super.writing(true);
+            super.writing(false);
+            const dest = this._getOutputFolder(this.context.componentNameCamelCase);
+            const template = this.context.template;
+            this.copyTemplate(path.join(this.sourceRoot(), template), dest);
+            if (template !== 'minimal') {
+                this.copyTemplate(path.join(this.sourceRoot(), 'loc'), path.join(dest, 'loc'));
+                this.copyTemplate(path.join(this.sourceRoot(), 'assets'), path.join(dest, 'assets'));
+            }
+            this.copyTemplate(path.join(this.sourceRoot(), 'base'), dest);
             this.fs.copy(this.templatePath('./images/outline.png'), this.destinationPath(`teams/${this.context.componentId}_outline.png`));
             this.fs.copy(this.templatePath('./images/color.png'), this.destinationPath(`teams/${this.context.componentId}_color.png`));
-            if (this.options.plusbeta) {
-                this.fs.copyTpl(this.templatePath('./officeAddin/initial.outlookManifest.xml'), this.destinationPath(`officeAddin/${this.context.componentId}_outlookManifest.xml`), { componentId: this.context.componentId });
-            }
         }
     }
     install() {

package/lib/generators/webpart/templates/loc/en-us.js

@@ -0,0 +1,11 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "DescriptionFieldLabel": "Description Field",
+    "AppLocalEnvironmentSharePoint": "The app is running on your local environment as SharePoint web part",
+    "AppLocalEnvironmentTeams": "The app is running on your local environment as Microsoft Teams app",
+    "AppSharePointEnvironment": "The app is running on SharePoint page",
+    "AppTeamsTabEnvironment": "The app is running in Microsoft Teams"
+  }
+});

package/lib/generators/webpart/templates/{base/loc → loc}/mystrings.d.ts

@@ -2,6 +2,10 @@ declare interface I<%= componentStrings %> {
   PropertyPaneDescription: string;
   BasicGroupName: string;
   DescriptionFieldLabel: string;
+  AppLocalEnvironmentSharePoint: string;
+  AppLocalEnvironmentTeams: string;
+  AppSharePointEnvironment: string;
+  AppTeamsTabEnvironment: string;
 }
 
 declare module '<%= componentStrings %>' {

package/lib/generators/webpart/templates/minimal/loc/en-us.js

@@ -0,0 +1,4 @@
+define([], function() {
+  return {
+  }
+});

package/lib/generators/webpart/templates/minimal/loc/mystrings.d.ts

@@ -0,0 +1,7 @@
+declare interface I<%= componentStrings %> {
+}
+
+declare module '<%= componentStrings %>' {
+  const strings: I<%= componentStrings %>;
+  export = strings;
+}

package/lib/generators/webpart/templates/minimal/{componentClassName}.module.scss

@@ -0,0 +1,3 @@
+.<%= componentNameCamelCase %> {
+  display: flex;
+}

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

@@ -0,0 +1,22 @@
+import { Version } from '@microsoft/sp-core-library';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+
+import styles from './<%= componentClassName %>.module.scss';
+
+export interface I<%= componentClassName %>Props {
+}
+
+export default class <%= componentClassName %> extends BaseClientSideWebPart<I<%= componentClassName %>Props> {
+
+  protected onInit(): Promise<void> {
+    return super.onInit();
+  }
+
+  public render(): void {
+    this.domElement.innerHTML = `<div class="${ styles.<%= componentNameCamelCase %> }"></div>`;
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+}

package/lib/generators/webpart/templates/none/{componentClassName}.module.scss

@@ -1,74 +1,34 @@
 @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
 
 .<%= componentNameCamelCase %> {
-  .container {
-    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);
+  overflow: hidden;
+  padding: 1em;
+  color: "[theme:bodyText, default: #323130]";
+  color: var(--bodyText);
+  &.teams {
+    font-family: $ms-font-family-fallbacks;
   }
+}
 
-  .row {
-    @include ms-Grid-row;
-    @include ms-fontColor-white;
-    background-color: $ms-color-themeDark;
-    padding: 20px;
-  }
-
-  .column {
-    @include ms-Grid-col;
-    @include ms-lg10;
-    @include ms-xl8;
-    @include ms-xlPush2;
-    @include ms-lgPush1;
-  }
-
-  .title {
-    @include ms-font-xl;
-    @include ms-fontColor-white;
-  }
+.welcome {
+  text-align: center;
+}
 
-  .subTitle {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
-
-  .description {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
+.welcomeImage {
+  width: 100%;
+  max-width: 420px;
+}
 
-  .button {
-    // Our button
+.links {
+  a {
     text-decoration: none;
-    height: 32px;
-
-    // Primary Button
-    min-width: 80px;
-    background-color: $ms-color-themePrimary;
-    border-color: $ms-color-themePrimary;
-    color: $ms-color-white;
-
-    // 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;
+    color: "[theme:link, default:#03787c]";
+    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
 
-    .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;
+    &:hover {
+      text-decoration: underline;
+      color: "[theme:linkHovered, default: #014446]";
+      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
     }
   }
 }

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

@@ -4,6 +4,7 @@ import {
   PropertyPaneTextField
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 import { escape } from '@microsoft/sp-lodash-subset';
 
 import styles from './<%= componentClassName %>.module.scss';
@@ -15,22 +16,64 @@ export interface I<%= componentClassName %>Props {
 
 export default class <%= componentClassName %> extends BaseClientSideWebPart<I<%= componentClassName %>Props> {
 
+  private _isDarkTheme: boolean = false;
+  private _environmentMessage: string = '';
+
+  protected onInit(): Promise<void> {
+    this._environmentMessage = this._getEnvironmentMessage();
+
+    return super.onInit();
+  }
+
   public render(): void {
     this.domElement.innerHTML = `
-      <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>`;
+    <section class="${styles.<%= componentNameCamelCase %>} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
+      <div class="${styles.welcome}">
+        <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
+        <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
+        <div>${this._environmentMessage}</div>
+        <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>
+      </div>
+      <div>
+        <h3>Welcome to SharePoint Framework!</h3>
+        <p>
+        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>
+        <h4>Learn more about SPFx development:</h4>
+          <ul class="${styles.links}">
+            <li><a href="https://aka.ms/spfx" target="_blank">SharePoint Framework Overview</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank">Use Microsoft Graph in your solution</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank">Build for Microsoft Teams using SharePoint Framework</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank">Publish SharePoint Framework applications to the marketplace</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank">SharePoint Framework API reference</a></li>
+            <li><a href="https://aka.ms/m365pnp" target="_blank">Microsoft 365 Developer Community</a></li>
+          </ul>
+      </div>
+    </section>`;
+  }
+
+  private _getEnvironmentMessage(): string {
+    if (!!this.context.sdks.microsoftTeams) { // running in Teams
+      return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
+    }
+
+    return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
+  }
+
+  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
+    if (!currentTheme) {
+      return;
+    }
+
+    this._isDarkTheme = !!currentTheme.isInverted;
+    const {
+      semanticColors
+    } = currentTheme;
+    this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
+    this.domElement.style.setProperty('--link', semanticColors.link);
+    this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);
+
   }
 
   protected get dataVersion(): Version {

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

@@ -1,3 +1,7 @@
 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,74 +1,34 @@
 @import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .<%= componentNameCamelCase %> {
-  .container {
-    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;
-    @include ms-fontColor-white;
-    background-color: $ms-color-themeDark;
-    padding: 20px;
-  }
-
-  .column {
-    @include ms-Grid-col;
-    @include ms-lg10;
-    @include ms-xl8;
-    @include ms-xlPush2;
-    @include ms-lgPush1;
-  }
-
-  .title {
-    @include ms-font-xl;
-    @include ms-fontColor-white;
+  overflow: hidden;
+  padding: 1em;
+  color: "[theme:bodyText, default: #323130]";
+  color: var(--bodyText);
+  &.teams {
+    font-family: $ms-font-family-fallbacks;
   }
+}
 
-  .subTitle {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
+.welcome {
+  text-align: center;
+}
 
-  .description {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
+.welcomeImage {
+  width: 100%;
+  max-width: 420px;
+}
 
-  .button {
-    // Our button
+.links {
+  a {
     text-decoration: none;
-    height: 32px;
+    color: "[theme:link, default:#03787c]";
+    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
 
-    // Primary Button
-    min-width: 80px;
-    background-color: $ms-color-themePrimary;
-    border-color: $ms-color-themePrimary;
-    color: $ms-color-white;
-
-    // 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;
-
-    .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;
+    &:hover {
+      text-decoration: underline;
+      color: "[theme:linkHovered, default: #014446]";
+      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
     }
   }
-}
+}