Merge pull request #2777 from felixbohnacker/v1.0.18

react-script-editor: Upgrade to SPFx v1.13.1 + version bump to 1.0.18

samples/react-script-editor/.gitignore

@@ -30,3 +30,6 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+
+# Release folder
+release

samples/react-script-editor/.yo-rc.json

@@ -1,7 +1,7 @@
 {
     "@microsoft/generator-sharepoint": {
         "libraryName": "pnp-script-editor",
-        "version": "1.10.0",
+        "version": "1.13.1",
         "environment": "spo",
         "isDomainIsolated": false,
         "libraryId": "1425175f-3ed8-44d2-8fc4-dd1497191294",

samples/react-script-editor/README.md

@@ -20,6 +20,7 @@ This version works only for SharePoint Online. If you want a version for Sharepo
 **It's important you read and understand the notes on [deployment](#deploy-to-non-script-sites--modern-team-sites).**
 
 ## Summary
+
 Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page
 without having to repackage it as a new SharePoint Framework web part. This web part is similar to the classic
 Script Editor Web Part, and allows you do drop arbitrary script or html on a modern page.
@@ -72,6 +73,7 @@ If all you want is to add markup on the page, you can do that as well. Adding th
 ```
 
 You may add CSS via style tags or `link` tags.
+
 ```html
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -95,9 +97,11 @@ You may add CSS via style tags or `link` tags.
 ```
 
 ## Support for Office UI Fabric styles
+
 By adding the class name `ms-Fabric` to your top element, you can use use fabric CSS classes directly in the web part. See [Fabric Core](https://developer.microsoft.com/en-us/fabric#/get-started/web#fabric-core) for more information on Fabric classes.
 
-**Sample**
+### Sample
+
 ```html
 <div class="ms-Fabric">
     <span class="ms-font-su ms-fontColor-themePrimary">
@@ -107,16 +111,19 @@ By adding the class name `ms-Fabric` to your top element, you can use use fabric
 ```
 
 ## Support for classic _spPageContextInfo
-If your scripts rely on the classic _spPageContextInfo, you can enable that in the web part property pane.
+
+If your scripts rely on the classic_spPageContextInfo, you can enable that in the web part property pane.
 
 ## Support for Teams tabs
+
 If you want to use the solution as a Teams tab, perform the changes to deploy to [non-script](#deploy-to-non-script-sites--modern-team-sites) sites and [tenant wide deployment](#deploy-tenant-wide).
 
 Next see the [Teams tab tutorial](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab) for steps needed to deploy the solution as a Teams tab.
 
 You can get access to the Teams context information via the global variable `_teamsContexInfo`. The available properties are documented at [Teams context interface](https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/microsoftteams.context?view=msteams-client-js-latest).
 
-**Sample**
+### Sample
+
 ```html
 <div class="ms-Fabric">
     <span id="ScriptIt" class="ms-font-xxl ms-fontColor-neutralPrimary">
@@ -132,29 +139,33 @@ element.innerHTML = "Team: " + _teamsContexInfo.teamName + "<br\>Channel: " + _t
 ![Script Editor web part in Teams](./assets/modern-script-editor-wp-teams.gif)
 
 ### Deploy to non-script sites / modern team sites
+
 By default this web part is not allowed on no-script sites, as it allows execution of arbitrary script. This is by design as from a security and governance perspective you might not want arbitrary script added to your pages. This is typically something you want control over.
 
 If you however want to allow the web part for non-script sites like Office 365 Group modern team sites you have to edit `ScriptEditorWebPart.manifest.json` with the following change:
+
 ```
 "requiresCustomScript": false
 ```
 
 ### Deploy tenant wide
+
 By default you have to install this web part per site collection where you want it available. If you want it enabled by default on all sites you have to edit `package-solution.json` with the following change:
+
 ```
 "skipFeatureDeployment": true
 ```
 
-In order to make it available to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well.
+In order to make it available to absolutely all sites you need apply the *Deploy to non-script sites / modern team site* change as well.
 
 ## Compatibility
 
-![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) 
+![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg)
-![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
+![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg)
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
-![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg)
+![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
-![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
@@ -168,6 +179,8 @@ In order to make it available to absolutely all sites you need apply the _Deploy
 Solution|Author(s)
 --------|---------
 react-script-editor | [Mikael Svenson](https://github.com/wobba) ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com))
+react-script-editor | [Felix Bohnacker](https://github.com/felixbohnackerfelixbohnacker)
+
 
 ## Version history
 
@@ -191,29 +204,33 @@ Version|Date|Comments
 1.0.0.15|Mar 16th, 2020|Upgrade to SPFx v1.10.0. Add support for Teams tab. Renamed package file.
 1.0.0.16|April 1st, 2020|Improved how script tags are handled and cleaned up on smart page navigation.
 1.0.17.0|January 29th, 2021|Changed versioning to 3 parts. Updated npm packages, restructured documentation, minor change to webpack analyzer setup.
+1.0.18.0|June 14, 2022|Upgrade to SPFx v1.13.1
 
 ## Minimal Path to Awesome
+
 ### Local testing
 
-- Clone this repository
+* Clone this repository
-- In the command line run:
+* In the command line run:
-  - `npm install`
+  * `npm install`
-  - `gulp serve`
+  * `gulp serve`
 
 ### Deploy
+
 * `gulp clean`
 * `gulp bundle --ship`
 * `gulp package-solution --ship`
 * Upload `.sppkg` file from `sharepoint\solution` to your tenant App Catalog
-	* E.g.: https://&lt;tenant&gt;.sharepoint.com/sites/AppCatalog/AppCatalog
+  * E.g.: https://&lt;tenant&gt;.sharepoint.com/sites/AppCatalog/AppCatalog
 * Add the web part to a site collection, and test it on a page
+
 ## Features
+
 This web part illustrates the following concepts on top of the SharePoint Framework:
 
-- Re-use existing JavaScript solutions on a modern page
+* Re-use existing JavaScript solutions on a modern page
-- Office UI Fabric
+* Office UI Fabric
-- React
+* React
-
 
 ## Help
 
@@ -235,5 +252,4 @@ Finally, if you have an idea for improvement, [make a suggestion](https://github
 
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
 
-
 <img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-script-editor" />

samples/react-script-editor/assets/sample.json

@@ -9,7 +9,7 @@
       "Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page without having to repackage it as a new SharePoint Framework web part."
     ],
     "creationDateTime": "2019-10-13",
-    "updateDateTime": "2019-10-13",
+    "updateDateTime": "2022-06-14",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.4.1"
+        "value": "1.13.1"
       },
       {
         "key": "SPFX-FULLPAGEAPP",
@@ -52,6 +52,11 @@
         "pictureUrl": "https://github.com/waldekmastykarz.png",
         "name": "Waldek Mastykarz",
         "twitter": "waldekm"
+      },
+      {
+        "gitHubAccount": "felixbohnacker",
+        "pictureUrl": "https://github.com/felixbohnacker.png",
+        "name": "Felix Bohnacker"
       }
     ],
     "references": [

samples/react-script-editor/config/copy-assets.json

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

samples/react-script-editor/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-    "workingDir": "./temp/deploy/",
+    "workingDir": "./release/assets/",
     "account": "<!-- STORAGE ACCOUNT NAME -->",
     "container": "pnp-script-editor",
     "accessKey": "<!-- ACCESS KEY -->"

samples/react-script-editor/config/package-solution.json

@@ -3,10 +3,17 @@
     "solution": {
         "name": "Modern Script Editor web part by mikaelsvenson",
         "id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
-        "version": "1.0.17.0",
+        "version": "1.0.18.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": false,
-        "isDomainIsolated": false
+        "isDomainIsolated": false,
+        "developer": {
+            "name": "Mikael Svenson",
+            "privacyUrl": "",
+            "termsOfUseUrl": "",
+            "websiteUrl": "https://www.techmikael.com/",
+            "mpnId": ""
+          }
     },
     "paths": {
         "zippedPackage": "solution/pnp-script-editor.sppkg"

samples/react-script-editor/config/serve.json

@@ -1,10 +1,6 @@
 {
     "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
     "port": 4321,
-    "initialPage": "https://localhost:5432/workbench",
+    "initialPage": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
-    "https": true,
+    "https": true
-    "api": {
-        "port": 5432,
-        "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-    }
 }

samples/react-script-editor/gulpfile.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const gulp = require('gulp');
 const path = require('path');
 const build = require('@microsoft/sp-build-web');
 const bundleAnalyzer = require('webpack-bundle-analyzer');
@@ -22,4 +21,14 @@ build.configureWebpack.mergeConfig({
 });
 
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
-build.initialize(gulp);
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));

samples/react-script-editor/package.json

@@ -1,41 +1,38 @@
 {
     "name": "pnp-script-editor",
-    "version": "1.0.17",
+    "version": "1.0.18",
     "private": true,
     "main": "lib/index.js",
-    "engines": {
-        "node": ">=0.10.0"
-    },
     "resolutions": {
         "@types/react": "16.8.8"
     },
     "dependencies": {
-        "@microsoft/sp-core-library": "1.10.0",
+        "@microsoft/sp-core-library": "1.13.1",
-        "@microsoft/sp-loader": "1.10.0",
+        "@microsoft/sp-loader": "1.13.1",
-        "@microsoft/sp-lodash-subset": "1.10.0",
+        "@microsoft/sp-lodash-subset": "1.13.1",
-        "@microsoft/sp-property-pane": "1.10.0",
+        "@microsoft/sp-property-pane": "1.13.1",
-        "@microsoft/sp-webpart-base": "1.10.0",
+        "@microsoft/sp-webpart-base": "1.13.1",
         "@pnp/spfx-controls-react": "2.4.0",
         "@pnp/spfx-property-controls": "2.3.0",
-        "@types/es6-promise": "0.0.33",
+        "office-ui-fabric-react": "7.174.1",
-        "@types/react": "16.8.8",
+        "react": "16.13.1",
-        "@types/react-dom": "16.8.3",
+        "react-dom": "16.13.1"
-        "@types/webpack-env": "1.13.1",
-        "office-ui-fabric-react": "6.214.0",
-        "react": "16.8.5",
-        "react-dom": "16.8.5"
     },
     "devDependencies": {
         "@microsoft/rush-stack-compiler-3.2": "^0.6.3",
         "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-        "@microsoft/sp-build-web": "1.10.0",
+        "@microsoft/rush-stack-compiler-3.7": "0.2.3",
-        "@microsoft/sp-module-interfaces": "1.10.0",
+        "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-        "@microsoft/sp-tslint-rules": "1.10.0",
+        "@microsoft/sp-build-web": "1.13.1",
-        "@microsoft/sp-webpart-workbench": "1.10.0",
+        "@microsoft/sp-module-interfaces": "1.13.1",
+        "@microsoft/sp-tslint-rules": "1.13.1",
         "@types/chai": "3.4.34",
         "@types/mocha": "2.2.38",
+        "@types/react": "16.9.36",
+        "@types/react-dom": "16.9.15",
+        "@types/webpack-env": "1.13.1",
         "ajv": "~5.2.2",
-        "gulp": "~3.9.1",
+        "gulp": "4.0.2",
         "tslint-microsoft-contrib": "5.0.0",
         "webpack-bundle-analyzer": "^4.4.0"
     },
@@ -44,4 +41,4 @@
         "clean": "gulp clean",
         "test": "gulp test"
     }
-}
+}

samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts

@@ -66,7 +66,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
         );
         ReactDom.render(element, this.domElement);
     }
-
+    
     protected get dataVersion(): Version {
         return Version.parse('1.0');
     }
@@ -144,7 +144,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
         for (let i = 0; i < elem.attributes.length; i++) {
             const attr = elem.attributes[i];
             // Copies all attributes in case of loaded script relies on the tag attributes
-            if(attr.name.toLowerCase() === "onload"  ) continue; // onload handled after loading with SPComponentLoader
+            if (attr.name.toLowerCase() === "onload") continue; // onload handled after loading with SPComponentLoader
             scriptTag.setAttribute(attr.name, attr.value);
         }
 
@@ -178,9 +178,9 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
         let scriptTags = headTag.getElementsByTagName("script");
         for (let i = 0; i < scriptTags.length; i++) {
             const scriptTag = scriptTags[i];
-            if(scriptTag.hasAttribute("pnpname") && scriptTag.attributes["pnpname"].value == this._unqiueId ) {
+            if (scriptTag.hasAttribute("pnpname") && scriptTag.attributes["pnpname"].value == this._unqiueId) {
                 headTag.removeChild(scriptTag);
-            }            
+            }
         }
 
         if (this.properties.spPageContextInfo && !window["_spPageContextInfo"]) {

samples/react-script-editor/tslint.json

@@ -1,5 +1,5 @@
 {
-    "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+    "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
     "rules": {
       "class-name": false,
       "export-name": false,